सीएसएस `@` नियम

Articles

सीएसएस `@` नियम

यह लेख CSS @ नियमों को समझाता है।

आप @import और @media जैसे @ नियमों के उपयोग और इन्हें लिखने के तरीके के बारे में जान सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-at-rule.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

सीएसएस `@` नियम

CSS @ नियम (एट-रूल्स) विशेष निर्देश होते हैं जो स्टाइलशीट्स के व्यवहार और अनुप्रयोग स्थितियों को नियंत्रित करने के लिए उपयोग किए जाते हैं। सामान्य CSS प्रॉपर्टी के विपरीत, @ नियम शर्तों के अनुसार शैलियों को लागू करते हैं या बाहरी संसाधनों को आयात करते हैं। प्रतिनिधित्व करने वाले @ नियमों में @media, @import, और @keyframes जैसे अन्य नियम शामिल हैं।

उदाहरणात्मक `@` नियमों के प्रकार

`@import`

1@import url('styles.css');

@import का उपयोग अन्य CSS फ़ाइलों को वर्तमान स्टाइलशीट में आयात करने के लिए किया जाता है। यह बाहरी CSS फ़ाइलों को आसानी से पुन: उपयोग करने की अनुमति देता है।

बिन्दु:

@import को स्टाइलशीट की शुरुआत में लिखा जाना चाहिए।
प्रदर्शन पर इसके प्रभाव के कारण इसे बड़े प्रोजेक्ट्स में टालना चाहिए।

`@media`

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

@media का उपयोग मीडिया क्वेरी के माध्यम से विशिष्ट परिस्थितियों (जैसे स्क्रीन चौड़ाई, रिज़ॉल्यूशन, आदि) के आधार पर शैलियों को लागू करने के लिए किया जाता है। इसे उत्तरदायी डिज़ाइन (रेस्पॉन्सिव डिज़ाइन) को लागू करने में अक्सर उपयोग किया जाता है।

आम तौर पर उपयोग की जाने वाली शर्तें

निम्नलिखित शर्तें मीडिया क्वेरी में अक्सर उपयोग की जाती हैं।

चौड़ाई के आधार पर शर्तें

 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}

न्यूनतम चौड़ाई (min-width) शैली लागू करती है जब चौड़ाई निर्दिष्ट मान के बराबर या उससे अधिक होती है।
अधिकतम चौड़ाई (max-width) शैली लागू करती है जब चौड़ाई निर्दिष्ट मान के बराबर या उससे कम होती है।

उपकरण का उन्मुखीकरण (`orientation`)

 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}

उपकरण का उन्मुखीकरण (orientation) को पोर्ट्रेट या लैंडस्केप पर सेट किया जा सकता है।

संकल्प (`resolution`)

1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}

संकल्प (resolution) के आधार पर शैली लागू की जा सकती है।
इस उदाहरण में, उच्च-संकल्प प्रदर्शन के लिए एक उच्च-संकल्प पृष्ठभूमि छवि निर्दिष्ट की गई है।

शर्तों का संयोजन

मीडिया क्वेरी में कई शर्तों को भी संयोजित किया जा सकता है।

और शर्त (`and`)

1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}

और शर्त तब शैली लागू करती है जब सभी शर्तें पूरी हों।
इस उदाहरण में, जब स्क्रीन की चौड़ाई 600px या अधिक हो और पोर्ट्रेट उन्मुखीकरण में हो, तो body की पृष्ठभूमि का रंग हल्का हरा सेट किया जाता है।

या शर्त (`,`)

1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}

या शर्त तब शैली लागू करती है जब कोई भी शर्त पूरी हो।
इस उदाहरण में, जब स्क्रीन की चौड़ाई 400px या कम हो, या लैंडस्केप उन्मुखीकरण में हो, तो body के टेक्स्ट का रंग ग्रे सेट किया जाता है।

नहीं शर्त (`not`)

1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}

नहीं शर्त तब शैली लागू करती है जब शर्त पूरी न हो।
इस उदाहरण में, सभी उपकरणों के लिए, जब स्क्रीन की चौड़ाई 600px या अधिक न हो, तो body के फ़ॉन्ट का आकार 14px सेट किया जाता है।

`@font-face`

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

@font-face का उपयोग वेब फ़ॉन्ट्स को परिभाषित करने के लिए किया जाता है। इस नियम के साथ, बाहरी फ़ॉन्ट्स को डाउनलोड और वेबपृष्ठ पर लागू किया जा सकता है।

मानक फ़ॉन्ट्स पर निर्भर होने के बजाय कस्टम फ़ॉन्ट्स का उपयोग किया जा सकता है।
फ़ॉन्ट फ़ाइल के आकार पर ध्यान देना आवश्यक है।

`@keyframes`

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

@keyframes का उपयोग CSS एनीमेशन बनाने के लिए किया जाता है। एनीमेशन के प्रत्येक चरण में शैलियों को निर्दिष्ट किया जा सकता है।

