फ़ायरफ़ॉक्स

Question

के लिए कमcss और ब्राउज़र हैक्स का उपयोग करके मैं एक सीएसएस फ़ाइल को मैन्युअल रूप से परिवर्तित कर रहा हूं, और मैं ब्राउज़र विशिष्ट सीएसएस करने का एक तरीका ढूंढने की कोशिश कर रहा हूं। मैंने साइट पर उल्लिखित ~ "" का उपयोग करके इसे बचने की कोशिश की, लेकिन यह कोड के पूरे ब्लॉक के लिए काम नहीं कर रहा है।

IE के लिए, ये काम:

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

और क्रोम के लिए, यह काम करता है:

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

हालांकि, Firefox के बारे में क्या? मैं कुछ कैसे बच सकता हूं:

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

Answer 1

अन्य हैक्स की टिप्पणियों और उपलब्धता से, मैंने एक कार्य-आसपास बनाया।

यह बताए गए WinLess.org कंपाइलर (http://winless.org/online-less-compiler) का उपयोग करके संकलित करता है।

यह डॉटलेस का उपयोग करके संकलित नहीं करता है, इसलिए मैंने हैक को उलट दिया है। बजाय:

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

मैं बजाय किया है:

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