Firefox

Question

için Lesscss ve tarayıcı kesicileri kullanma Ben bir css dosyasını daha az el ile dönüştürüyorum ve tarayıcıya özel css yapmak için bir yol bulmaya çalışıyorum. Sitede belirtildiği gibi ~ "" kullanarak kaçmayı denedim, ancak tüm kod blokları için çalışmıyor gibi görünüyor.

IE için

, bu iş:

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

Ve Chrome için

, bu çalışır: Ancak

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

, ne Firefox hakkında? Nasıl bir şeyden kaçışım gibi:

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

Answer 1

Diğer hacklerin yorumları ve kullanılabilirliğinden, bir çalışma hazırladım.

Belirtildiği gibi WinLess.org derleyicisini (http://winless.org/online-less-compiler) kullanarak derler.

DotLess kullanarak derleme yapmıyor, bu yüzden hack'i tersine çevirdim. Onun yerine:

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

yerine yapmış: hatasız ince

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