How to Target Specific Browsers With CSS

Stephan Lamoureux - Apr 23 '21 - - Dev Community

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
. . . . . . . . .