CSS media queries: screen or only screen?

Question

css

I see in sass frameworks, media queries are written like this: media only screen... I always wrote just media screen... and everything seemed to be fine. Is there any difference in result between "screen" and "only screen"?

Answer 1

The only statement is used to hide styles from older browsers (supporting CSS2 media query syntax ).

@media only screen and (min-width: 401px) and (max-width: 600px) {

}

These browsers expect a comma-separated list of media types. And, according to the specification, they must truncate each value immediately before the first non-alphanumeric character that is not a hyphen. So the old browser should interpret the previous example as media="only" . Since the given media type does not exist, stylesheets will be ignored as well.