How to Target Specific Browsers With CSS
Stephan Lamoureux

Stephan Lamoureux @stephanlamoureux

About: Developer | Writer | Dad | 2x Veteran

Location:
Providence, RI
Joined:
Jan 19, 2018

How to Target Specific Browsers With CSS

Publish Date: Apr 23 '21
9 0

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

Comments 0 total

    Add comment