Media Queries
CSS media queries have been around for quite a while, with CSS 2 introducing media=screen and media=print also available to create print stylesheets, but CSS3 has added to this with the new media queries which allows much more targetting of browser types. These allow different stylesheets or different rules to be targetted by declaring the widths of browsers. Examples of this include:
@media print {
body{width: 100%}
}
Or more advanced targetting such as:
@media screen (max-width: 1024px) {
body {background: #fff;}
}
The CSS spec states that:
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
This means that sites can be optimised to both the device and screen resolution, although one could argue that by hiding certain elements on smaller devices is changing the content. For example, if this site is scaled down to 800×600 the “about” section on the homepage is not displayed, as this prevents horizontal scrollbars and is not essential. Users can still access the navigation and the latest posts, but I feel that this information can be removed and not alter the experience too much.
Media queries have received a lot of attention recently with the A List Apart article on Responsive Web design and excellent uses of the technology by Simon Collison and Jon Hicks, and whilst I was impressed with them I held off from experimenting with it for a while, as I didn’t know too much about them and they seemed a little scary!
However after experimenting with them recently on this site, it’s a really simple technique of over-riding your default stylesheet with specific styles for the devices and browser sizes stated. Although screen resolutions are increasing and very few users are still using 800×600 or even 1024×768, the art of progressive enhancement means that these users shouldn’t be ignored and media queries allows sites to be tailored to these users. Resize your browser to see how this site reacts to smaller browser sizes, although there are more impressive examples out there.
Having played with them now and seeing the power of what can be achieved, I’ll definitely be making use of them in future projects, both at work and in personal projects.
