Skip to main content

Targeting Firefox while using LESS.css

File under

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/

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <img> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <h1> <h2> <h3> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Adds typographic refinements.

More information about formatting options