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

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

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