CSS never ceases to amaze me.

Previously, I had a rather simple PHP script on my site which looked at the browser string from the client; if it seemed from that as though the current user was on a mobile device, I then either loaded a mobile-overrides CSS file, or modified the statements inline (in the case that my CSS was served up via PHP).

Smashing Magazine recently posted an article titled Modern CSS Layouts: The Essential Techniques which came up on Digg.  I’ve heard of a number of the other sections, though what really caught my eye was the large amount of discussion about media queries.  What particularly caught my eye was the article titled Safe media queries from dev.opera.com.

This is why, if you’re using Internet Explorer to visit this site, all my pages look a bit messed up in their current state.  I’m being liberal with the “safe” part of the article, and tending towards more what’s in the Dev.Opera tagline: “follow the standards, break the rule.”

General idea

So the idea here is that within a single CSS file, it’s possible to section out certain rules such that they apply only to certain types of devices or screens. The main players are min-width and max-width; the general syntax goes something like: @media all and (max-width:800px) {/* rules */}.

My approach

There are loads of way to attack this. One major concern is that Internet Explorer and other non-supported browsers don’t understand whatever it is you put inside these rules, as defined in the way of the previous paragraph. The Dev.Opera article breaks this down quite well.

As long as the site is readable and easily navigable, I’m not too worried about making sure the page looks exactly the same on each system and browser. Obviously, I have a much looser set of criteria than most designers out there; so if you’re more restricted you’ll have to think about your other options.

Rethinking set widths

In my case, I thought I’d rethink the structure of fixed-width elements; yes, all fixed widths. Why? In the world of mobile devices and all sorts of browsers and options, it’s going to be more and more important that your sites’s content can reflow in an accessible way regardless of the platform.

Ergo, my tack is to put any sort of important definitions pertaining to a width: definition down to the bottom of the CSS file, inside my @media all and (min-width:...) {} block. What once was:

#page {width:820px; margin:30px auto; padding:10px;}

becomes:

#page {padding:10px;}
@media all and (min-width:840px){#page {width:820px; margin:30px auto;}}

The 840px minimum width is to figure in the padding on each side; and the result is that if my browser window is more narrow than that, I don’t have any horizontal scrolling to do.

In my structure, #page contains both a main section and a sidebar. I floated the sidebar left, along with its children; and then in the media query block alone I set the width of the actual sidebar. There is a bit of a jumble of elements at the bottom now, but moving to a small screen makes it worth it.

My pattern, then, is to let the browser expand all the elements as it needs, and to only set the large-screen elements for the browsers that can handle it.

Choice philosophies

With the above plan, Internet Explorer and the other non-supported browsers are going to see my site in some sort of goofy layout that’s meant for phones and pocket devices. I’m OK with that, because I can still get at the content in a nice enough way. I feel that the standards have to logical, but they also have to be pushed forward by aggressive use and stricter implementations, and browsers which accept these standards are the only way towards true progress.

The bigger picture, beyond my half-assed vendetta, is that CSS is alive and well; and I’m more than happy to be ditching the practice of checking browser strings in order to get my site readable on all platforms. I also would urge anyone who takes a quick look at my site and gives the concept a pass: that there’s more than my solution out there; and if you have something even better than what I’ve dreamed, please have at it and leave a note for me in the comments :)