Over a million developers have joined DZone.

Embracing All Media for Your Message with CSS3 Media Queries

DZone's Guide to

Embracing All Media for Your Message with CSS3 Media Queries

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Some media, of course, the developer doesn't need to worry about -- you don't need to track (AM)OLED technology, for example, in order to develop for mobile.

But at some level media do matter, and for these the developer has often been forced to make some tough decisions.

For example: you want to display lots of site navigation on the user's screen -- but you don't want your site navigation to print, because hyperlinkable paper hasn't become cheap enough yet.

CSS2.1 could already handle the coarse-grained distinction between screen and print styles. The code to do this was simple, e.g.:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

in the html doc and

@media screen {
  * { font-family: sans-serif }

in the css file.

Print and screen were by far the most common media types, though a few other 'media types' could also be specified in HTML4/CSS2 (braille, for example).

But these days, while 'print' means more or less the same as it did ten years ago (at least until e-ink and OLED destroy all competitors), 'screen' really doesn't. In fact, with resolutions, form-factors, and even contrast-levels proliferating like lop-eared rodents, modern web developers need to worry about perhaps a dozen different possible display media. 

Wherefore was introduced the new CSS3 Media Queries specification: not a larger set of media types, but a way for CSS to ask and receive true/false information about the user's display (or, in principle, other media type; but realistically this probably means screen).The CSS3/HTML5-compliant browser can then make styling decisions, specified in the style sheet, depending on the true/false answers to these queries.

For example, instead of specifying a media type (media=print), an HTML5 <link> tag can specify a stylesheet to follow depending on media properties:

<link rel="stylesheet" media="screen and (color)" href="example.css" />

and a stylesheet can run logical checks on media properties using CSS grammar (roughly the same as CSS2.1 grammar).

CSS3 can query lots of media features:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color-index
  • monochrome
  • resolution
  • scan (progressive or interlaced)
  • grid

some of which would have helped in the old GeoCities days (e.g., width), others will probably become useful only in our highly graphical HTML5 future (e.g., scan).

This is all really cool -- foundational if not sexy (unless you like circuits, in which case it is sexy) -- but might be easier to follow in another medium.

So here's a little video of David Powers speaking at the latest London HTML5 User Group meetup, with full explanation and quite a few notes on browser and device support.

Enjoy -- on your desktop! or iPad! or Lumia 800! or any medium whatsoever.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}