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;
}

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; 
}