Article: Cutting the Mustard with CSS Media Queries

Extract from SitePoint article “Cutting the Mustard with CSS Media Queries” by Andy Kirk
Published 4th Aug 2015

Cutting the Mustard is a term coined by Tom Maslen at the BBC. The method uses JavaScript that checks for browser capabilities before loading further CSS and JavaScript to give the user an ‘enhanced’ experience, otherwise the browser will only load the files necessary for a ‘core’ experience.

There has been a flurry of interest in cutting the mustard of late, for example Migrating to Flexbox by Cutting the Mustard and Server Side Mustard Cut, and in Progressive Enhancement in general.

Doing Better

In my experience, however, even a very basic ‘core’ experience can cause problems on some very old browsers, so I wanted to build on this idea and see if it was possible to deny really old browsers any CSS at all, leaving them with only the HTML.

Of course, the obvious solution is to use JavaScript to conditionally load all the CSS if the browser cuts the mustard, but this felt too heavy-handed for my liking; modern, capable browsers that didn’t load the JavaScript would be penalised by having no styles at all. So I looked for a CSS-only approach to the problem and I found an old post by Craig Buckler. After a fair bit of experimentation and adaptation, I came up with this:

<!-- in the <head> -->
<link rel="stylesheet" href="css/your-stylesheet.css"
      media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css"
      media="only screen and (-webkit-min-device-pixel-ratio:0) 
      and (min-color-index:0)">

How it Works

The first <link> element’s media query allows the stylesheet to load only in the following browsers:

  • IE 9+
  • FF 8+
  • Opera 12
  • Chrome 29+
  • Android 4.4+

The second <link> element’s media query allows the stylesheet to load only in:

  • Chrome 29+
  • Opera 16+
  • Safari 6.1+
  • iOS 7+
  • Android 4.4+

When combined, this technique will not load the stylesheet unless the browser is:

  • IE 9+
  • FF 8+
  • Opera 12, 16+
  • Chrome 29+
  • Safari 6.1+
  • iOS 7+
  • Android 4.4+

Note: the stylesheet is only loaded once no matter how many elements there are.

It’s possible to combine the media queries into one link element by separating the declarations with a comma, like so:

<link rel="stylesheet" href="css/your-stylesheet.css"
      media="only screen and (min-resolution: 0.1dpcm),
      only screen and (-webkit-min-device-pixel-ratio:0)
      and (min-color-index:0)">

However, I personally like to keep them separate as I find it easier to see what’s going on.

So if you structure your markup in a semantic and accessible way, older browsers should still be able to see your un-styled content in plain HTML.

This is of course very opinionated, but it’s my view that anyone using these browsers still deserves to be able to get to what they need. It’s quite likely that by giving these browsers CSS intended for newer browsers, some things will just break, and that could mean a totally unusable page. Using this method they at least get a clean slate. More importantly, you’ll never need to test in those browsers again. You’re done with them! At least, that’s the theory.

Of course, your support needs are likely to vary, but the great thing about this technique is that you can build on it. For example, if you need to add support for IE8, you can use a conditional comment to load the same stylesheet only for that browser:

Continue reading article on SitePoint …

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.