Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What exactly does the 'only' keyword do in CSS media queries?

On Mozilla's page about media queries, it says:

The only keyword hides style sheets from older browsers that don't support media queries:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

However, further down the page it also says,

Media queries involving unknown media types are always false.

So how can a browser not supporting media queries show the stylesheet when it's set to screen and (color)? It wouldn't understand and color so shouldn't show it? And if Mozilla is referring to browsers with literally zero support for the media attribute, why would adding only stop them from showing the stylesheet?

Can anyone explain the process by which older browsers parse (or don't) the media attribute?

like image 571
DisgruntledGoat Avatar asked Feb 15 '12 00:02

DisgruntledGoat


People also ask

What does only do in media query?

only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers. and: The and keyword combines a media feature with a media type or other media features. They are all optional.

What does the CSS media query function do?

CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles or run other code based on those things.

What is the use of media only screen in CSS?

Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. Media queries are used for the following: To conditionally apply styles with the CSS @media and @import at-rules.

What does a media query basically consist of?

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ' width ', ' height ', and ' color '.


1 Answers

If unknown media queries are always false, why does screen and (color) show the stylesheet but only screen and (color) not?

Previously the media attribute was used for media types, rather than media queries. The spec has since extended the use of this attribute to also support media queries.

An older browser would expect to see a media type (e.g. screen, print, etc.), and wouldn't support a media query (e.g. screen and (color) and (min-device-width: 800px)).

Without the "only", an older browser is allowed to interpret screen and (color) as being the screen media type. Prefixing it with only prevents this from happening.

Can anyone explain the process by which older browsers parse (or don't) the media attribute?

The browser knows whether it supports a particular doctype or not, which is part of the HTML document you send. If the doctype is one that permits media queries, then a conforming browser will either handle it (because it conforms) or ignore it (because it doesn't know how to handle that doctype, and makes a best-case effort).

As you suspected, implementations that don't understand it typically don't parse it. Browsers are expected to follow the robustness principle:

Be liberal in what you accept, and conservative in what you send.

Rather than erroring out or doing something obtrusive or unusual, the default is to pretend that the unknown element doesn't exist at all.

Similarly, you probaly wouldn't experience any ill effects if you write a link that has a strange attribute, like:

<a href="http://google.com" unknown-attribute="foobar">Google</a>
like image 115
John Feminella Avatar answered Oct 24 '22 20:10

John Feminella