यह एनीमेशन के विस्तृत नियंत्रण की अनुमति देता है।
इसे animation प्रॉपर्टी के साथ संयोजन में उपयोग किया जाता है।

`@supports`

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

@supports यह जांचता है कि क्या ब्राउज़र द्वारा कुछ CSS सुविधाओं को समर्थन किया जाता है और परिणाम के आधार पर शैलियाँ लागू करता है।

यह पुराने और नए ब्राउज़रों के बीच संगतता बनाए रखने में मदद करता है।
फीचर डिटेक्शन के माध्यम से फॉलबैक लागू किए जा सकते हैं।

`@page`

1@page {
2  size: A4;
3  margin: 2cm;
4}

@page का उपयोग प्रिंटिंग के लिए शैलियों को नियंत्रित करने के लिए किया जाता है। यह पृष्ठ के आकार और मार्जिन सेट करने के लिए उपयोगी है।

बिन्दु:

इसे प्रिंट मीडिया के लिए शैलियों को सेट करने के लिए उपयोग किया जाता है।
आप हेडर और फुटर जैसे विशिष्ट पृष्ठ तत्वों की शैलियों को भी अनुकूलित कर सकते हैं।

`@charset`

1@charset "UTF-8";

@charset CSS फ़ाइल की कैरेक्टर एन्कोडिंग निर्दिष्ट करता है। मुख्य रूप से UTF-8 निर्दिष्ट किया जाता है।

इसे शैली पत्र (स्टाइल शीट) की शुरुआत में निर्दिष्ट करना चाहिए।
यह विशेष रूप से बहुभाषी वेबसाइटों के लिए उपयोग किया जाता है।

`@layer`

@layer एक नया @ नियम है, जिसका उपयोग CSS में स्टाइलशीट्स की प्राथमिकता व्यवस्थित करने के लिए किया जाता है, जिससे एकाधिक CSS नियमों को लेयर द्वारा समूहीकृत और प्रबंधित किया जा सकता है। यह नियम बड़े स्टाइलशीट्स या ऐसे प्रोजेक्ट्स में विशेष रूप से उपयोगी है जिनमें कई बाहरी स्टाइलशीट्स शामिल होती हैं, जिससे CSS संघर्षों से बचना आसान हो जाता है।

CSS स्टाइलशीट्स में, प्राथमिकता आमतौर पर 'कैस्केड' द्वारा निर्धारित की जाती है, लेकिन @layer का उपयोग करके आप शैली प्राथमिकता को अधिक लचीले और स्पष्ट रूप से नियंत्रित कर सकते हैं।

मूल वाक्यविन्यास

1@layer <layer-name> {
2  /* Styles within this layer */
3}

@layer का उपयोग करके शैलियों को परिभाषित करते समय, सिंटैक्स इस प्रकार होगा।

 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}

उदाहरण के लिए, आप निम्नानुसार विभिन्न परतों में शैलियों को परिभाषित कर सकते हैं:
इस मामले में, reset लेयर, base लेयर और theme लेयर क्रमशः परिभाषित हैं, और अंतिम h1 स्टाइल theme लेयर की सामग्री द्वारा निर्धारित किया जाता है, जिससे color: red; लागू होता है।

कई परतों की प्राथमिकता

@layer की शक्तिशाली विशेषता यह है कि यह लेयरों के बीच शैलियों की प्राथमिकता को प्रबंधित करने की अनुमति देता है। ऊपर दिए गए उदाहरण में, क्योंकि theme लेयर को अंतिम रूप में परिभाषित किया गया है, यह अन्य लेयरों में परिभाषित शैलियों को अधिलेखित कर देता है।

इसके अतिरिक्त, बाहरी स्टाइलशीट्स या अन्य लाइब्रेरी से लोड की गई CSS फ़ाइलों में प्राथमिकता कैस्केड को प्रबंधित करने के लिए @layer का उपयोग किया जा सकता है।

वैश्विक प्राथमिकता

 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}

लेयरों का क्रम CSS कैस्केड के भीतर प्राथमिकता प्राप्त करता है, जिसमें बाद में परिभाषित शैलियों को प्राथमिकता मिलती है। उदाहरण के लिए, आप लेयरों के क्रम को इस प्रकार लिखकर स्पष्ट रूप से निर्दिष्ट कर सकते हैं।
यह सुनिश्चित करता है कि शैलियाँ थीम, बेस, और रीसेट के क्रम में लागू की जाएँ, भले ही थीम लेयर पहले परिभाषित की गई हो।

`@layer` के साथ `@import` का उपयोग करना

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);

@import और @layer को मिलाकर, बाहरी स्टाइलशीट्स में लेयरों का प्रबंधन करना भी संभव है।
यह बाहरी स्टाइलशीट्स को विभिन्न लेयरों में रखने की अनुमति देता है, उनकी प्राथमिकता का प्रबंधन करता है।

`@layer` की प्रमुख बिंदु

