: है () - सीएसएस-ट्रिक्स

:is() CSS4 के काम के मसौदे में "माचिस-एनी" छद्म वर्ग का वर्तमान नाम है।

मूल रूप से, इस छद्म वर्ग का नाम दिया गया था :any()और इसे सीमित विक्रेता-विशिष्ट समर्थन के साथ लागू किया गया था:

/* Never actually worked */ :any(div, p) > em ( /*… */ )

"माचिस-एनी" छद्म श्रेणी का नाम तब :matches()CSS4 के काम के मसौदे के शुरुआती संस्करणों में बदल दिया गया था , कुछ ब्राउज़रों को अतिरिक्त (अपूर्ण) समर्थन दिया गया था।

/* Sort of works */ :matches(div, p) > em ( /*… */ )

अंत में, वर्तमान कार्य मसौदे ने इस छद्म वर्ग का नाम बदल दिया है :is(), जो वर्तमान में ब्राउज़रों में असमर्थित है।

/* Will work in the future? */ :is(div, p) > em ( /*… */ )

"माचिस एनीज़" चयनकर्ता (सभी के नाम के साथ) का लक्ष्य चयनकर्ताओं के जटिल समूहों को लिखना आसान बनाना है।

वाक्य - विन्यास

/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )

अरे, सीएसएस प्रीप्रोसेसिंग की तरह नहीं है?

चयनकर्ताओं के साथ सरलीकरण करना :is()वास्तव में सीएसएस पूर्वप्रक्रमकों के समान है कि वे कैसे नेस्टेड नियमों को संभालते हैं:

/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */

लेकिन खबरदार! प्रीप्रोसेसर, जैसे सैस, आपके नेस्टेड नियमों को आसानी से समझे गए चयनकर्ताओं की सूची में "अनियंत्रित" कर देते हैं। :is()विशिष्टता के नियमों को थोड़ा अलग तरीके से संभालेंगे:

विशिष्टता दिलचस्प है

CSS4 वर्किंग ड्राफ्ट के अनुसार:

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

इसका मतलब है कि :is()प्रदान की गई दलीलों की सूची में सबसे विशिष्ट वस्तु के लिए ऑटो-अपग्रेड की विशिष्टता:

/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */

ब्राउज़र का समर्थन

हमने पहले इस पर विचार किया, लेकिन :is()फिलहाल इसका कोई ब्राउज़र समर्थन नहीं है। यह सीएसएस चयनकर्ताओं के स्तर 4 विनिर्देश के संपादक के ड्राफ्ट 1 में पेश किया गया था। इसका मतलब है कि चीजें अभी भी आकार ले रही हैं जिससे ब्राउज़र के लिए इस तरह की अवधारणा के आसपास रैली करना थोड़ा जल्दी हो जाता है।

उस ने कहा, हमारे पास सामान्य कार्यक्षमता के लिए (कुछ अंतराल में :matchesवेंडर-प्रीफ़िक्सड :anyभरने के साथ) के रूप में महान ब्राउज़र समर्थन है । और, ज़ाहिर है, :notएक और छद्म वर्ग है जो मिलान के साथ सहायता कर सकता है।

यह ध्यान रखना दिलचस्प है कि :is()इसके बाद :matchesजो पेश किया गया था :any। यह उस तरह से :anyबदल रहा है :matchesजिसके द्वारा प्रतिस्थापित किया जा रहा है :is(), जिस तरह से विवरण बदल रहा है। हमेशा साफ-सुथरा कि ये चीजें कैसे विकसित होती हैं।

"माचिस-कोई" के लिए अधिकतम समर्थन प्राप्त करने के लिए ऐतिहासिक नामों के मिश्रण का उपयोग करने की आवश्यकता होती है, क्योंकि ब्राउज़र हैंडलिंग वर्तमान में इस बिंदु पर विक्रेता-उपसर्गों और प्रयोगात्मक सेटिंग्स का एक शौक है।

/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )

पेन के उदाहरण देखें: CodePen पर CSS-Tricks (@ css-tricks) द्वारा कोई भी छद्म वर्ग।

सम्बंधित

• :matches()
• :not()
• :any-link()

साधन

• डेविड बैरन के ब्लॉग पोस्ट में बताया गया है कि उन्होंने :-moz-anyगेको का समर्थन क्यों जोड़ा
• MDN प्रलेखन
• CSS चयनकर्ता स्तर 4 विशिष्टता (संपादक का प्रारूप 1): वह विनिर्देश जो :is()छद्म वर्ग का परिचय देता है ।
• छद्म वर्ग चयनकर्ताओं से मिलें: CSS-Tricks यह रेखांकित करते हैं कि छद्म वर्ग कैसे काम करते हैं।