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