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

Let's break down your examples step by step.

css
@media (max-width:632px)

This targets styles for devices with a window width of 632px or less. Typically, this refers to devices smaller than desktop screens.

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

This specifies applying the styles to devices with the media type 'screen' and a window width of 632px or less. It is almost identical to the previous example, but explicitly defines the media type 'screen' instead of relying on the default. This is commonly used to exclude print media, as 'print' is the most common alternative media type to 'screen'. Link to W3C specification

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

Here, we directly quote a W3C statement to explain this:

The keyword 'only' can also be used to hide stylesheets from older user agents. User agents must process media queries starting with 'only' as if the keyword were not present.

Since there is no media type 'only', older browsers should ignore the stylesheet. This is illustrated in the referenced example from the W3C specification section 9.

I hope this provides some insight into media queries.

Editor's note:

Be sure to check @hybrids for an excellent answer on how the only keyword is truly handled. The following content is adapted from Adobe's documentation:

---

The media queries specification also provides the keyword only, intended to hide media queries from older browsers. Like not, the keyword must appear at the start of the declaration. For example:

css
media="only screen and (min-width: 401px) and (max-width: 600px)"

Browsers that cannot parse media queries need a comma-separated list of media types, and the specification states they should truncate each value before the first non-alphanumeric character that is not a hyphen. Thus, older browsers should interpret the previous example as:

css
media="only"

Since there is no media type 'only', the stylesheet will be ignored. Similarly, older browsers should interpret:

css
media="screen and (min-width: 401px) and (max-width: 600px)"

as:

css
media="screen"

In other words, it should apply the styles to all screen devices, even if it doesn't understand the media query.

Unfortunately, IE 6-8 failed to implement this specification correctly.

It does not apply styles to all screen devices but completely ignores the stylesheet.

Despite this behavior, it is still recommended to prefix media queries with only when you want to hide styles from browsers that don't support media queries.

---

Thus, using:

css
media="only screen and (min-width: 401px)"

and

css
media="screen and (min-width: 401px)"

in IE 6-8 will have the same effect: both prevent the styles from being applied. However, they will still be downloaded.

In browsers supporting CSS3 media queries, both versions will load the styles if the viewport width exceeds 401px and the media type is 'screen'.

I'm not entirely certain which browsers that don't support CSS3 media queries require the only version:

css
media="only screen and (min-width: 401px)"

versus

css
media="screen and (min-width: 401px)"

to ensure it isn't interpreted as:

css
media="screen"

For those who can access device labs, this would be a good test.

To design styles for many smartphones with smaller screens, you can write:

css
@media screen and (max-width:480px) { … }

To prevent older browsers from viewing iPhone or Android phone stylesheets, you can write:

css
@media only screen and (max-width: 480px;) { … }

Read this article for more information: http://webdesign.about.com/od/css3/a/css3-media-queries.htm

@hybrid's answer is comprehensive, though it doesn't address @ashitaka's point about 'mobile-first approaches': 'If using a mobile-first approach, we first use mobile CSS, then use min-width to target larger sites. Should we not use the only keyword in this case?'

The purpose of only is solely to prevent unsupported browsers from applying styles intended for other devices, as if it started with 'screen' rather than 'only'. If it starts with 'only', the stylesheet will be ignored.

Consider this example:

html
<link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />

Without 'only', it still works because the desktop stylesheet will override the Android styles, but it creates unnecessary overhead. In this case, if the browser doesn't support it, it will fall back to the second stylesheet, ignoring the first.

css
@media screen and (max-width:480px) { … }

Here, screen sets the media type for screen size. For example, it specifies the maximum width of the display area as 480px. Thus, it targets screens rather than other available media types.

css
@media only screen and (max-width: 480px;) { … }

Here, only screen prevents older browsers that don't support media queries from applying the specified styles.

CSS media queries are primarily used to apply different style rules based on media types and conditions. Among these selectors, screen and only screen are common usages with subtle functional differences.

screen

The media type screen targets styles for computer screens, tablets, smartphones, and other screen devices. When using the screen keyword in media queries, it means the included styles apply only to devices with the screen media type. For example:

css
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

In this example, the background color lightblue applies only when the device screen width is 600px or less.

only screen

The only screen keyword was added to prevent older browsers from misinterpreting media queries. The only keyword specifies that certain styles should only be applied by browsers that support media queries, not all devices. Adding only before screen ensures that browsers without CSS media query support do not apply the styles to all media types.

css
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

In this example, using only screen versus screen makes no difference for modern browsers—they both apply the background color to screens 600px or less. However, for older browsers that don't support CSS media queries, the styles are not applied.

In summary, the main difference between screen and only screen lies in backward compatibility handling. The only keyword ensures older browsers ignore styles intended for unsupported media types, while modern browsers can safely ignore only since they support media queries. With modern browsers widely adopted, this distinction is less critical, but it's still prudent to consider potential compatibility issues when coding.