What media type should I use in Responsive Web Design?
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?
media="screen"for applying your main stylesheet to all browsers, or just leave out the
mediaattribute altogether if you don't care about print
media="print"for applying your print stylesheet if you do care about print
If you'd like, include the
onlykeyword 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)
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:
Should be parsed with the
and ... part ignored, so it would be equivalent to this:
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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here