What is the difference between “screen” and “only screen” in media queries?

by

What is the difference between screen and only screen in media queries?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="https://stackoverflow.com/questions/8549529/m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="https://stackoverflow.com/questions/8549529/m.css" />

Why are we required to use only screen? Does screen not itself provide enough information to be rendered only for screen?

I’ve seen many responsive websites using any of these three different ways:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

5 s
5

Let’s break down your examples one by one.

@media (max-width:632px)

This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. 

@media screen and (max-width:632px)

This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.

@media only screen and (max-width:632px)

Here is a quote straight from W3C to explain this one.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

As there is no such media type as “only”, the style sheet should be ignored by older browsers.

Here’s the link to that quote that is shown in example 9 on that page.

Hopefully this sheds some light on media queries.

EDIT:

Be sure to check out @hybrids excellent answer on how the only keyword is really handled.

Leave a Comment