Targeting Firefox while using LESS.css

The most common CSS hack to target Firefox is to put something like this in your stylesheet:

@-moz-document url-prefix() { h1 { color: red; } }

But if you’re using LESS.css, this is a problem, because LESS uses the ‘at’ symbol (@) for variables. When LESS parses the above declaration, since @-moz-document isn’t a variable, you get an error.

Thankfully there are other easy ways to target Firefox in CSS that allow us to continue using LESS. For instance:

body:not(:-moz-handler-blocked) #your-target-element { 
  color: red;
}

Great list of hacks here: http://paulirish.com/2009/browser-specific-css-hacks/