Conditional CSS for Webkit-based browsers

Edit: Please keep in mind that the below code works also on MS Edge. You can re-write MS Edge specific CSS using @supports (-ms-accelerator:true) {} (read more on the comment section).

On a recent project I had to find a way to apply CSS only on webkit-based browsers. We are all, more or less, very familiar with IE’s conditional comments, but what about other browsers? For webkit-based browsers, the solution is fairly simple. We only need to add our CSS statements into a “special” media query, that only webkit-based browsers will parse :

@media screen and (-webkit-min-device-pixel-ratio:0) {  
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */  
  body { background:#ccc; }  
}Check out this Pen!

Nice ‘n easy 😉

23 thoughts on “Conditional CSS for Webkit-based browsers”

  1. I used this code for specific code for MS Edge:

    @supports (-ms-accelerator:true) {
    your styles for MS Edge
    }

Leave a Reply