Table of Contents
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
|
1 |
* html .ie6 { property: value; } |
|
1 |
.ie6 { _property: value; } |
IE 7
|
1 |
*+html .ie7 { property: value; } |
|
1 |
*:first-child+html .ie7 { property: value; } |
IE 6 and 7
|
1 2 3 4 5 |
@media screen\9 { .ie67 { property: value; } } |
|
1 |
.ie67 { *property: value; } |
|
1 |
.ie67 { #property: value; } |
IE 6, 7 and 8
|
1 2 3 4 5 |
@media \0screen\,screen\9 { .ie678 { property: value; } } |
IE 8
|
1 |
html>/**/body .ie8 { property: value; } |
|
1 2 3 4 5 |
@media \0screen { .ie8 { property: value; } } |
IE 8 Standards Mode Only
|
1 |
.ie8 { property /*\**/: value\9 } |
IE 8,9 and 10
|
1 2 3 4 5 |
@media screen\0 { .ie8910 { property: value; } } |
IE 9 only
|
1 2 3 4 5 6 |
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { // IE9 CSS .ie9{ property: value; } } |
IE 9 and above
|
1 2 3 4 5 6 |
@media screen and (min-width:0\0) and (min-resolution: +72dpi) { // IE9+ CSS .ie9up { property: value; } } |
IE 9 and 10
|
1 2 3 4 5 |
@media screen and (min-width:0\0) { .ie910 { property: value\9; } /* backslash-9 removes ie11+ & old Safari 4 */ } |
IE 10 only
|
1 |
_:-ms-lang(x), .ie10 { property: value\9; } |
IE 10 and above
|
1 |
_:-ms-lang(x), .ie10up { property: value; } |
|
1 2 3 4 5 |
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up { property:value; } } |
IE 11 (and above..)
|
1 |
_:-ms-fullscreen, :root .ie11up { property: value; } |
Microsoft Edge
|
1 2 3 4 5 |
@supports (-ms-ime-align:auto) { .selector { property: value; } } |
Firefox
Any version (Gecko)
|
1 2 3 4 5 |
@-moz-document url-prefix() { .ff { color: red; } } |
Quantum Only (Stylo)
|
1 2 3 4 5 6 7 8 |
@-moz-document url-prefix() { @supports (animation: calc(0s)) { /* Stylo */ .ffStylo { property: value; } } } |
Legacy (pre-Stylo)
|
1 2 3 4 5 6 7 8 |
@-moz-document url-prefix() { @supports not (animation: calc(0s)) { /* Gecko */ .ffGecko { property: value; } } } |
Webkit
Chrome & Safari (any version)
|
1 2 3 |
@media screen and (-webkit-min-device-pixel-ratio:0) { property: value; } |
Chrome 29+
|
1 2 3 4 5 |
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .chrome { property: value; } } |
Safari (7.1+)
|
1 2 3 |
_::-webkit-full-page-media, _:future, :root .safari_only { property: value; } |
Safari (from 6.1 to 10.0)
|
1 2 3 4 5 6 7 8 |
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { .safari6 { color:#0000FF; background-color:#CCCCCC; } } } |
Safari (10.1+)
|
1 2 3 4 5 6 7 8 |
@media not all and (min-resolution:.001dpcm) { @media { .safari10 { color:#0000FF; background-color:#CCCCCC; } } } |
For further info or additional media queries, visit the awesome browserhacks.com website!
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!
Try one of these:
.selector:not(*:root) {} @supports (-webkit-appearance:none) {} .selector { (;property: value;); } .selector { [;property: value;]; }The css for ‘Safari (from 6.1 to 10.0)’ affects ALL browsers on iPad: Chrome, Safari, Opera.
Not only Safari.
_: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
@pitrell..
sadly that edge things no longer works.. kind of tough to find an edge only query..
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