Using lesscss and browser hacks for Firefox

I am converting a css file into less manually, and I'm trying to find a way to do browser specific css. I tried to escape it using the ~"" as mentioned on the site, but it doesn't seem to work for whole blocks of code.

For IE, these work:

padding: ~"5px\9"; /* IE8 and below */ 
*padding:4px;  /* IE7 and below */ 
_padding:2px;  /* IE6 */

And for Chrome, this works:

/* This will apply the styling only to Chrome and Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mySelector {
    color: red;
  }
}

However, what about Firefox? How do I escape something like:

/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: red;
  }
}

Answers


From the comments and availability of other hacks, I created a work-around.

It does compile using the WinLess.org compiler (http://winless.org/online-less-compiler) as mentioned.

It does not compile using DotLess, so I've just reversed the hack. Instead of:

#mySelector {
    color: red;
}
/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: green;
  }
}

I have instead done:

/* FF needs green*/
#mySelector {
   color: green;
    /*IEs need red*/
    color: ~"red\9";
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mySelector {
    /*Chrome needs red*/
       color: red;
    }
}

Need Your Help

Laravel 4 - Eloquent mass assignment creates empty records after update

php laravel laravel-4 mass-assignment eloquent

I've just updated L4 (both skeleton and packages) to the latest version.