Using ‘only’ in media query declarations

Media queries can be defined through @media inside your CSS or media=”” through the link tag. To ensure html4 browsers didn’t download unwanted styles the ‘only’ hack was developed to allow older browsers to ignore these new rules. Lets take a look at how that affects us today…

I’m going back to re-read some of the books we feature on the site and I came across something that got me wondering. In this weeks links Stephanie Rieger’s presentation looks questionably at some of the Media Query Level 4 changes and while I was a little more optimistic when reviewing the new features I did notice something that I wasn’t previously aware.

If you use the term ‘only’ as part of your media query then any browser that doesn’t support them will begin to read that element and immediately skip the rest of the instruction.

This caused me a little of confusion around where it needed to be used to I readed out to Stephen Hay (it was his book I was re-reading). Both himself and Tab Atkins provided the similar answer:

So if you had <link media="only screen and (min-width:600px)" href="medium.css"> then a browser that doesn’t support media queries would read ‘only’ and skip the rest of the instruction, meaning that you wouldn’t penalise older browsers by making them download CSS they couldn’t use.

Tab was clear to point out that this was only when using media=”rules go here” and that it had no bearing on using @media within a stylesheet.

Just when I thought that was all Scott Jehl pointed out that

I decided to do a very rudimentary test on code pen and these were the results through browser stack.

With that being the case I’m not sure if there is a suitable use case for including ‘only’ in front of all media queries.  Am I missing a use case here?

See the Pen @media only declaration by Justin Avery (@justincavery) on CodePen.

Examples & Usecases

To get a really good understanding of how something affects you it’s best to just dive into examples and real use cases. Below we will take a look at each of the different appraoches you might take when adding a media query, and if you see something that is missing from the list update the comments below and I’ll add it in

Using the <link> tag

We all have to use the <link> tag at some point to add our CSS to the site, and to begin with we could target particular media types to serve our CSS. These media types included

• All
• Screen
• Print
• Projector
• more

Here are some examples:

<link href="css/styles.css" type="text/css" media="all" / >
<!-- Use these styles on ALL media -->

<link href="css/print.css" type="text/css" media="print" / >
<!-- Use these styles on PRINT media -->

<link href="css/styles.css" type="text/css" media="screen" / >
<!-- Use these styles on only SCREEN media -->

<link href="css/mobile.css" type="text/css" media="screen and (max-width:480px )" / >
<!-- Use these styles on only SCREEN media -->

As Responsive Design was gaining traction in the industry there were arguments around serving too much CSS in one file when certain viewports only used a limited amount of it.

We could get around this and only serve the right styles to the right media by introducing media queries in the link tag itself

<link href="css/styles.css" type="text/css" media="screen" / >
<!-- Use these styles on ALL media -->

<link href="css/mobile.css" type="text/css" media="screen and (max-width:480px)" / >
<!-- Use these styles on mobile devices -->

<link href="css/tablet.css" type="text/css" media="screen and (max-width:1024px)"  / >
<!-- Use these styles on only for tablet device -->

<link href="css/desktop.css" type="text/css" media="screen and (min-width:1025px)" / >
<!-- Use these styles on only desktop devices -->

Using @ media inside stylesheets

This article is still a work in progress, please check back for more