Can Someone Please Explain CSS Media Queries

Can someone please explain CSS media queries?

The rule applied to the screen size means that, citing W3C spec "is usable on screen and handheld devices if the width of the viewport is" in the specified constraints.

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

If you want to adjust the style when the viewport is less than 1024px you can use this rule:

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

anyway this rule applies only to the viewport actual size. If you resize the viewport without reloading the page the styles won't be applied.

Media Queries, which one is the better way and why?

Clearly one would prefer to group the media query versions of the CSS rules together with the non-media query versions, so they can be managed together. For example, if I write separate CSS for each component, I would usually want both media query versions and non-media query versions of the rules for that component to be in the file for that component. When I add and modify rules, I would prefer to do that in one place, rather than two or more.

If it bothers you that you have to write the media query again and again, which is a valid concern from the standpoint of maintaining your code when changing breakpoints, consider using a preprocessor such as postCSS which allows you to define aliases for media queries. For instance, this plugin would allow you to write

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

Difference Between HTML LINK Media and CSS Media Queries

Regarding the stylesheet download, here is what the current spec draft says:

User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.

This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.

For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting @media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.

Why does the order of media queries matter in CSS?

That's by design of CSS — Cascading Style Sheet.

It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).

So, given this CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

if the browser window is 350 pixels wide, the background will be blue, while with this CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.

Finally, with

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

or

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

the background will be blue (with a 350 pixels wide window).

Why do I have to put media queries at the bottom of the stylesheet?

Because css is read from top to bottom. The rule that is set last, is the one that will be executed.

Translating, it is like this:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}

When you add !important is like saying:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}

How Should CSS3 Media Queries be Managed?

Well, I certainly can't claim to be an authority on the matter (I'm still learning about coding conventions myself), but I actually lean towards option #1 - a single stylesheet. I'm thinking of a specific implementation of it, though. Instead of having a single break point for each case of screen size you need new styles for, I'd suggest multiple break points - one for the CSS styles of each module where multiple screen sizes need to be addressed.

Ah...that might have been a slightly confusing statement. An example is in order...

Rather than something like:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

I'd suggest option #1, just implemented as so:

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

(All the classes are placeholders. I'm not very creative...)

Though this means you'll be doing the same media query declaration multiple times (leading to a bit more code), it's a lot more handy for testing out single modules, which will overall help the maintainability of your site as it gets bigger. Try adding multiple real styles, more tags/classes/id's to the example I gave, and maybe add a bit more whitespace to them, and you'll see soon see how much quicker it is to narrow down and change/append styles (across all screen sizes) in the implementation shown by the second part of the example.

And I credit this answer quite completely to information from Scalable and Modular Architecture for CSS, by Jonathan Snook. (After all, there's no way a beginner like me would be able to figure out and reason an answer like that all by myself!) As quoted from one of the many relevant parts of that book,

"...instead of having a single break point, either in a main CSS file or in a seperate media query style sheet, place media queries around the module states."

Though, if by personal preference or other you'd rather not use this approach, then you're free to go with any of the other options you proposed - after all, Snook himself says that his book "is more style guide than rigid framework", so don't feel like this is a coding standard. (Though I feel it should be. XD)

Is it best to group similar media queries at the end of the CSS or to just keep them separated within the CSS?

Media queries were introduced in CSS3 are used for responsive CSS over different media types. Since usually the CSS code itself is applied for describing the presentation of the document or page, responsiveness is a separate feature altogether, so usually they are kept separate at the end of the CSS formatting codes. However, let me answer this question by stating the usage of both of the formats mentioned in the question.

At the end of code

Most templates of CSS available online usually keep their media queries at the bottom of the entire code making it easier to access and work with the responsiveness feature. Whenever the focus is more on "chasing device-widths" then this type of coding practice helps.

As observed, this allows to group together many basic CSS attributes that are applied over many elements.

Also, considering the cascading nature of CSS, the styling below usually (not always, refer this to know more) overwrites the styling present above. With @media queries present at the bottom of the stylesheet, it allows easy overwriting of relevant styles present above.

Finally ,as mentioned by @rguttersohn, media queries along with @keyframes are kept at the end with @keyframes usually above @media. This makes coding cleaner and easier to comprehend by others as well.

Below relevant styling counterparts

If styling is more layout-centric, it's highly useful to place @media queries next to their styling counterparts. This allows ease in editing the style and its corresponding @media query both in a single go.

This does mean that there is slightly more code, but these too can be cut down by grouping at breakpoints and section ends.

This type of styling is rarely seen in templates available online, however it's an ongoing trend.

To Summarize: I personally am of the opinion to keep all of the @media queries together at the bottom, but if I had to divide the labor of styling, I would opt for keeping the styles and @media queries together.

Also, given the broad and opinionated scope of this question, I think no answer can determined as right or wrong. I hope this answer brings enough light and information to the question.

---

Related Topics