How to Target Specific Browsers With CSS

stephanlamoureux

Stephan Lamoureux

Posted on April 23, 2021

How to Target Specific Browsers With CSS

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;
}
Enter fullscreen mode Exit fullscreen mode

Firefox

@-moz-document url-prefix() {
    .class {
        property: value;
    }
}
Enter fullscreen mode Exit fullscreen mode

Microsoft Edge

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}
Enter fullscreen mode Exit fullscreen mode

IE11 and up

_:-ms-fullscreen, :root .ie11up { 
property: value; 
}
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
stephanlamoureux
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.

Related