กฎ CSS `@`

Articles

กฎ CSS `@`

บทความนี้อธิบายกฎ @ ของ 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 (at-rules) เป็นคำสั่งพิเศษที่ใช้ควบคุมพฤติกรรมและเงื่อนไขการใช้งานของสไตล์ชีต ไม่เหมือนกับคุณสมบัติ 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 ใช้คำสั่ง media query เพื่อกำหนดสไตล์ตามเงื่อนไขเฉพาะ (เช่น ความกว้างของหน้าจอ, ความละเอียด เป็นต้น) มักถูกใช้ในการพัฒนาออกแบบเว็บไซต์ให้ตอบสนองต่ออุปกรณ์ต่าง ๆ (responsive design)

เงื่อนไขที่ใช้บ่อย

ต่อไปนี้คือเงื่อนไขทั่วไปที่ใช้บ่อยใน media queries

เงื่อนไขตามความกว้าง

 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)
ในตัวอย่างนี้ มีการกำหนดภาพพื้นหลังความละเอียดสูงสำหรับหน้าจอที่มีความละเอียดสูง

การรวมเงื่อนไข

Media queries สามารถรวมเงื่อนไขหลายอย่างเข้าด้วยกัน

เงื่อนไข AND (`and`)

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

เงื่อนไข AND ใช้สไตล์เมื่อเงื่อนไขทั้งหมดตรงตามที่กำหนด
ในตัวอย่างนี้ เมื่อความกว้างของหน้าจอเป็น 600px หรือมากกว่าและอยู่ในแนวตั้ง สีพื้นหลังของ body จะถูกตั้งค่าเป็นสีเขียวอ่อน

เงื่อนไข OR (`,`)

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

เงื่อนไข OR ใช้สไตล์เมื่อมีเงื่อนไขใดเงื่อนไขหนึ่งที่ตรงตามที่กำหนด
ในตัวอย่างนี้ เมื่อความกว้างของหน้าจอเป็น 400px หรือน้อยกว่าหรืออยู่ในแนวนอน สีข้อความของ body จะถูกตั้งค่าเป็นสีเทา

เงื่อนไข NOT (`not`)

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

เงื่อนไข NOT ใช้สไตล์เมื่อเงื่อนไขไม่ตรงตามที่กำหนด
ในตัวอย่างนี้ สำหรับอุปกรณ์ทั้งหมด เมื่อความกว้างของหน้าจอไม่ใช่ 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 บางอย่างหรือไม่ และกำหนดสไตล์ตามผลลัพธ์

ช่วยรักษาความเข้ากันได้ระหว่างบราวเซอร์เวอร์ชันเก่าและใหม่
สามารถกำหนด fallback ได้ผ่านการตรวจสอบคุณสมบัติ

`@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 ลำดับความสำคัญมักจะถูกกำหนดโดย 'cascade' แต่ด้วยการใช้ @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 ถูกกำหนดไว้สุดท้าย จึงทำให้ครอบคลุมสไตล์ที่ถูกกำหนดในเลเยอร์อื่น

นอกจากนี้ @layer ยังสามารถใช้เพื่อจัดการลำดับความสำคัญในสไตล์ชีตภายนอกหรือไฟล์ CSS ที่โหลดมาจากไลบรารีอื่น ๆ

ลำดับความสำคัญรวม

 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 cascade โดยสไตล์ที่กำหนดในภายหลังจะมีลำดับสูงกว่า ตัวอย่างเช่น คุณสามารถกำหนดลำดับของเลเยอร์โดยชัดเจนได้โดยการเขียนแบบนี้
สิ่งนี้ช่วยให้มั่นใจว่าสไตล์จะถูกนำมาใช้ตามลำดับ theme, base, และ reset แม้ว่าชั้น theme จะถูกกำหนดขึ้นก่อน

การใช้ `@import` ร่วมกับ `@layer`

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 โดยมอบวิธีที่สะดวกในการหลีกเลี่ยงความขัดแย้งของสไตล์ในโครงการขนาดใหญ่ มันน่าสังเกตเป็นพิเศษในการจัดการลำดับความสำคัญของสไตล์อย่างกระชับเมื่อจัดการกับแหล่งที่มาของสไตล์หลายแหล่ง ควรพิจารณาประเด็นต่อไปนี้

โดยการแยกสไตล์ออกเป็นเลเยอร์ คุณสามารถควบคุมลำดับความสำคัญของการ cascade ได้
โดยการใช้งานร่วมกับ @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 มีประสิทธิภาพมากยิ่งขึ้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

CSS คลาสเทียมและส่วนเทียม

กฎ CSS `@`

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

กฎ CSS @

ประเภทของกฎ @ ตัวอย่าง

@import

จุดสังเกต:

@media

เงื่อนไขที่ใช้บ่อย

เงื่อนไขตามความกว้าง

ลักษณะการวางแนวของอุปกรณ์ (orientation)

ความละเอียด (resolution)

การรวมเงื่อนไข

เงื่อนไข AND (and)

เงื่อนไข OR (,)

เงื่อนไข NOT (not)

@font-face

@keyframes

@supports

@page

จุดสังเกต:

@charset

@layer

ไวยกรณ์พื้นฐาน

ลำดับความสำคัญของชั้นหลายชั้น

ลำดับความสำคัญรวม

การใช้ @import ร่วมกับ @layer

ประเด็นสำคัญของ @layer

ตัวอย่างการใช้งาน @layer

การตั้งชื่อเลเยอร์

ลำดับการนำเข้าที่ชัดเจน

การรวบรวมและทำให้เลเยอร์เรียบง่าย

สรุป

YouTube Video

กฎ CSS `@`

ประเภทของกฎ `@` ตัวอย่าง

`@import`

`@media`

ลักษณะการวางแนวของอุปกรณ์ (`orientation`)

ความละเอียด (`resolution`)

เงื่อนไข AND (`and`)

เงื่อนไข OR (`,`)

เงื่อนไข NOT (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

การใช้ `@import` ร่วมกับ `@layer`

ประเด็นสำคัญของ `@layer`

ตัวอย่างการใช้งาน `@layer`