What Exactly Does the 'Only' Keyword Do in CSS Media Queries

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

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>

What does the 'only screen' code mean in a css media query?

From https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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.

The screen keyword references that it's a computer, mobile phone or tablet etc. There are two other media types, print and speech, as well as the default all.

Simply: The only keyword is optional and used for backwards compatibility. The screen keyword will default to all.

Why are media types in media queries used?

This specification from W3C suggest that media queries could also be used for HTML, XHTML, XML. Perhaps, queries with speech media type were mainly used for importing text to speech software into varieties of document types.

This is the only source that I could find describing the speech media type But it does not really provide a great example of how it is used.

As for why the examples often used screen media type, simply because it is the most often used. Previous versions of media queries had many media types, but are now removed as they have few uses or serve the same purpose with the current media types.

In the future, they may alter their specification, removing those not very useful media types or adding more of it to suit future technologies.

Update: I found a GitHub thread discussing about speech media type. It basically says that speech is mainly for user agent that deals with speech. E.g. Siri or Alexa.

What does this line of CSS mean? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

It's called CSS3 Media Queries which is a technique to help your website adapt to various of screen dimensions or basically, it helps to deliver different styles to different devices.

Since you're new, let's break down your media query to two parts:

@media only screen

This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.

and (min-device-width: 320px) and (max-device-width: 480px)

This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.

CSS media queries: max-width OR max-height

Use a comma to specify two (or more) different rules:

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

Does the media query operator not actually work?

According to MDN

if you use the not or only operators, you must explicitly specify a media type.

This snippet adds screen to the media query in your question.

On a laptop without touch screen it appears to work, that is hovering over the div does change it to cyan. If you change the 'coarse' to 'fine' then the hover does not work because the laptop's mouse is considered a fine pointer.

div {
  width: 20vmin;
  height: 20vmin;
  background: pink;
}

@media not screen and (any-pointer: coarse) {
  div:hover {
    background: cyan;
  }
}

<div></div>

---

Related Topics