सीएसएस के नए फ़ंक्शनल सूडो-क्लास सिलेक्टर :is() और :where()

सीएसएस सिलेक्टर सिंटैक्स में किए गए ये छोटे-मोटे बदलाव काफ़ी असरदार साबित होंगे.

Adam Argyle

सीएसएस लिखते समय, एक ही स्टाइल नियमों के साथ कई एलिमेंट को टारगेट करने के लिए, कभी-कभी आपको लंबी सिलेक्टर सूचियां मिल सकती हैं. उदाहरण के लिए, अगर आपको हेडिंग एलिमेंट में मिले किसी भी <b> टैग का रंग बदलना है, तो यह लिखें:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

इसके बजाय, :is() का इस्तेमाल करें और लंबे सिलेक्टर से बचते हुए, टेक्स्ट को आसानी से पढ़ने लायक बनाएं:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

आसानी से पढ़े जा सकने और छोटे सिलेक्टर की सुविधाएं, :is() और :where() की वैल्यू का सिर्फ़ एक हिस्सा हैं. इस पोस्ट में, आपको इन दो फ़ंक्शनल स्यूडो सिलेक्टर के सिंटैक्स और वैल्यू के बारे में पता चलेगा.

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

:is()

:where()

:is() और :where() से मिलना

ये फ़ंक्शनल स्यूडो-क्लास सिलेक्टर हैं. इनमें आखिर में () और : से शुरू होने का तरीका देखें. इन्हें रनटाइम डाइनैमिक फ़ंक्शन कॉल के तौर पर देखें, जो एलिमेंट से मैच करते हैं. सीएसएस लिखते समय, आपको किसी सिलेक्टर के बीच, शुरुआत या आखिर में एलिमेंट को एक साथ ग्रुप करने का विकल्प मिलता है. वे ज़्यादा सटीक जानकारी भी दे सकते हैं. साथ ही, आपके पास ज़्यादा सटीक जानकारी देने या उसे हटाने का विकल्प भी होता है.

सिलेक्टर ग्रुपिंग

ग्रुप बनाने के लिए :is() जो भी कर सकता है, :where() भी वही कर सकता है. इनका इस्तेमाल, सिलेक्टर में कहीं भी किया जा सकता है. साथ ही, इन्हें नेस्ट किया जा सकता है और स्टैक किया जा सकता है. सीएसएस की पूरी सुविधाएं, जो आपको पहले से ही पता हैं और पसंद हैं. यहां कुछ उदाहरण दिए गए हैं:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

ऊपर दिए गए सिलेक्टर के हर उदाहरण में, इन दो फ़ंक्शनल स्यूडो-क्लास की सुविधाओं के बारे में बताया गया है. अपने कोड के उन हिस्सों को ढूंढने के लिए जिनमें :is() या :where() का इस्तेमाल फ़ायदेमंद हो सकता है, ऐसे सिलेक्टर ढूंढें जिनमें कई कॉमा और सिलेक्टर दोहराए गए हों.

:is() के साथ आसान और जटिल सिलेक्टर का इस्तेमाल करना

सिलेक्टर के बारे में ज़्यादा जानने के लिए, सीएसएस सीखें पर मौजूद सिलेक्टर मॉड्यूल देखें. यहां आसान और जटिल सिलेक्टर के कुछ उदाहरण दिए गए हैं, ताकि आपको इस सुविधा के बारे में जानकारी मिल सके:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

अब तक, :is() और :where() को सिंटैक्स के हिसाब से एक-दूसरे की जगह इस्तेमाल किया जा सकता है. अब यह जानने का समय आ गया है कि ये दोनों कैसे अलग हैं.

:is() और :where() के बीच का अंतर

खास जानकारी के मामले में, :is() और :where() में काफ़ी अंतर है. स्पेसिफ़िकिटी के बारे में ज़्यादा जानने के लिए, सीएसएस सीखें पर स्पेसिफ़िकिटी मॉड्यूल देखें.

कम शब्दों में जानकारी

• :where() में कोई खास जानकारी नहीं होती.
  :where(), फ़ंक्शन पैरामीटर के तौर पर पास की गई चुनिंदा सूची में मौजूद सभी खास जानकारी को मिटा देता है. यह अपनी तरह की पहली सिलेक्टर सुविधा है.
• :is(), सबसे सटीक सिलेक्टर की सटीक जानकारी लेता है.
  :is(a,div,#id) के पास आईडी का सटीक स्कोर 100 पॉइंट है.

सूची में से सबसे सटीक सिलेक्टर चुनने पर, मुझे सिर्फ़ तब परेशानी हुई, जब मैं ग्रुप बनाने को लेकर बहुत उत्साहित था. मैं हमेशा, ज़्यादा सटीक सिलेक्टर को अपने सिलेक्टर पर ले जाकर, टेक्स्ट को आसानी से पढ़ने लायक बना पाता था. ऐसा इसलिए, क्योंकि इस पर ज़्यादा असर नहीं पड़ता था. इसका उदाहरण यहां दिया गया है:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

:where() के साथ, मुझे लाइब्रेरी के ऐसे वर्शन देखने को मिलने का इंतज़ार है जिनमें कोई खास जानकारी न हो. लेखक की स्टाइल और लाइब्रेरी स्टाइल के बीच की खास प्रतिस्पर्धा खत्म हो सकती है. सीएसएस लिखते समय, किसी खास चीज़ से मुकाबला नहीं करना पड़ता. सीएसएस, ग्रुप बनाने की इस सुविधा पर काफ़ी समय से काम कर रही है. यह सुविधा अब उपलब्ध है, लेकिन अब भी इस पर बहुत काम किया जाना बाकी है. छोटी स्टाइलशीट बनाने और कॉमा हटाने का आनंद लें.

Unsplash पर मार्कस विंकलर की ओर से अपलोड की गई फ़ोटो