@layer CSS शैली प्रबंधन में एक शक्तिशाली उपकरण है, जो बड़े प्रोजेक्ट्स में शैली संघर्षों से बचने के लिए एक सुविधाजनक तरीका प्रदान करता है। यह विशेष रूप से कई शैली स्रोतों से निपटने पर शैली प्राथमिकता को संक्षेप में प्रबंधित करने के लिए उल्लेखनीय है। निम्नलिखित बातों को ध्यान में रखना अच्छा होगा।

लेयरों द्वारा शैलियों को विभाजित करके, आप कैस्केड प्राथमिकता को नियंत्रित कर सकते हैं।
@import के साथ इसका उपयोग करके, आप बाहरी CSS फ़ाइलों को लेयर प्रबंधन में शामिल कर सकते हैं।
कई परतों को परिभाषित करने से शैली संघर्षों को रोका जा सकता है।

यह शैली संघर्षों को न्यूनतम करता है और जटिल शैली प्रबंधन की आवश्यकता वाले परियोजनाओं में भी कुशल डिज़ाइन की अनुमति देता है।

`@layer` का उपयोग करने के उदाहरण

@layer का उपयोग करते समय, आप लेयर नामकरण परंपराओं, आयात के क्रम और प्रोजेक्ट के पैमाने के अनुसार उपयुक्त लेयर्स की संख्या जैसे बिंदुओं पर ध्यान दे सकते हैं।

लेयर का नामकरण

लेयर के नाम प्रोजेक्ट की संरचना और उद्देश्य के आधार पर तय किए जाते हैं। लेयर नामकरण के सामान्य उदाहरण इस प्रकार हैं:।

1@layer base, layout, components, utilities;

base: एक लेयर जो रीसेट्स और टाइपोग्राफी जैसे बुनियादी स्टाइल्स को परिभाषित करती है।
layout: एक लेयर जो पेज लेआउट और ग्रिड सिस्टम के लिए स्टाइल्स को परिभाषित करती है।
components: एक लेयर जो बटन और कार्ड जैसे पुन: उपयोग करने योग्य UI घटकों के लिए स्टाइल्स को परिभाषित करती है।
utilities: एक लेयर जो उपयोगिता वर्गों के लिए स्टाइल्स को परिभाषित करती है (जैसे, margin, padding, text-center)।

स्पष्ट आयात क्रम

1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);

जब कई CSS फाइलों को संभाल रहे हों, तो @import का उपयोग करके एक स्पष्ट क्रम सेट करना महत्वपूर्ण है। यह क्रम सुनिश्चित करता है कि इच्छित प्राथमिकता बनाए रखी जाए।

लेयर का समेकन और सरलीकरण

 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}

छोटे पैमाने के प्रोजेक्ट्स में, लेयरों की संख्या को सीमित करना जटिलता को कम कर सकता है।

सारांश

CSS @ नियम वेब डिज़ाइन में लचीली शैली अप्लिकेशन और प्रदर्शन वृद्धि का समर्थन करने वाले शक्तिशाली उपकरण हैं। @media, @keyframes, और @supports डिवाइस के भिन्नताओं और ब्राउज़र संगतता को ध्यान में रखते हुए शैली प्रदान करना आसान बनाते हैं। इसके अतिरिक्त, @import और @font-face समृद्ध अभिव्यक्ति के लिए बाहरी संसाधनों को कुशलतापूर्वक सम्मिलित करने की अनुमति देते हैं।

इन @ नियमों को समझना और सही तरीके से उनका उपयोग करना अधिक प्रभावी CSS कोडिंग को सक्षम करता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

सीएसएस स्यूडो-क्लास और स्यूडो-एलिमेंट्स

सीएसएस `@` नियम

YouTube Video

प्रीव्यू के लिए HTML

सीएसएस @ नियम

उदाहरणात्मक @ नियमों के प्रकार

@import

बिन्दु:

@media

आम तौर पर उपयोग की जाने वाली शर्तें

चौड़ाई के आधार पर शर्तें

उपकरण का उन्मुखीकरण (orientation)

संकल्प (resolution)

शर्तों का संयोजन

और शर्त (and)

या शर्त (,)

नहीं शर्त (not)

@font-face

@keyframes

@supports

@page

बिन्दु:

@charset

@layer

मूल वाक्यविन्यास

कई परतों की प्राथमिकता

वैश्विक प्राथमिकता

@layer के साथ @import का उपयोग करना

@layer की प्रमुख बिंदु

@layer का उपयोग करने के उदाहरण

लेयर का नामकरण

स्पष्ट आयात क्रम

लेयर का समेकन और सरलीकरण

सारांश

YouTube Video

सीएसएस `@` नियम

उदाहरणात्मक `@` नियमों के प्रकार

`@import`

`@media`

उपकरण का उन्मुखीकरण (`orientation`)

संकल्प (`resolution`)

और शर्त (`and`)

या शर्त (`,`)

नहीं शर्त (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

`@layer` के साथ `@import` का उपयोग करना

`@layer` की प्रमुख बिंदु

`@layer` का उपयोग करने के उदाहरण