सीएसएस के नए फ़ंक्शनल सूडो-क्लास सिलेक्टर :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(), सीएसएस में उपलब्ध होती हैं. इस पोस्ट में, आपको इन दो फ़ंक्शनल pseudo सिलेक्टर के सिंटैक्स और वैल्यू का पता चलेगा.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

: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 पर मार्कस विंकलर की फ़ोटो