Question

I see some using “only screen” in the media queries, others using “all”, others using “screen and print”, others using “screen”(without the “only”), others don’t specify the media type.

I don’t intend to use specific CSS for printing or other medias. Should I use “only screen”. Should I not specify the media type?

What media type most people are using and why?

Answer 1

Basically:

• Either use media="screen" for applying your main stylesheet to all browsers, or just leave out the media attribute altogether if you don’t care about print

• Use media="print" for applying your print stylesheet if you do care about print

• If you’d like, include the only keyword only for media queries like screen and (max-width: 1000px) for your responsive styles (there isn’t any right, wrong or standard to follow here)

The only keyword was introduced mainly to stop older browsers from applying stylesheets intended for other devices, like modern browsers on smartphones and tablet computers. See the Media Queries spec.

Do not use media="only screen" for your main stylesheet. If you do, IE8 and older will completely ignore your main stylesheet, and your site will appear unstyled in those versions.

---

For some background: the HTML 4 spec asks that media “types” (or media descriptors) like this:

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="resp.css">

Should be parsed with the and ... part ignored, so it would be equivalent to this:

<link rel="stylesheet" media="screen" href="resp.css">

Meaning it would apply in older browsers that don’t support CSS3 media queries, but do fully support CSS2 media types. This may cause unwanted side effects, e.g. a mobile stylesheet being applied in older desktop browsers.

In my experience, however, this has never happened; as far as I’m aware, IE7 and IE8 simply treat screen and (max-width: 1000px) as an invalid media descriptor and ignore that stylesheet altogether.

But I like to be on the safe side, and put the only keyword in media queries intended specifically for use by modern browsers.

Of course, this rule has been changed in HTML5 in order to be compatible with media queries in CSS3. It just won’t apply to older browsers that were released before work on HTML5 began.