Tuesday, August 24th, 2010

CSS Media Queries: Bees Knees Or Spawn of Satan?

Category: CSS

<p>The last month has seen an interesting back and forth over CSS Media Queries. In a nutshell, CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For example, you could have a stylesheet only display for screen devices with a maximum screen width of 480px (i.e. a mobile device) using the following CSS Media Query, bolded below:

  1. <link rel="stylesheet" type="text/css"
  2.           media="screen and (max-device-width: 480px)"
  3.           href="shetland.css" />

Things kicked off with a nice introductory article by Ethan Marcotte introducing CSS Media Queries in order to have responsive and adaptable web designs.

Things started to get interesting with a counter-article by Jason Grigsby titled “CSS Media Query for Mobile is Fool’s Gold“. Jason claims:

Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false promise of a simple solution for designing to multiple screens.

His chief issues with CSS Media Queries can be boiled down to:

The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution.

From a high level his other objections are:

  • That speed matters more on mobile devices
  • That letting the browser scale images for you is a bad idea since delivering images at the maximum size then scaling them down is wasteful on mobile devices
  • That resizing images on mobile browsers is cpu and memory intensive, both of which mobile devices can lack

Jason also discusses some interesting workarounds people have proposed for the above issues still using CSS Media Queries, such as delivering different images at different sizes using different CSS Media Queries and using hidden CSS background images but:

However, the iPhone still downloads the images even though they are not displayed.

He does find some workarounds but there are issues:

Two methods that appear to work are:

  • Setting the parent of an element with a background image to display:none.
  • Using media query min-width declaration to only specify a minimum browser width for the desktop image and a max-width for the mobile image does result in only the mobile image being downloaded in Mobile Safari.

These two options mean that using CSS media queries isn’t completely impossible, but using the parent element to hide images and changing existing desktop CSS to add min-width declarations are significant changes to existing CSS. It isn’t going to be as simple as adding a CSS media query for mobile and calling your job done.

In the end Jason argues for separate web sites for mobile, but:

There are some good uses of CSS media queries. If you’re building a discrete web application where you have more control and can make sure that the desktop web isn’t bloated, it can make sense.

Also, Ros Hodgekiss from Campaign Monitor wrote an exceptional article on how you can use media queries in html email to provide a mobile optimized layout. This is perhaps the ideal use case because when you send html email, you have no choice but to send a single html document regardless of what device the recipient will be using.

In response to Jason’s CSS Media Query smackdown PPK wrote up an editorial titled “Combining Media Queries and JavaScript“:

On Tuesday Jason Grigsby challenged the conventional view that media queries are all we need to make a website mobile-friendly. Although he’s right when he points out some serious problems, I do not think that media queries are the “fool’s gold,” as Jason says. The message seems to be more that media queries alone are not enough to make your sites mobile-friendly. An additional component is required.

PPK argues that CSS Media Queries have their place:

Media queries are silver bullets when it comes to pure CSS. Restricting the width of your site, moving sidebars and main navigations elsewhere, media queries can do all that and more.

The trick, however, is that a pure CSS approach is not enough. In addition we need a JavaScript that also reads out the media queries and uses the data to decide whether to download the complicated mapping script, whether to download the low-source or the full-source images, or possibly none.

As far as I know there is no direct access to media queries from JavaScript. You can’t read out whether the example media query above has fired or not.

He then talks about a nifty way to pair up JS and CSS Media Queries:

Fortunately, there is a pretty safe way of using JavaScript in conjunction with media queries. It turns out that all browsers I tested so far have paired the width and device-width media queries with the values of document.documentElement. clientWidth and screen.width, respectively.

This is a general rule. All mobile browsers that support media queries exhibit these pairings. It’s hard to believe, but I haven’t found any exceptions yet — and rest assured that I searched for them, because I could not believe that it would be this simple. And I will continue to keep an eye on this and report problems as soon as I find them.

When these scripts are added to media queries, we’re a whole lot closer to making one website that reacts to a mobile (or rather, a narrow-screen) environment both in its CSS and in its asset management.

Finally, Bruce Lawson tag teamed into the rumble with an article on the topic titled “There’s more to mobile than than media queries“:

