Search code examples
cssmedia-queries

CSS3 Media Queries

What is the difference between these two instructions?

@media screen and (max-device-width: 480px) {}

and 

@media only screen and (max-device-width: 480px) {}
Solution

  • The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

    From http://www.w3.org/TR/css3-mediaqueries/

    In real use scenarios, the only screen query is used to target specific mobile browsers that support modern CSS.

    From http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

    Even more clearly

    Prefixing a media queries with the "only" keyword will cause non CSS3-compliant browsers to ignore the rule.

    From http://www.html5rocks.com/en/mobile/mobifying.html