Sorry there, got back and had something major plunked down on my desk that took priority.
The reason I would avoid media queries is you end up targeting just one or two DEVICES; I have no issues with targeting by TYPE of device, but really targeting JUST the iPhone for example isn’t exactly my idea of good web design practices. Let them have the desktop version – or get a browser that can reformat the desktop version into something useful like Opera mini. or that can throw away the excess automatically like Opera Mobile.
It’s all about drawing the line – Ok, so you customized for the iPhone… but now it looks like crap on droid, so you fix that but now blackberry users are *****ing… you’ve got to draw the line somewhere; It’s bad enough we have to target seven different desktop browsers without having to specifically target every concievable handheld manufacturer… netfront, uzard, obigo, netsailor… the list goes on and on as do the screen sizes.
Though as I said before if you REALLY want to do the media queries stuff, do it in the CSS. If you’ve thought out your DIV and source order properly it’s unlikely to take more than 200-300 bytes of CSS to make the differences between 800+ and narrow, especially if you are used to designing fluid or semi-fluid layouts. Turn off floats, remove restricted width from sidebar… and, uhm… that’s probably it – not even worth the extra handshake for the separate file; That most browsers will still download even if they aren’t using it and the media query failed… and if you REALLY want it in that separate file, that’s where @import comes in handy.
@media (max-device-width: 480px) and (min-device-width: 320px) {
@import(narrow.css);
}
Just toss that in your normal screen.css… Oh, and it occurred to me that IE ignores media queries ANYWAYS if they are in the CSS, so this would mean you don’t even need the conditional comment! I’d also consider just testing if max-device-width is less than 800 and to hell with the rest; you do it right with a semi-fluid layout and you should be able to support everyone regardless of screen size. (1st gen netbook owners would love you for that)…
Generally the only thing I use IE CC’s for is javascript, and then I use the @cc_on version – and usually the ONLY thing I do that for is subtracting that pesky 10ms overhead from a setTimeout.
Of course, this too would be listed as invalid CSS on the 2.1 validator – but at least you can use the CSS3 validator without changing the markup’s doctype…
I really just loathe the idea of media queries in the markup just as I do conditional comments; Drilldown logic would work far better – device type for the general CSS, then cascade the target in the CSS so it’s cached. Cleaner and leaner.
Another approach that I used in the past – and this was a very specific case was to feed the ‘narrow’ version to all users, then use javascript to do a class swap based on width… scripting off users got the ‘narrow’ version, scripting on if larger than my min-width got the full. Basically do it as a close-cousin to mcSwitchy. (or how I handle it, which I call ‘quickswitchy’ since swapping one class and inheriting is WAY smoother than the normal “let’s target every element by hand” crap.)
Has the advantage that it works on handhelds that have scripting disabled, and works in IE… only people that get screwed are the people with scripting disabled/blocked on large screens, and you could always toss a NOSCRIPT tag in there to tell them “Hey, enable JS for widescreen version”… toss a max-width of like 512px on there, then strip it for the wide one and the scripting off is less of an issue.
NOT a great solution, but no worse than media queries really.
