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!

RELATED POSTS

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