CSS विशेषता चयनकर्ता में "i" का क्या अर्थ है?

Question

मुझे Google Chrome उपयोगकर्ता एजेंट स्टाइलशीट में निम्नलिखित CSS चयनकर्ता मिले हैं:

[type="checkbox" i]

क्या iमतलब है?

Comments

@Alexander O'Mara: चयनकर्ता स्तर 4 CSS3 का हिस्सा है - यह एक मॉड्यूल का अगला स्तर है जो 3 स्तर पर शुरू हुआ था। "CSS4" एक मिथ्या नाम है।

— BoltClock

@Alexander O'Mara: मैं इसे मेटा पर लाया देखना पसंद करूंगा। विशेष रूप से मैं जानना चाहता हूं कि हम [css4] टैग के उपयोग को कैसे संभाल सकते हैं - सबसे कठोर उपाय जो मैं कर सकता था, वह इसे [css3] का पर्याय बना सकता है, और यह वास्तव में सही काम होगा।

— BoltClock

@BoltClock मेटा सवाल उठ रहा है! BTW, जब आप इस प्रश्न के साथ अपने उत्तर को मर्ज करने के बारे में पूछते हैं, तो क्या आपका मतलब यह है कि जानकारी जोड़ने के लिए प्रश्न / उत्तर को यहाँ संपादित करें, या आप एक जादू-चाल-एक-से-एक-दूसरे-प्रश्न बटन का उल्लेख कर रहे थे?

— अलेक्जेंडर ओ'मैरा

@ अलेक्जेंडर ओ'मैरा: व्यक्तिगत उत्तरों को स्थानांतरित नहीं करना, बल्कि दो संपूर्ण प्रश्नों का संयोजन। यह केवल एक मोड है।

— BoltClock

@TylerH इस विषय पर मेटा पर हमारी चर्चा है । वहाँ चर्चा में जोड़ने के लिए स्वतंत्र महसूस करें।

— अलेक्जेंडर ओ'मैरा

Answer 1

जैसा कि टिप्पणियों में उल्लेख किया गया है, यह केस-असंवेदनशील विशेषता मिलान के लिए है। यह CSS Selectors Level 4 में एक नई सुविधा है।

वर्तमान में यह क्रोम 49+, फ़ायरफ़ॉक्स 47+, सफारी 9+ और ओपेरा 37 + * में उपलब्ध है। इससे पहले यह क्रोम 39 के आसपास शुरू होने वाले क्रोम उपयोगकर्ता-एजेंट शैलियों में ही उपलब्ध था, लेकिन प्रयोगात्मक सुविधाओं के झंडे को सेट करके वेब सामग्री के लिए सक्षम किया जा सकता था।

* ओपेरा के पुराने संस्करण भी इसका समर्थन कर सकते हैं।

कार्य उदाहरण / ब्राउज़र टेस्ट:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

उपरोक्त वर्ग हरा होगा यदि ब्राउज़र इस सुविधा का समर्थन करता है, तो लाल अगर यह नहीं करता है।

Comments

पढ़ाने के लिए धन्यवाद! अपनी नई टोपी का आनंद लें। क्या चयनकर्ता पुस्तकालयों में इस तरह की चीज काम करती है? किस प्रकार के ब्राउज़र का समर्थन है?

— बेंजामिन ग्रुएनबाम

@BenjaminGruenbaum ऐसा लगता है कि यह केवल क्रोम उपयोगकर्ता-एजेंट शैलियों में उपलब्ध है (वेबसाइट का सीएसएस नहीं, कम से कम अभी तक नहीं)। मुझे कोई आधिकारिक संगतता दस्तावेज़ नहीं मिला।

— अलेक्जेंडर ओ'मैरा

(अब मेरे पहले की टिप्पणी को दोहराते हुए कि प्रश्न विलीन हो गए हैं।) यह पूरी तरह से आश्चर्यजनक नहीं है कि एकदम नए, प्रायोगिक मानकों जैसे कि यह खराब दस्तावेज हैं। उस ने कहा, मेरे जवाब में इस पर कुछ और जानकारी है, अर्थात् यह कैसे काम करता है, इसका उपयोग क्यों किया जाता है, और इसे क्रोम में कैसे लागू किया जाता है (जैसा कि प्रश्न द्वारा दिया गया है)।

