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

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

Adam Argyle

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

हालांकि, सिंटैक्स के लिए एक सख्त और संभावित तौर पर अनचाही शर्त थी. इस शर्त के बारे में नेस्ट किए गए अमान्य उदाहरणों के पहले लेख में बताया गया है. इस फ़ॉलो-अप लेख में, स्पेसिफ़िकेशन और 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) के बीच अंतर करने के लिए सिखाया जा सकता है, क्योंकि पार्सर के पास फ़िलहाल आगे की जानकारी देखने का कोई कॉन्सेप्ट नहीं है. यह समझने के लिए कि टोकन एक प्रॉपर्टी है, ब्राउज़र को आगे देखना होगा और यह देखना होगा कि अनजान टोकन के बाद : है या नहीं. इसलिए, मूल स्पेसिफ़िकेशन में, & सिंबल का इस्तेमाल ब्राउज़र को यह बताने के लिए किया गया था कि इसके बाद नेस्ट किया गया है, न कि सामान्य सीएसएस प्रॉपर्टी और वैल्यू.

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