Using media queries to hide CSS3 from older browsers

27 Aug 2012 By Articles 1 Comment
27
Aug

When working around bugs and different levels of support in various browsers, a common approach is using conditional comments to target certain versions of Internet Explorer.

Come to think of it, it’s pretty rare to need to fix something for an older version of any other browser. People who do not use Internet Explorer tend to upgrade quicker and CSS-related bugs in other browsers tend to be less severe than in Internet Explorer, especially compared to IE7 and older.

The approach to using media queries to hide advanced CSS

Anyway, while working on a lot of responsive layouts lately I’ve started using an approach that I’ve found reduces the risk of more advanced CSS, especially CSS3, tripping up older browsers. I simply wrap any CSS that I know won’t work at all or may only half-work in a very basic CSS3 media query, like this:

1
2
3
@media only screen {
    /* "Advanced" CSS2 and CSS3 goes here */
}
@media only screen {
    /* "Advanced" CSS2 and CSS3 goes here */
}

From the Media Queries specification:

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.

Since only browsers that understand media queries will apply the CSS inside that rule, you can use modern CSS without needing to worry as much about fallbacks or bugs. It’s like creating a safe bubble of excellent CSS support. You can use this @media rule before the @media rules that target various viewport widths, so thst you can use it as a starting point for making the layout responsive.

Browser usage numbers may differ, of course, but in practice this mostly means hiding CSS from IE8 and older. The market share of non-Media Query-supporting versions of other browsers tends to be negligible. Besides, they will still the same fully acceptable but non-responsive layout that old Internet Explorer gets.

Enjoy this article? If so, we would love to hear your thoughts in the comments below

 

Related Blog Posts

One Response to Using media queries to hide CSS3 from older browsers

  1. Wow Great…………..

    Reply

Leave a Reply