Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Final cascaded rule does not work, always override by last Media Query #325

Open
simongcc opened this issue Feb 10, 2015 · 3 comments · Fixed by incuna/Respond#1 · May be fixed by #345
Open

Final cascaded rule does not work, always override by last Media Query #325

simongcc opened this issue Feb 10, 2015 · 3 comments · Fixed by incuna/Respond#1 · May be fixed by #345

Comments

@simongcc
Copy link

I have the following styles:

@media (min-width: 768px) {
  .container {
    width: 750px;
    background: green;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
    background: blue;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
    background: orange;
  }
}

/* master override */
.container {
    width: 992px;
    background: red;
    margin: auto;
}

For some reasons, I have to override the container rule at the end while preserve the previous media query. In IE8, the final override does not work, it will be override by the last Media Query rules, ie, in the above example, it is 1170px. While in other browsers mentioned below, the final override work as expected, ie 992px.
Current work around is using keyword "!important".

Tested in IE8, latest Chrome / Firefox / Opera and Safari 5 in Windows 8.1
@henrahmagix
Copy link

I've noticed this too. The reason is because all the media queries are added after the stylesheet in which they were found. This changes the cascade, moving the media queries out of their current position to much later on.

I wonder if Respond could remove the stylesheet after parsing it and replace with it's custom <style>, which is constantly updated to include or exclude media query rules just like it currently does. Would that be too much work for IE, to reload the whole stylesheet every single time rather than just the media query rules?

@henrahmagix henrahmagix mentioned this issue Nov 27, 2015
Merged
@henrahmagix
Copy link

I have a fix in incuna#1. After internal review it will be pull-requested into this repo.

@henrahmagix henrahmagix linked a pull request Dec 1, 2015 that will close this issue
Open
@henrahmagix
Copy link

See #345 for a fix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@henrahmagix @simongcc