DEV Community

Cover image for How to Target Specific Browsers With CSS
Stephan Lamoureux
Stephan Lamoureux

Posted on • Updated on

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

Top comments (0)