CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge

CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge

If you're a HTML developer you most likely know that there are times when you need to selectively apply some styles to a specific browser, or to a specific version/build of a browser. When such scenarios occur, there are a number of CSS and/or JS based techniques to achieve that result.

Here's a collection of media queries that will allow you to do that in pure CSS3 code, without a single line of JavaScript code: most of them come from the browserhacks.com web site, which is an excellent resource of browser-specific CSS and JavaScript hacks for these kind of tasks.

Internet Explorer

IE 6

or

IE 7

or

IE 6 and 7

or
or

IE 6, 7 and 8

IE 8

or

IE 8 Standards Mode Only

IE 8,9 and 10

IE 9 only

IE 9 and above

IE 9 and 10

IE 10 only

IE 10 and above

or

IE 11 (and above..)

Microsoft Edge

Firefox

Any version (Gecko)

Quantum Only (Stylo)

Legacy (pre-Stylo)

Webkit

Chrome & Safari (any version)

Chrome 29+

 Safari (7.1+)

Safari (from 6.1 to 10.0)

Safari (10.1+)

That's it for now: if you have other useful CSS3 media queries that you think should be added to this list, feel free to give your suggestion by writing a comment.

For further info or additional media queries, visit the awesome browserhacks.com website!

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

6 Comments on “CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge

  1. Using a media query like this,
    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {, to only target Chrome previously worked but now Firefox is picking up those styles in that media query. Any ideas for another workaround for just Chrome? Thanks!

    1. Try one of these:

      
      .selector:not(*:root) {}
      
      @supports (-webkit-appearance:none) {}
      
      .selector { (;property: value;); }
      
      .selector { [;property: value;]; }
      
      
  2. The css for ‘Safari (from 6.1 to 10.0)’ affects ALL browsers on iPad: Chrome, Safari, Opera.
    Not only Safari.

  3. _:lang(x)::-ms-backdrop, .selector { color: blue; } /* IE11 */
    _:-ms-lang(x)::backdrop, .selector { color: blue; } /* Edge */
    _:lang(x)::-internal-media-controls-overlay-cast-button, .selector { color: blue; } /* Chrome */
    _:lang(x)::x-, .selector { color: blue; } /* Safari */
    _:-moz-any(x), .selector { color: blue; } /* Firefox */

    not from me

  4. How to add a media query for a specific browser with specific width?
    for e.g. Safari browser version 10 and above with width: 1440px

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.