Media queries are one of the best things ever to happen in Web development, but even though they’re now being widely used (largely due to their implementation in templates and frameworks), they’re still not very well understood by the majority of developers. The power and features available to developers to create better websites is definitely being under-utilized. So with that in mind, we have put together this guide to media queries. If you haven’t given much attention to media queries before, this is your opportunity to gain more insight into everything you can do with them.
Media queries are at the heart of responsive design and adaptive design
The default breakpoints in some responsive design frameworks are dead wrong
Framework developers have targeted platforms using a very broad brush, with the result that many intermediary resolutions are ignored when calculating responsive screen layouts. This can be detrimental in some situations, because their idea of “small” might be very different from yours. Set your own breakpoints manually for the best results.
Difference between CSS2 and CSS3 media queries
In CSS2, the style sheet asks the device “Hey, what kind of device are you?” and the device responds with something like “I’m a phone” or “I’m a printer”. The browser then formats the web page according to the instructions in the style sheet. CSS3 media queries work differently. Instead of merely asking “What are you?”, CSS3 asks “What can you do?”.
Knowing all the capabilities of a device allows the browser to be much more specific about the way content is formatted. Devices are able to supply a lot of detailed information about what they can do, but most designers are checking only one thing: the width of the viewport.
To implement the CSS2 functionality correctly, you needed to create a different style sheet for each media type. Prior to CSS3, the media types that could be recognized included:
As you can see, some of the media types could be confusing. A handheld device and a projection device, for example, do have a screen. To implement multiple styles, you would need to use a csv list enclosed in quotes, like:
In HTML5 and CSS3, the ability to assign specific style sheets to specific media types has not been dropped. You can still do that, but you can also do a lot more.
Responsive design should be more than just shrinking and squashing
Way too many designs are labeled as “responsive” when all they do is shrink or grow their content to match the available width. This is not how responsive design is supposed to work, yet you’d find a lot of designers claiming they know how to do responsive design just because they can make content fit the width.
True responsive design means exploiting as much of the available technology as you can. For example, if the device seems likely to be a touch screen, then the entire interface should be engineered to be touch screen friendly. Unfortunately CSS3 doesn’t allow us to test for that specifically, we have to guess based on other clues, but it will be available in CSS4.
That upgrade we can expect in CSS4 is important, because currently the method for guessing if a device might be a touch screen is inadequate, and could degrade the user experience in some conditions.
What a device can tell you about itself
If there’s a flaw in CSS3 media queries, it’s that there’s not enough of them. Currently the information a device can report includes:
- Width – the number of pixels or dots that can fit on a single continuous row of output
- Height – the number of pixels or dots that can fit on a single continuous column of output
- Device Width – refers to the maximum physical horizontal resolution
- Device Height – refers to the maximum physical vertical resolution
- Orientation – a computed value that compares width to height
- Aspect Ratio – similar to orientation, but more precise
- Device Aspect Ratio – the permanent physical aspect ratio of the device
- Color – helps to determine if a device can display color, and how many colors
- Color Index – the size (number of entries) of the color lookup table of the device
- Monochrome – provides the bits per pixel value in a monochrome frame buffer
- Resolution – refers to pixel density
- Scan – relevant only to TV devices, it determines the scan type (interlace or progressive)
- Grid – helps to identify a non-bitmap visual or tactile device
In CSS4 there will be additional things you can test for, including:
- Update – the frequency at which the display (if any) is updated (none, slow, fast)
- Overflow Block – default device behavior for overflowed content blocks
- Overflow Inline – default device behavior for overflowed inline content
- Color Gamut – an approximate range of colors that can be displayed
- Pointer – the precision of accuracy of the device pointer (coarse, fine, or none)
- Hover – does the device have the ability for a pointer to hover over an element?
- Any Pointer – determines if any available device pointers match the requested criteria
- Any Hover – determines if any of the available device pointers can hover
- Scripting – determines whether client-side scripting is supported, and in what way
CSS4 also will deprecate device-width, device-height, and device-aspect-ratio. These were kind of useless anyway, so that won’t be too painful.
The new CSS4 media queries will add useful features to help us deliver more targeted designs. For example, a coarse pointer type in combination with the lack of hover ability would be an indication that the user is accessing the page from a touch screen or special device type such as an X-Box. Using additional media queries can help eliminate any doubt about the device type.
Using CSS3 media queries
A media query can be applied to a style sheet in the following manner:
This will cause the instructions to only be executed on a device supporting at least 8-bit color. This can be refined more by specifying a type (in the previous example, the default type “all” was applied automatically as the result of type omission):
Note that when using the “and” keyword, white space is important. There must be a space between the keyword and what follows.
Using media queries correctly makes you a true designer
The word “designer” is over-used and abused. Most people using that title to describe themselves don’t deserve to use it, because they haven’t earned that right. A true designer is an engineer, somebody who innovates a creative solution to a practical problem using applied principles of design. The average so-called “designer” just hacks an existing template (created by someone else) into shape the best way they can manage.
These impostors to the design title are a blight on the industry, and create problems for everyone else. Unfortunately they sprung up and spread faster than mold on a budget hotel bathroom ceiling, so we’re stuck with them for now.
As a real designer, you’ll be developing an understanding of the underlying technologies you use, and the technical abilities and features of the various device types you are supporting. You should be engineering solutions that are tailor made for different environments. For example, on a phone, one of the most difficult things to do is use a drop-down list. Radio buttons and checkboxes can also present a challenge. You could consider making these items larger, more accessible, and more distinct, so that they’re easier to select.
All media queries are written as a line in a section of CSS code, and include media-specific CSS. When the media type is omitted, the browser will assume that the default type “all” is intended, and will apply the CSS instructions to any media type that can accept the instructions. This of course means that you never actually need to include the word “all”, as it is implied if no type is specified. When the media type “all” is included, that is mainly for the benefit of a human reader, as the browser does not need that information.
The optional keyword “only” must appear before the media type if it is used at all (and certainly does not have to be, because it is implied, except when contraindicated). That instruction is more for the benefit of a human reader than for a browser.
The optional keyword “not”, on the other hand, is for the browser, and is used to indicate that the instructions should only apply to devices that are identified as not being the specified type.
Most media queries accept modifiers and may require units to be specified in order to work correctly. If there are no modifiers, the unit values must match exactly whatever is shown.
Many media types that were valid in CSS2 are now deprecated in CSS3 and CSS4 but still accepted and can be used. The use of deprecated media types is discouraged but not forbidden.
The types now deprecated are aural, braille, embossed, handheld, projection, tty, and tv. There are many reasons for this, but one was that, as stated earlier, almost nobody uses them (in CSS, but they do use them as devices). This may be the only contemporary example of W3C rolling back a feature that was intended to provide greater accessibility.