सीएसएस नेस्टिंग आसान सिंटैक्स अपडेट

Chrome 120 में लुकअहेड नेस्टिंग की सुविधा चालू की गई.

Adam Argyle

इस साल की शुरुआत में, Chrome ने 112 वर्शन में सीएसएस नेस्टिंग की शिपिंग की थी. अब यह सभी प्रमुख ब्राउज़र में उपलब्ध है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 120
• 120
• 117
• 17.2

सोर्स

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

नेस्ट किए गए एलिमेंट टैग के नाम

सीएसएस नेस्टिंग सिंटैक्स के पहले रिलीज़ में, एलिमेंट के टैग के नामों को नेस्ट नहीं किया जा सकता था. यह इसकी सबसे हैरान करने वाली सीमाओं में से एक थी. इस अक्षमता को हटा दिया गया है, जिससे नीचे दी गई सीएसएस नेस्टिंग मान्य हो गई है:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

ऑर्डर की गई, बिना क्रम वाली या डेफ़िनिशन वाली सूचियों को नेस्ट करने पर यह बहुत बढ़िया हो जाता है:

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

नेस्ट करने की अनुमति देने के लिए क्या बदलाव किया गया है?

इस सुविधा को उपलब्ध कराने के लिए, Chrome के इंजीनियरों ने बहुत मेहनत की है. साथ ही, कम्यूनिटी और सीएसएस वर्किंग ग्रुप की दिलचस्पी भी इसमें शामिल है.

इस बात पर काफ़ी संदेह था कि सीएसएस पार्सर को टैग के नाम (div) और प्रॉपर्टी के नाम (visibility) के बीच अंतर करने के लिए सिखाया जा सकता है, क्योंकि पार्सर के पास फ़िलहाल आगे की जानकारी देखने का कोई कॉन्सेप्ट नहीं है. टोकन एक प्रॉपर्टी है, यह समझने के लिए ब्राउज़र को आगे देखकर यह देखना होगा कि :, अज्ञात टोकन को फ़ॉलो करता है या नहीं. इसलिए, मूल जानकारी में & सिंबल का इस्तेमाल ब्राउज़र को यह बताने के लिए किया जाता था कि फ़ॉलो की गई क्वेरी को नेस्ट किया गया था, न कि सामान्य सीएसएस प्रॉपर्टी और वैल्यू.

अच्छी बात यह है कि एक इंजीनियर को पता चला कि जब पार्सर, सामान्य इस्तेमाल के पास के मुताबिक, नेस्ट किए गए सिलेक्टर को प्रॉपर्टी के तौर पर पार्स नहीं कर पाता है, तो इसे ऐसे मोड में फिर से शुरू किया जा सकता है जिसमें प्रॉपर्टी के बजाय, सिलेक्टर की गणना की गई हो. पार्स करना फिर से शुरू होता है, नेस्टिंग को सिलेक्टर नेस्टिंग के रूप में स्वीकार करता है. यह इतना तेज़ और भरोसेमंद है कि इसे सिंटैक्स रिलीज़ करने के लिए काफ़ी माना गया.