Difference Between "Screen" and "Only Screen" in Media Queries

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.

HTML5 & CSS @media only screen and

You might not be seeing the changes due to the specificity of the rules.

That is, the way you have it written:

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

body {
    background-color: yellow;
}

Both of these have the same specificity, meaning the last rule is what gets shown.

So, even if you are at a screen-size under 600px, the background-color: yellow will be displayed.

Instead, you should define the non-media query rule first, followed by the media query rule second.

Try this:

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

What is the difference between media print and media screen

It might sound daft or too obvious but:

Screen = For Screens Print = For Print

Media screen will basically style screens and media print will effectively work for printable pages.

(ref.1)

(ref.2)

'@media only ' and '@media all' difference

Here you have an explanation about all the media types

http://www.w3.org/TR/CSS2/media.html

Hope this helps

---

Related Topics