CopyPastor

Detecting plagiarism made easy.

Score: 0.7567002773284912; Reported for: String similarity Open both answers

Possible Plagiarism

Plagiarized on 2017-09-10
by Bipon Biswas

Original Post

Original - Posted on 2011-12-21
by Matthew Green



            
Present in both answers; Present only in the new answer; Present only in the old answer;

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" 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.
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;) { … }
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][1] 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][2] 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][3] on how the `only` keyword is really handled.

[1]: http://www.w3.org/TR/CSS2/media.html [2]: http://www.w3.org/TR/css3-mediaqueries/#media0 [3]: https://stackoverflow.com/a/14168210/1078110

        
Present in both answers; Present only in the new answer; Present only in the old answer;