फ़ायरफ़ॉक्स में वेबकिट-विशिष्ट सीएसएस चयनकर्ता को अनदेखा करना

Question

मैं एक jQuery विषय पर काम कर रहा हूं जिसमें जितना संभव हो उतने फॉर्म तत्वों के लिए स्टाइल शामिल है। प्रारंभ में यह वेबकिट (क्रोम) के लिए विकसित किया गया था। अब मैं इसे फ़ायरफ़ॉक्स के साथ भी काम करना चाहता हूं।

समस्या है; फ़ायरफ़ॉक्स में कुछ वेबकिट-विशिष्ट वाक्यविन्यास के साथ समस्याएं हैं।

उदाहरण के लिए:

input[type="range"]::-webkit-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
    background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x; 
} 

समस्या input[type="range"]::-webkit-slider-thumb, बिट है। इसे हटाएं और फ़ायरफ़ॉक्स ठीक काम करता है। यह अन्य वाक्यविन्यास जैसे ::-webkit-file-upload-button, ::selection और ::-webkit-... लेबल का उपयोग करके अन्य सभी चीजों के लिए भी करता है। यह अपने ::-moz-... लेबलों को पहचानता है, जैसे ::-moz-selection हालांकि ठीक है।

वेबकिट ::-moz- लेबलों को अनदेखा करता है।

फ़ायरफ़ॉक्स को ::-webkit-... लेबलों को अनदेखा करने का कोई सुविधाजनक तरीका है या अन्यथा प्रत्येक सीएसएस ब्लॉक की कई प्रतियों को बनाए रखने के बिना इस समस्या से निपटने का कोई सुविधाजनक तरीका है?

क्रोम और फ़ायरफ़ॉक्स के ताज़ा अपडेट किए गए संस्करणों का उपयोग करना।

Answer 1

दुर्भाग्य से, यह संभव नहीं घोषणा ब्लॉक डुप्लिकेट करने के बिना, है CSS spec stipulates जब सीएसएस नियमों में गैर मान्यता प्राप्त चयनकर्ताओं का सामना कि ब्राउज़रों इस तरह से व्यवहार करना चाहिए के रूप में:

चयनकर्ता अप करने के लिए सब कुछ के होते हैं (लेकिन सहित नहीं) पहला बायां घुंघराले ब्रेस ({)। एक चयनकर्ता हमेशा {} -block के साथ एक साथ चला जाता है। जब कोई उपयोगकर्ता एजेंट चयनकर्ता को पार्स नहीं कर सकता (यानी, यह वैध CSS3 नहीं है), तो यह ignore {} -block भी होना चाहिए।

इस मामले में, यह एक विक्रेता का ब्राउज़र दूसरे विक्रेता के उपसर्गों को पहचानने में असमर्थ है, इसलिए इसे नियम को अनदेखा करना है।

Answer 2

मैं इस सवाल का जवाब देने के लिए, यहाँ कुछ अच्छे संसाधन, Gecko Style EngineFurther Reading on the Engine Implementation कर रहे हैं, फिर भी मैं क्यों यह इसे छोड़ के रूप में किसी भी संकेत दिए गए नहीं देखा एक छोटा सा पढ़ने के लिए किया था, लेकिन मैं तुम्हें मेरे सबसे अच्छे अनुमान दे सकते हैं, मैं लगता है कि इंजन पूरे चयनकर्ता को छोड़ रहा है, मान लीजिए कि मोज़िला उपकरण -मोज़-स्लाइडर-अंगूठे छद्म चयनकर्ता और इसे -webkit के साथ उपयोग करने का प्रयास करें- और इसे भी गिरा दिया जाएगा।

मैंने इस व्यवहार को सभी ब्राउज़रों में पहले देखा है, और मुझे लगता है कि कभी-कभी कुछ ब्राउज़रों को लक्षित करने के लिए इसे एक हैक के रूप में उपयोग किया जा रहा है।

यह काम करेंगे

input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
} 

यह अभ्यस्त

input[type="range"]::-webkit-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
} 

या इस

input[type="range"]::-moz-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
} 

मुझे लगता है कि आप पर गुण-मूल्यों के पुनर्लेखन के लिए होगा दो या अधिक विभिन्न चयनकर्ता, यह केवल शैलियों के आकार को प्रभावित करेगा हीट के रूप में इंजन उन चयनकर्ताओं को छोड़ते रहेंगे जो उनके पास नहीं हैं।

मुझे उम्मीद है कि इससे कम से कम थोड़ा सा मदद मिलेगी।

संपादित करें:

टिप्पणियां मेरा अनुमान सही था यहाँ में उपयोगकर्ता @BoltClock द्वारा बताया गया है कल्पना w3.org/TR/css3-syntax/#rule-sets

Answer 3

FYI करें, मैं एक अलग समाधान के लिए जा रहा समाप्त हो गया करने के लिए एक कड़ी है।

चूंकि मेरा अंतिम उत्पाद स्टाइलशीट है, इसलिए मैंने एक स्रोत फ़ाइल के आधार पर .CSS फ़ाइल उत्पन्न करने के लिए एक सीएसएस कंपाइलर का उपयोग करने का निर्णय लिया। अभी तक यह ठीक काम कर रहा है।

मैंने LessPHP का उपयोग किया है क्योंकि .लेस प्रारूप उचित रूप से लोकप्रिय है और मैं PHP से परिचित हूं, लेकिन अन्य कोई भी करेगा।

ध्यान दें कि मैं केवल स्थिर सीएसएस फ़ाइल को संकलित करने के लिए LessPHP का उपयोग कर रहा हूं, इसलिए इस परियोजना के अंतिम उपयोगकर्ताओं के लिए यह आवश्यकता नहीं होगी जब तक कि वे .less स्रोत फ़ाइलों को स्वयं नहीं बदलना चाहते हैं।