Geek asks and answers

Using lesscss and browsers for Firefox

I am converting a css file to less manually and I am trying to find a way to make a css browser. I tried to escape from it using ~ "", as mentioned on the site, but does not seem to work for entire 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 avoid something like:

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

From the comments and the availability of other hacks, I created a workaround.

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

It does not compile using DotLess, so I just canceled the hack. Instead:

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

Instead, I did:

/* 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;
    }
}
-1
source

More articles:


All Articles