Mga Patakaran ng CSS `@`

Articles

Ang artikulong ito ay nagpapaliwanag tungkol sa mga panuntunang CSS @.

Maaari kang matuto tungkol sa paggamit at kung paano isulat ang mga panuntunang @ tulad ng @import at @media.

YouTube Video

HTML para sa Preview

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>

Mga Patakaran ng CSS `@`

Ang mga panuntunang CSS @ (at-rules) ay mga espesyal na utos na ginagamit upang kontrolin ang kilos at kondisyon ng aplikasyon ng mga stylesheet. Hindi tulad ng mga normal na ari-arian ng CSS, ang mga panuntunang @ ay nagpapadala ng mga estilo depende sa kondisyon o nag-aangkat ng mga panlabas na mapagkukunan. Ang mga kinatawang panuntunang @ ay kinabibilangan ng @media, @import, at @keyframes, at iba pa.

Mga Uri ng Halimbawang mga Patakaran ng `@`

`@import`

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

Ang @import ay ginagamit upang mag-angkat ng iba pang mga CSS file papunta sa kasalukuyang stylesheet. Ito ay nagbibigay-daan para sa madaling paggamit muli ng mga panlabas na CSS file.

Mga Punto:

Ang @import ay kailangang nakasulat sa simula ng stylesheet.
Dapat itong iwasan sa malalaking proyekto dahil sa epekto nito sa pagganap.

`@media`

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

Ang @media ay gumagamit ng media queries upang maglagay ng mga estilo batay sa mga partikular na kondisyon (tulad ng lapad ng screen, resolusyon, at iba pa). Madalas itong ginagamit sa pagpapatupad ng responsive na disenyo.

Kadalasang Ginagamit na mga Kondisyon

Ang sumusunod ay mga karaniwang kundisyon na madalas gamitin sa media queries.

Mga Kundisyon Batay sa Lapad

 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}

Minimum width (min-width) nag-aaplay ng estilo kapag ang lapad ay katumbas o mas malaki sa itinakdang halaga.
Maximum width (max-width) nag-aaplay ng estilo kapag ang lapad ay katumbas o mas maliit sa itinakdang halaga.

Oryentasyon ng Device (`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}

Oryentasyon ng device (orientation) maaaring itakda sa portrait o landscape.

Resulusyon (`resolution`)

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

Ang mga estilo ay maaaring i-apply batay sa resulusyon (resolution).
Sa halimbawang ito, isang mataas na resolusyon na background image ang tinukoy para sa mga display na may mataas na resolusyon.

Pagsasama ng Mga Kundisyon

Ang media queries ay maaari ring pagsamahin ang maraming kundisyon.

AND Kundisyon (`and`)

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

Ang AND kundisyon ay nag-aaplay ng estilo kapag lahat ng kundisyon ay natugunan.
Sa halimbawang ito, kapag ang lapad ng screen ay 600px o mas malaki at nasa portrait na oryentasyon, ang kulay ng background ng body ay itinatakda sa light green.

OR Kundisyon (`,`)

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

Ang OR kundisyon ay nag-aaplay ng estilo kapag ang kahit alinmang kundisyon ay natugunan.
Sa halimbawang ito, kapag ang lapad ng screen ay 400px o mas maliit, o nasa landscape na oryentasyon, ang kulay ng teksto ng body ay itinatakda sa gray.

NOT Kundisyon (`not`)

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

Ang NOT kundisyon ay nag-aaplay ng estilo kapag ang kundisyon ay hindi natugunan.
Sa halimbawang ito, para sa lahat ng device, kapag ang lapad ng screen ay hindi 600px o mas malaki, ang laki ng font ng body ay itinatakda sa 14px.

`@font-face`

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

Ang @font-face ay ginagamit upang magtakda ng mga web font. Sa panuntunang ito, ang mga panlabas na font ay maaaring i-download at ilapat sa isang webpage.

Ang mga custom na font ay maaaring gamitin bilang alternatibo sa mga karaniwang font.
Kinakailangan ang atensyon sa laki ng font file.

`@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}

Ang @keyframes ay ginagamit upang gumawa ng mga animasyon sa CSS. Ang mga istilo ay maaaring tukuyin sa bawat hakbang ng isang animasyon.

Nagbibigay-daan ito para sa detalyadong kontrol ng mga animasyon.
Ito ay ginagamit kasabay ng ari-arian na animation.

`@supports`

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

