CSSNestedDeclarations के साथ बेहतर हुआ CSS Nesting

 (web.dev)
5 पॉइंट द्वारा GN⁺ 2024-10-11 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • CSS Nesting स्पेसिफिकेशन में CSSNestedDeclarations इंटरफ़ेस जोड़ा गया है, जिससे nesting से जुड़ी समस्याएँ हल हो गई हैं
  • इसके अलावा, style rule के बाद आने वाले declarations अब ऊपर नहीं खिसकते जैसे सुधार भी शामिल हैं
  • यह Chrome 130, Firefox Nightly 132, और Safari Technology Preview 204 से लागू है

CSSNestedDeclarations के आने से पहले CSS Nesting की समस्याएँ

  • nested declarations के उम्मीद के मुताबिक काम न करने की समस्या थी
.foo {  
  width: fit-content;  
  @media screen {  
    background-color: red;  
  }  
  background-color: green;  
}
  • Chrome 130 से पहले के versions में background-color green की बजाय red लागू होता था
  • parsing के बाद वास्तव में लागू होने वाला rule नीचे की तरह बदल जाता था
.foo {  
  width: fit-content;  
  background-color: green;  
  @media screen {  
    & {  
      background-color: red;  
    }  
  }  
}
  • background-color: green; दूसरे declarations के साथ ऊपर खिसक जाता था, और nested CSSMediaRule को & selector इस्तेमाल करने वाले अतिरिक्त CSSStyleRule में wrap किया जाता था
  • ऐसा इसलिए था क्योंकि CSS engine style rule की शुरुआत में आने वाली properties और दूसरे rules के बीच आने वाली properties में फर्क नहीं कर पाता था

समाधान - CSSNestedDeclarations इंटरफ़ेस की शुरुआत

  • इसे हल करने के लिए CSS working group ने nested declarations rule पेश किया
  • Chrome 130 से लगातार आने वाले nested declarations को अपने आप CSSNestedDeclarations instance में wrap किया जाता है
  • इससे background-color: green declaration की position को background-color: red declaration के बाद बनाए रखा जा सकता है
  • CSSNestedDeclarations parent style rule के समान elements और pseudo-elements से match करता है, और specificity का व्यवहार भी वही रहता है

डेवलपर्स पर असर

  • Chrome 130 से CSS Nesting में बड़ा सुधार हुआ है
  • लेकिन declaration और nested rule को मिलाकर इस्तेमाल करने वाले मामलों में code बदलना पड़ सकता है
/* Chrome 130 में काम नहीं करता */  
#mypopover:popover-open {  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;   
  }  
  opacity: 1;  
  scale: 1;  
}
  • ऊपर के code में @starting-style declaration को CSSNestedDeclarations में शामिल declarations override कर देते हैं, जिससे entry animation हट जाती है
  • इसे नीचे की तरह बदलना चाहिए
/* Chrome 130 में काम करता है */  
#mypopover:popover-open {  
  opacity: 1;  
  scale: 1;  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;  
  }  
}
  • CSS Nesting का इस्तेमाल करते समय nested declarations को nested rules के ऊपर रखना ज़्यादातर browser versions में सही काम करता है

CSSNestedDeclarations feature detection

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // CSSNestedDeclarations को support नहीं करता  
}

GN⁺ की राय

  • CSS Nesting code की readability और maintainability बढ़ाने वाला उपयोगी feature है। लेकिन nested rules और declarations को मिलाने से जुड़ी समस्याएँ थीं, जिन्हें CSSNestedDeclarations के आने से हल कर लिया गया है।
  • CSSNestedDeclarations आने से पहले nested declarations की position बदल जाने या अनचाहे override होने की समस्या थी। यह डेवलपर्स के लिए भ्रम पैदा कर सकता था।
  • @nest rule का इस्तेमाल करना या nested declarations को CSSStyleRule में wrap करना जैसे दूसरे समाधान भी सोचे गए थे, लेकिन developer experience खराब होने जैसी वजहों से उन्हें नहीं अपनाया गया। nested declarations rule की शुरुआत सबसे उपयुक्त समाधान लगती है।
  • हालांकि CSSNestedDeclarations अभी केवल कुछ browsers में ही supported है, इसलिए cross browsing के लिए nested declarations को हमेशा nested rules से ऊपर रखना सुरक्षित रहेगा।
  • PostCSS, Sass जैसे CSS preprocessors भी CSSNestedDeclarations जैसी सुविधा देते हैं। अगर आप preprocessor इस्तेमाल कर रहे हैं, तो इस feature का उपयोग कर सकते हैं।

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.