— BoltClock

क्रोम इसके लिए संस्करण 49.0 (वर्तमान में बीटा में), संस्करण 47.0 में फ़ायरफ़ॉक्स (जून 2016 में रिलीज़ होने वाला शेड्यूल) में समर्थन जोड़ देगा। स्रोत: developer.mozilla.org/en-US/docs/Web/CSS/…

— Miscreant

@LWCris: मुझे यकीन नहीं है कि कोई भी ब्राउज़र वास्तव में मौजूद है। IE6 विशेषता चयनकर्ताओं को बिल्कुल नहीं समझता है, और IE7 कस्टम डेटा विशेषताओं के साथ भी उनका समर्थन करता है।

— BoltClock

Answer 2

यह चयनकर्ताओं 4 में पेश किए गए विशेषता चयनकर्ताओं के लिए केस-असंवेदनशील ध्वज है । जाहिरा तौर पर उन्होंने अगस्त 2014 की शुरुआत में क्रोम में इस सुविधा के कार्यान्वयन को छीन लिया।

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

यहाँ प्रासंगिक हैं:

• 179370 - कार्यान्वयन
• 179401 - यूए स्टाइलशीट में परिवर्तन जैसा कि प्रश्न में स्क्रीनशॉट में दिखाया गया है

ध्यान दें कि यह वर्तमान में "प्रयोगात्मक वेब प्लेटफ़ॉर्म सक्षम करें" ध्वज के भीतर छिपा है, जिसे आप क्रोम: // फ़्लैग / # सक्षम-प्रायोगिक-वेब-प्लेटफ़ॉर्म-सुविधाओं पर एक्सेस कर सकते हैं। यह समझा सकता है कि यह सुविधा काफी हद तक अनजान क्यों हो गई - उस झंडे के पीछे छिपी सुविधाओं को केवल आंतरिक रूप से उपयोग किया जा सकता है और सार्वजनिक-सामना करने वाले कोड (जैसे कि लेखक स्टाइलशीट) में जब तक इसे सक्षम नहीं किया जाता है, क्योंकि वे प्रयोगात्मक हैं और इसलिए उत्पादन उपयोग के लिए तैयार नहीं हैं।

यहां एक परीक्षण मामला है जिसे आप उपयोग कर सकते हैं - ध्वज सक्षम और अक्षम होने पर परिणामों की तुलना करें:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

ध्यान दें कि मैं typeदिखाने के बजाय एक कस्टम डेटा विशेषता का उपयोग करता हूं कि इसका उपयोग किसी भी विशेषता के साथ किया जा सकता है।

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

Comments

मुझे "उस दोपहर" थकान हो रही है ... डब्ल्यू 3 कल्पना इम पढ़ने के बाद भी पूरी तरह से समझ में नहीं आ रहा है, इसके लिए सीएसएस में व्यावहारिक वास्तविक जीवन उपयोग क्या होगा?

— मैट

@Matt: HTML5 में बताए अनुसार चयनकर्ता मिलान के मामले में संवेदनशील है , जो कई मामलों में अवांछनीय है क्योंकि HTML5 कुछ विशेषताओं के लिए केस-असंवेदनशील मानों की अनुमति देता है। आप इस ध्वज का उपयोग यह सुनिश्चित करने के लिए कर सकते हैं कि आप मामले की परवाह किए बिना सही तत्वों को उठा सकें। उदाहरण के लिए स्क्रीनशॉट में आप देख सकते हैं कि यह दिखता है input[type="search" i], जो तत्वों की तरह मेल खाएगा <input type="SEARCH">।

— BoltClock

मैं इसे क्रोमियम संस्करण 43.0.2357.130 के साथ काम करने और "प्रयोगात्मक वेब प्लेटफ़ॉर्म सक्षम करें" सक्षम करने की पुष्टि कर सकता हूं।

— रॉबर्ट सिएमर