Conditional CSS for Firefox/Gecko browsers

Last year I posted how to add conditional comments for webkit-based browsers. This time I found a really cool hack on how to do the very same thing for Firefox/Gecko-based browsers (from Chris Coyier). The solution is again very simple and it’s based on a media query that only Firefox/Gecko-based browsers will parse.

See the Pen Conditional CSS for Firefox/Gecko browsers by John Tsevdos (@tsevdos) on CodePen

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 😉