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

Nice ‘n easy 😉