How to Target Specific Browsers With CSS
Stephan Lamoureux
Posted on April 23, 2021
Web browsers are built with different rendering engines, and this causes small differences in the way your website appears between browsers. The sizing may be a little different, the colors aren't consistent, and many more things of that nature.
To counter this, we can use the following CSS to target and style specific browsers.
Chrome & Safari (Webkit)
@media screen and (-webkit-min-device-pixel-ratio:0) {
property: value;
}
Firefox
@-moz-document url-prefix() {
.class {
property: value;
}
}
Microsoft Edge
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
IE11 and up
_:-ms-fullscreen, :root .ie11up {
property: value;
}
💖 💪 🙅 🚩
Stephan Lamoureux
Posted on April 23, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.