CSS3 - Media Queries

With the expansion of the web beyond computers onto all sorts of other devices, web pages can no longer presume that they are being displayed on a computer screen where there is plenty of space available to display a large portion of the page all at once. Many alternated devices for displaying web pages particularly those you can hold in your hand have much smaller displays and so cannot easily display a web page the way it would look on a computer screen.

The original solution that CSS provided to handle this situation was to allow briwsers running on different devices to identify the type of device that they were running on - "screen" would indicate that it was being displayed on a computer screen, "handheld" would indicate a handheld device etc. This by itself didn't solve the problem though, particularly when you consider that handheld devices themselves have a wide range of different screen sizes. Also almost no one set up separate CSS for media="handheld" and so most handheld devices end up using the same media="screen" styles as computers do.

CSS3 introduces a lot more flexibility into specifying which media styles are to apply to. Instead of just specifying a media type we can now qualify that media type by preceding it with either "only" or "not". Specifying "only" will hide the rule from older browsers that have not implemented CSS3 media queries. Specifying "not" reverses the media test and means that the styles apply to every media type except the one specified.

In addition to optionally prefixing the media with one of these two qualifiers, we can also now include expressions into the media query as well. To do this we basically add "and (expression)" after the media type. The expression is written in the same format as you write your CSS and many of the possible values look very similar to what you might set in your CSS. You can test "width", "min-width", "max-width", "height", "min-height", "max-height" to test the actual viewport size in which the web page is to be displayed, To test the actual size of the device instead of the viewport you can test "max-device-width" (and similar for the other equivalents to the viewport tests). Another possible test if for "orientation:portrait" or "orientation:landscape" which tests for which out of the width and height is the larger dimension (particularly useful for mobile devices that can be rotated for use in either orientation). TYhere are also a number of other less useful expressions available.

Multiple expressions can be incorporated into the one media query just by adding each to the query separately. For example:

media="only screen and (max-width:800px) and (min-width:600px)"

The styles in a stylesheet defined with that particular media query would only be used when the viewport width is between 600 and 800 pixels (inclusive).

The original media specification allowed styles to be applied to more than one media type by specifying them as a comma separated list (eg. "screen, projection") and the CSS3 media queries continue to support this by allowing multiple media queries to be applied as a comma separated list.

Media queries currently work in all modern browsers except for Internet Explorer 8 (and earlier versions of IE).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow