I was at the first event run by the amiable Keir and Glenn under the banner of Workshops for Web People in Leicester last week, featuring Andy Clarke‘s follow-on presentation for his Transcending CSS book. A well done to both the lads and Andy for putting on a great day and keeping everyone entertained and full of food and drink.
Andy spent some time looking at CSS3 and where certain aspects of it can be used right now. One feature is that of media queries. These are a series of features such as width, height, aspect-ratio and resolution with min- or max- prefixes, which enable the serving of css tailored to specific devices. Andy showed and example where a media query could be used to serve up a separate layout for mobile devices - specifically his iPhone.
Inspired by this demo I decided to reproduce that on this site. My aim was for anyone viewing on a supporting browser to be served up an additional set of styles if their browser-window’s size would normally have given them scrollbars. In practice this meant adding the following code to my main css file where I import my other files:
@import "/assets/reset.css";
@import "/assets/screen.css";
@media all and (max-width: 800px){
...additional styles…
}
This translates as “when the device supports media all and is no wider than 800px, use these rules”. You can try this with Safari (I’ve tested on Safari 3) and Opera (tested on 9.24) , though not Firefox, by resizing you browser to under 800px and hitting refresh. The refresh is required to activate the stylesheets, so it is not as robust a solution as one of the javascript options for this particular use, but it does provide an insight into how powerful CSS3 could be if we could get it out of the gate. The obvious applications are for mobile devices - especially those which don’t identify themselves as handheld, so by-pass the normal for-mobile styles.
Note that trying to add this rule in a <link.. /> tag doesn’t seem to work as it gets applied by Firefox even when not matching the rules, it seems in that state the browser ignores the bit of the rule it doesn’t understand, proceeding to implement the bits it does.