2012-07-17 4 views
5

Ich konvertiere eine CSS-Datei in weniger manuell, und ich versuche, eine Möglichkeit zu finden, browserspezifische CSS zu tun. Ich habe versucht, es mit dem ~ "" zu umgehen, wie auf der Website erwähnt, aber es scheint nicht für ganze Blöcke von Code zu funktionieren.Verwendung von lesscss und Browser-Hacks für Firefox

Für IE, diese Arbeit:

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

Und für Chrome, das funktioniert:

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

Doch was Firefox? Wie entkommen ich so etwas wie:

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

Letzteres funktioniert gut ohne Fehler (getestet lessc v1.3.0 verwendet wird). –

+0

Ich bin in Visual Studio mit der Erweiterung dotLess VS, die möglicherweise eine andere Version hat. Ich kann das überprüfen. – pinnermck

+0

Dies scheint wie erwartet zu funktionieren, wenn ich mich jemals über die Ausgabe eines Plugins wundere, tendiere ich dazu, weniger Code in http://winless.org/online-less-compiler – JohnC

Antwort

-1

Aus den Kommentaren und Verfügbarkeit anderer Hacks, habe ich ein Work-around.

Es kompiliert mit dem WinLess.org Compiler (http://winless.org/online-less-compiler) wie erwähnt.

Es kompiliert nicht mit DotLess, also habe ich gerade den Hack umgekehrt. Statt:

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

habe ich stattdessen getan:

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