In our enthusiasm to try out media queries and in our rush to skim the latest articles and tutorials, it’s easy to overlook caveats and restrictions. Media queries are good at what they do but are just a single tool for a job where two or three are probably needed. In particular, combining them with JavaScript as PPK and others advocate seems to me the most practical solution for web developers to adopt at the moment.

[CC-A by Paolo Camera]

Tell me below whether you think CSS Media Queries are your friend or foe?

Related Content:

Posted by Brad Neuberg at 6:00 am
6 Comments

+++--
3.6 rating from 5 votes

6 Comments »

Comments feed TrackBack URI

PPK argues that there is no “true” access to media queries from the page, and I’m not sure if this is a viable solution because I have nothing to test on, but could you not loop through document.styleSheets and create a rule on a media query based sheet with something like “.mobile {}”, which wouldn’t map to an element, but would be available to .cssRules[0].selector.

Again, I don’t have a browser to test with, but theorycraft says this should work.

Comment by QuesoLoco — August 24, 2010

That headline is a tad over the top, don’t you think?

A couple of quick notes:

Bruce Lawson didn’t write the article you linked to. The article was written by Daniel Davis from Opera.

There was some great discussion between Ethan Marcotte, Brian Fling and Jeff Croft on this post on Jeff’s site:
http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/

I posted a couple of follow up articles:
http://cloudfour.com/more-on-css-media-queries-for-mobile/
http://cloudfour.com/new-to-mobile-welcome-to-the-one-web-debate/

The real point of my original article was:

“The way in which CSS media query has been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens.”

That’s absolutely true. Media query isn’t a silver bullet. It’s a useful tool in some contexts, but can’t do everything that people thought it could.

Comment by grigs — August 24, 2010

And then there’s the 4th dimension: time. You may have decided that you’re going to do a mobile site, you’re going to create free mobile apps that pull from the same data as web or maybe you’re still deciding between the approaches. But your deadline for launch is solid and desktop deployment is a mandatory deliverable. Media queries allow you to have a phased release schedule without completely shutting mobile out of the initial launch. I’ve also noticed that sometimes people will switch to the ‘full’ site from mobile to remediate quirks. Though it’s not your users’ ideal mobile experience you should at least do something to make desktop usable in those scenarios. I’m generally not a fan of javascript for layout. So I would view media query+js as a fragile kludge. If I can’t provide the user with optimal layout with the layout language I would opt to focus my effort on a mobile site.

Comment by tack — August 24, 2010

I would say “friend” as they could be considered the “poor man’s” or “quick and dirty” solution to creating a mobile version of a site. I’ve never actually used the mobile media type to push out a mobile stylesheet, so I’m mainly speaking from a theoretical standpoint.

My main concern is that yes you can hide certain DIVs and make the rest of the layout look good, but if you are loading lots of extra JavaScript and markup that won’t be used then it really is excessive. That’s when you have to start loading things on an as-needed basis, which can be tough if you’re relying on JS libraries that inherently introduce additional overhead.

As Tack said, however, mobile media queries are a great way to get something up and running real quick. Ideally, there’d be a CMS to separate the desktop and mobile versions of two sites, with the mobile version using a m.domain.com sub-domain. Granted, the level of complexity increases dramatically at this point, but if mobile is really that important to the audience it may be worth it. That, or one could just let services like WordPress handle all the heavy plumbing of keeping the two separate.

Comment by joseGaldamez — August 25, 2010

I only use media queries so I can serve an extra CSS file to deal with smartphones and the iPad not being able to have a fixed footer. Scrolling a page on them scrolls the viewport, not the page so the footer will scroll up and over the contents. So I hide it since its not really needed and just takes some precious screen real-estate.

BTW, another way is to have some Javascript continously moving the footer to the correct place, or using a CSS transform somehow, but thats just yucky and not needed for me.

Comment by GordonStanton — August 29, 2010

I’ve come up with a set of css references using media queries that takes a progressive enhancement approach (and therefore avoids the problem of mobile devices having to process or download the heavier desktop css) and seems fairly effective (a few IE issues aside). Judging from the amount of concern expressed about media queries here and in the articles cited, maybe I’m missing something. I’ve written a blog post briefly outlining what I”ve come up with:

selecting css references based on device capabilities

I’d be very interested to hear what people think the drawbacks of such an approach would be,

Thanks.

Comment by SquirrelMonkey — September 15, 2011

Leave a comment

You must be logged in to post a comment.