Ang @supports ay sinusuri kung ang ilang mga tampok ng CSS ay sinusuportahan ng browser at inilalagay ang mga istilo batay sa resulta.

Nakakatulong ito upang mapanatili ang pagkakatugma sa pagitan ng mga lumang at bagong browser.
Maaaring ilapat ang mga fallback sa pamamagitan ng pagtukoy ng mga tampok.

`@page`

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

Ginagamit ang @page upang kontrolin ang mga estilo para sa pagpi-print. Kapaki-pakinabang ito para sa pagtatakda ng laki ng pahina at mga margin.

Mga Punto:

Ginagamit ito para sa pagtatakda ng mga estilo para sa print media.
Maaari mo ring isaayos ang mga estilo ng mga partikular na elemento ng pahina tulad ng mga header at footer.

`@charset`

1@charset "UTF-8";

Itinatakda ng @charset ang encoding ng karakter ng isang file na CSS. Karaniwang tinutukoy ang UTF-8.

Dapat itong ilagay sa simula ng style sheet.
Lalo na itong ginagamit para sa mga multilingual na website.

`@layer`

Ang @layer ay isang bagong panuntunan sa @ na ginagamit upang isaayos ang priyoridad ng mga stylesheet sa CSS, na nagbibigay-daan sa pagpapangkat at pamamahala ng maraming panuntunan ng CSS sa pamamagitan ng mga layer. Ang panuntunang ito ay lubos na kapaki-pakinabang sa malalaking mga stylesheet o mga proyekto na may kaugnayan sa maraming panlabas na mga stylesheet upang mapadali ang pag-iwas sa mga pag-aaway sa CSS.

Sa mga stylesheet ng CSS, karaniwang itinatakda ang priyoridad ng 'cascade', ngunit sa paggamit ng @layer, maaari mong kontrolin ang priyoridad ng estilo nang mas nababagay at malinaw.

Pangunahing Syntax

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

Kapag tinutukoy ang mga estilo gamit ang @layer, ang syntax ay magiging ganito.

 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}

Halimbawa, maaari mong tukuyin ang mga istilo sa iba't ibang layer tulad nito:
Sa kasong ito, ang reset layer, base layer, at theme layer ay tinukoy ayon sa pagkakasunod-sunod, at ang panghuling istilo ng h1 ay itinatakda ng nilalaman ng theme layer, na nagreresulta sa color: red; na naipapatupad.

Prayoridad ng maraming mga layer

Ang makapangyarihang tampok ng @layer ay nagbibigay-daan itong pamahalaan ang priyoridad ng mga estilo sa pagitan ng mga layer. Sa halimbawa sa itaas, dahil ang theme layer ay tinukoy sa huli, ito ay nag-o-overwrite ng mga istilong tinukoy sa iba pang mga layer.

Bukod dito, maaaring gamitin ang @layer upang pamahalaan ang priority cascade sa mga panlabas na stylesheet o mga file ng CSS na na-load mula sa ibang mga library.

Pandaigdig na prayoridad

 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}

Ang pagkakasunod-sunod ng mga layer ay inuuna sa loob ng CSS cascade, kung saan ang mga istilo na tinukoy sa mas huling bahagi ay may priyoridad. Halimbawa, maaari mong tahasang itakda ang pagkakasunod-sunod ng mga layer sa pamamagitan ng pagsusulat ng ganito.
Tinitiyak nito na ang mga estilo ay ilalapat sa pagkakasunud-sunod ng theme, base, at reset, kahit na ang layer na theme ay unang itinakda.

