What is the difference between screen and only screen in media queries

Question

What is the difference between screen and only screen in media queries    lt link media  screen and  max-device-width  480px   rel  stylesheet  href  m css    gt   lt link media  only screen and  max-device-width  480px   rel  stylesheet  href  m css    gt    Why are we required to use only screen  Does screen not itself provide enough information to be rendered only for screen    I ve seen many responsive websites using any of these three different ways    media screen and  max-width 632px     media  max-width 632px     media only screen and  max-width 632px

User · Answer

To style for many smartphones with smaller screens, you could write:

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

To block older browsers from seeing an iPhone or Android phone style sheet, you could write:

@media only screen and (max-width: 480px;) { … }

Read this article for more http://webdesign.about.com/od/css3/a/css3-media-queries.htm

User · Answer

media screen and  max-width 480px               screen here is to set the screen size of the media query  E g the maximum width of the display area is 480px  So it is specifying the screen as opposed to the other available media types    media only screen and  max-width  480px                only screen  here is used to prevent older browsers that do not support media queries with media features from applying the specified styles

User · Answer

Let s break down your examples one by one    media  max-width 632px    This one is saying for a window with a max-width of 632px that you want to apply these styles  At that size you would be talking about anything smaller than a desktop screen in most cases     media screen and  max-width 632px    This one is saying for a device with a screen and a window with max-width of 632px apply the style  This is almost identical to the above except you are specifying screen as opposed to the other available media types  the most common other one being print    media only screen and  max-width 632px    Here is a quote straight from W3C to explain this one      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    As there is no such media type as  only   the style sheet should be ignored by older browsers   Here s the link to that quote that is shown in example 9 on that page   Hopefully this sheds some light on media queries   EDIT   Be sure to check out  hybrids excellent answer on how the only keyword is really handled

User · Answer

The answer by  hybrid is quite informative  except it doesn t explain the purpose as mentioned by  ashitaka   quot What if you use the Mobile First approach  So  we have the mobile CSS first and then use min-width to target larger sites  We shouldn t use the only keyword in that context  right   quot  Want to add in here that the purpose is simply to prevent non supporting browsers to use that Other device style as if it starts from  quot screen quot  without it will take it for a screen whereas if it starts from  quot only quot  style will be ignored  Answering to ashitaka consider this example  lt link rel  quot stylesheet quot  type  quot text css quot     href  quot android css quot  media  quot only screen and  max-width  480px  quot    gt   lt link rel  quot stylesheet quot  type  quot text css quot     href  quot desktop css quot  media  quot screen and  min-width  481px  quot    gt   If we don t use  quot only quot  it will still work as desktop-style will also be used striking android styles but with unnecessary overhead  In this case  IF a browser is non-supporting it will fallback to the second Style-sheet ignoring the first

User · Answer

The following is from Adobe docs     The media queries specification also provides the keyword only  which is intended to hide media queries from older browsers  Like not  the keyword must come at the beginning of the declaration  For example   media  only screen and  min-width  401px  and  max-width  600px     Browsers that don t recognize media queries expect a comma-separated list of media types  and the specification says they should truncate each value immediately before the first nonalphanumeric character that isn t a hyphen  So  an old browser should interpret the preceding example as this   media  only    Because there is no such media type as only  the stylesheet is ignored  Similarly  an old browser should interpret   media  screen and  min-width  401px  and  max-width  600px     as   media  screen    In other words  it should apply the style rules to all screen devices  even though it doesn t know what the media queries mean   Unfortunately  IE 6   8 failed to implement the specification correctly   Instead of applying the styles to all screen devices  it ignores the style sheet altogether   In spite of this behavior  it s still recommended to prefix media queries with only if you want to hide the styles from other  less common browsers     So  using   media  only screen and  min-width  401px     and  media  screen and  min-width  401px     will have the same effect in IE6-8  both will prevent those styles from being used  They will  however  still be downloaded   Also  in browsers that support CSS3 media queries  both versions will load the styles if the viewport width is larger than 401px and the media type is screen   I m not entirely sure which browsers that don t support CSS3 media queries would need the only version  media  only screen and  min-width  401px      as opposed to  media  screen and  min-width  401px     to make sure it is not interpreted as  media  screen    It would be a good test for someone with access to a device lab

[css] What is the difference between "screen" and "only screen" in media queries?

Examples related to css

Examples related to media-queries