scottjehl / Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
MIT License
11.33k stars 3.36k forks source link

Allow replacing stylesheet to preserve the cascade #345

Open henrahmagix opened 8 years ago

henrahmagix commented 8 years ago

Usually this library will append media queries in separate <style> elements. However, doing this changes the cascade such that a media rule will be used over a non-media rule. This is because the media rule is removed from its position and appended after everything else. It is a common case that a non-media rule will override a media rule, so this inversion of the cascade makes it very difficult to style for all browsers using this polyfill.

Turn on this option by setting window.RESPOND_REPLACE_STYLES = true before sourcing this script. It will remove every stylesheet it finds and move all CSS into the media="all" stylesheet that is appended, minus the inactive media query rules and those of other media types, like print. The other types are appended in the usual manner.

@scottjehl What do you think? I'm currently using it on a project and it ensures we can style for mobile first (min-width all the way) and not have to worry about IE8 looking like a really narrow mobile screen.

This fixes https://github.com/scottjehl/Respond/issues/325