CSS Academy · पाठ

CSS लेआउट API और स्कोप

CSS लेआउट API से कस्टम लेआउट एल्गोरिदम बनाएँ और Houdini के दायरे तथा सीमाओं को समझें।

पाठ 4, कुल 4 में से13 चरण

CSS लेआउट API और स्कोप, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

CSS Houdini का अवलोकन

CSS Houdini निम्न-स्तरीय एपीआई का एक संग्रह है, जो CSS रेंडरिंग इंजन के कुछ हिस्सों को JavaScript के लिए उपलब्ध कराता है। इसमें शामिल हैं: टाइप्ड OM, प्रॉपर्टीज़ और वैल्यूज़ एपीआई, पेंट एपीआई, लेआउट एपीआई और एनीमेशन वर्कलेट। ये सभी मिलकर कस्टम CSS एक्सटेंशन सक्षम बनाते हैं।

CSS लेआउट एपीआई क्या है

CSS लेआउट एपीआई डेवलपर को JavaScript में कस्टम लेआउट एल्गोरिदम परिभाषित करने देता है, जिनका उपयोग CSS display प्रॉपर्टी के मानों के रूप में किया जा सकता है। आप ग्रिड या फ्लेक्सबॉक्स जितने शक्तिशाली लेआउट बना सकते हैं।

लेआउट वर्कलेट की संरचना

लेआउट वर्कलेट intrinsicSizes() और layout() विधियाँ लागू करता है और registerLayout() से पंजीकृत होता है:

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

कस्टम लेआउट का उपयोग

CSS में पंजीकृत लेआउट का संदर्भ दें:

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

लेआउट एपीआई की स्थिति

CSS लेआउट एपीआई को ब्राउज़रों में सीमित समर्थन प्राप्त है और यह अभी मुख्यतः प्रयोगात्मक है (Chrome में फ़्लैग के पीछे)। आज यह उत्पादन उपकरण की तुलना में शोध और भविष्य के एपीआई के अधिक निकट है। मेसनरी लेआउट को विशेष रूप से ब्राउज़रों में मूल रूप से लागू किया जा सकता है।

@scope एट-रूल

@scope एक नया CSS फ़ीचर है (CSS स्कोपिंग विनिर्देश का हिस्सा), जो हर जगह क्लास जोड़ने की आवश्यकता के बिना CSS नियमों के प्रभाव को किसी विशिष्ट DOM उपवृक्ष तक सीमित करता है।

@scope का सिंटैक्स

स्कोप रूट और वैकल्पिक रूप से स्कोप सीमा परिभाषित करें:

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Body text inside the card.</p>
</div>

सीमा के साथ @scope

स्कोप सीमा नियमों को नेस्ट किए गए घटकों के अंदर मिलान करने से रोकती है:

<div class="article">
  <p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
  <div class="advertisement">
    <p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
  </div>
</div>

:scope छद्म-क्लास

@scope के भीतर :scope स्कोप रूट एलिमेंट को संदर्भित करता है:

<div class="card is-hovered">
  <p>Hover state applied statically for preview</p>
</div>

@scope का ब्राउज़र समर्थन

@scope Chrome 118+ और Safari 17.4+ में समर्थित है। Firefox का समर्थन आने वाला है। सुरक्षित परिनियोजन के लिए इसे @supports के साथ उपयोग करें।

Houdini की व्यापक परिकल्पना

CSS Houdini का लक्ष्य वेब प्लेटफ़ॉर्म को विस्तार योग्य बनाना है — ताकि डेवलपर ब्राउज़र विक्रेताओं द्वारा उन्हें लागू किए जाने की प्रतीक्षा करने के बजाय स्वयं CSS में फ़ीचर जोड़ सकें। आज उपलब्ध एपीआई (टाइप्ड OM, @property और पेंट) इस परिकल्पना के उत्पादन के लिए सबसे अधिक तैयार हिस्से हैं।

त्वरित जाँच

@scope (.card) CSS में क्या प्रभाव उत्पन्न करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

CSS Houdini रेंडरिंग इंजन को उपलब्ध कराने वाले एपीआई का एक समूह है। लेआउट एपीआई कस्टम डिस्प्ले एल्गोरिदम सक्षम करता है, लेकिन यह अभी अधिकतर प्रयोगात्मक है। @scope CSS नियमों के प्रभाव को विशिष्ट DOM उपवृक्षों तक सीमित करता है — कठोर BEM नामकरण के बिना स्टाइल के रिसाव को रोकता है। Houdini की सबसे अधिक उत्पादन-तैयार सुविधाएँ टाइप्ड OM, @property और पेंट एपीआई हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “CSS लेआउट API और स्कोप” पाठ निःशुल्क है?

हाँ—“CSS लेआउट API और स्कोप” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“CSS लेआउट API और स्कोप” में मैं क्या सीखूँगा?

CSS लेआउट API से कस्टम लेआउट एल्गोरिदम बनाएँ और Houdini के दायरे तथा सीमाओं को समझें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“CSS लेआउट API और स्कोप” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

CSS टाइप्ड ऑब्जेक्ट मॉडल (OM)
CSS प्रॉपर्टीज़ और वैल्यूज़ API (@property)
CSS पेंट API: वर्कलेट
CSS लेआउट API और स्कोप

← CSS Academy पर वापस जाएँ