Paggamit ng `@import` kasama ng `@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);

Sa pamamagitan ng pagsasama ng @import at @layer, posible ring pamahalaan ang mga layer sa mga panlabas na stylesheet.
Hinahayaan nitong ang mga panlabas na stylesheet ay mailagay sa iba't ibang mga layer, pamamahalaan ang kanilang priyoridad.

Mga pangunahing puntos ng `@layer`

Ang @layer ay isang makapangyarihang kasangkapan sa pamamahala ng istilo ng CSS, na nagbibigay ng maginhawang paraan upang maiwasan ang mga pag-aaway ng estilo sa malalaking proyekto. Lalo itong kapansin-pansin para sa maikling pamamahala ng priyoridad ng istilo kapag may kaugnayan sa maraming pinagmumulan ng istilo. Magandang tandaan ang mga sumusunod na punto.

Sa pamamagitan ng paghihiwalay ng mga istilo sa pamamagitan ng mga layer, maaari mong kontrolin ang priyoridad ng cascade.
Sa paggamit nito kasama ang @import, maaari mong isama ang mga panlabas na file ng CSS sa pamamahala ng layer.
Ang pagde-define ng maraming layer ay maaaring makaiwas sa mga banggaan ng estilo.

Pinapaliit nito ang mga banggaan ng estilo at nagbibigay-daan sa epektibong disenyo kahit sa mga proyekto na nangangailangan ng masalimuot na pamamahala ng estilo.

Mga halimbawa ng paggamit ng `@layer`

Kapag gumagamit ng @layer, maaari mong isaalang-alang ang mga bagay tulad ng mga convention sa pagbibigay ng pangalan sa layer, pagkakasunod-sunod ng import, at ang dami ng mga layer na naaangkop sa saklaw ng proyekto.

Pagpapangalan ng Layer

Ang mga pangalan ng layer ay natutukoy batay sa istruktura at layunin ng proyekto. Ang mga karaniwang halimbawa ng pagpapangalan ng layer ay kasama ang mga sumusunod:.

1@layer base, layout, components, utilities;

base: Isang layer na tumutukoy sa mga pangunahing estilo tulad ng resets at typography.
layout: Isang layer na tumutukoy sa mga estilo para sa layout ng pahina at mga sistema ng grid.
components: Isang layer na tumutukoy sa mga estilo para sa reusable na mga UI component tulad ng mga button at card.
utilities: Isang layer na tumutukoy sa mga estilo para sa mga utility class (halimbawa: margin, padding, text-center).

Malinaw na Pagkakasunod-sunod ng Import

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);

Kapag humahawak ng maraming CSS file, mahalagang magtakda ng malinaw na pagkakasunod-sunod gamit ang @import. Sinisiguro ng pagkakasunod-sunod na ito na mapanatili ang layuning prayoridad.

Pagsasama-sama at Pagpapasimple ng Layer

 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}

Sa mga proyektong maliit ang saklaw, ang paglilimita ng bilang ng mga layer ay maaaring magpabawas ng pagiging kumplikado.

Buod

Ang mga @ na patakaran sa CSS ay malalakas na kasangkapan na sumusuporta sa mapagkakayang aplikasyon ng estilo at sa pagpapabuti ng performance sa disenyo ng web. Ang @media, @keyframes, at @supports ay nagpapadali sa pag-aangkop ng estilo habang isinasaalang-alang ang pagkakaiba ng mga device at compatibility ng browser. Bukod pa rito, ang @import at @font-face ay nagbibigay-daan sa epektibong pag-integrate ng mga panlabas na mapagkukunan para sa mas makulay na pagpapahayag.

Ang pag-unawa at wastong paggamit ng mga @ na patakaran na ito ay nagdudulot ng mas epektibong pagsulat ng CSS.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga CSS Pseudo-class at Pseudo-element

Mga Patakaran ng CSS `@`

YouTube Video

HTML para sa Preview

Mga Patakaran ng CSS @

Mga Uri ng Halimbawang mga Patakaran ng @

@import

Mga Punto:

@media

Kadalasang Ginagamit na mga Kondisyon

Mga Kundisyon Batay sa Lapad

Oryentasyon ng Device (orientation)

Resulusyon (resolution)

Pagsasama ng Mga Kundisyon

AND Kundisyon (and)

OR Kundisyon (,)

NOT Kundisyon (not)

@font-face

@keyframes

@supports

@page

Mga Punto:

@charset

@layer

Pangunahing Syntax

Prayoridad ng maraming mga layer

Pandaigdig na prayoridad

Paggamit ng @import kasama ng @layer

Mga pangunahing puntos ng @layer

Mga halimbawa ng paggamit ng @layer

Pagpapangalan ng Layer

Malinaw na Pagkakasunod-sunod ng Import

Pagsasama-sama at Pagpapasimple ng Layer

Buod

YouTube Video

Mga Patakaran ng CSS `@`

Mga Uri ng Halimbawang mga Patakaran ng `@`

`@import`

`@media`

Oryentasyon ng Device (`orientation`)

Resulusyon (`resolution`)

AND Kundisyon (`and`)

OR Kundisyon (`,`)

NOT Kundisyon (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

Paggamit ng `@import` kasama ng `@layer`

Mga pangunahing puntos ng `@layer`

Mga halimbawa ng paggamit ng `@layer`