Articles
Pengenalan ke CSS
Aturan CSS `@`

Aturan CSS `@`

Artikel ini menjelaskan aturan CSS @.

Anda dapat mempelajari cara penggunaan dan penulisan aturan @ seperti @import dan @media.

YouTube Video

HTML untuk Pratinjau

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>

Aturan CSS @

Aturan CSS @ (at-rules) adalah instruksi khusus yang digunakan untuk mengontrol perilaku dan kondisi penerapan stylesheet. Tidak seperti properti CSS biasa, aturan @ menerapkan gaya atau mengimpor sumber daya eksternal secara kondisional. Aturan @ yang umum mencakup @media, @import, dan @keyframes, serta lainnya.

Jenis-jenis Contoh Aturan @

@import 

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

@import digunakan untuk mengimpor file CSS lain ke dalam stylesheet saat ini. Ini memungkinkan penggunaan kembali file CSS eksternal dengan mudah.

Poin-poin:

  • @import harus ditulis di awal stylesheet.
  • Ini sebaiknya dihindari pada proyek besar karena dampaknya terhadap kinerja.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media menggunakan media queries untuk menerapkan gaya berdasarkan kondisi tertentu (seperti lebar layar, resolusi, dll.). Ini sering digunakan dalam penerapan desain responsif.

Kondisi yang Sering Digunakan

Berikut ini adalah kondisi umum yang sering digunakan dalam media queries.

Kondisi Berdasarkan Lebar 
 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}
  • Lebar minimum (min-width) menerapkan gaya ketika lebar sama dengan atau lebih besar dari nilai yang ditentukan.
  • Lebar maksimum (max-width) menerapkan gaya ketika lebar sama dengan atau lebih kecil dari nilai yang ditentukan.
Orientasi Perangkat (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}
  • Orientasi perangkat (orientation) dapat diatur menjadi portrait atau landscape.
Resolusi (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Gaya dapat diterapkan berdasarkan resolusi (resolution).
  • Dalam contoh ini, gambar latar belakang beresolusi tinggi ditentukan untuk layar dengan resolusi tinggi.

Menggabungkan Kondisi

Media queries juga dapat menggabungkan beberapa kondisi.

Kondisi AND (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • Kondisi AND menerapkan gaya ketika semua kondisi terpenuhi.
  • Dalam contoh ini, ketika lebar layar adalah 600px atau lebih besar dan dalam orientasi portrait, warna latar belakang body diatur menjadi hijau muda.
Kondisi OR (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • Kondisi OR menerapkan gaya ketika salah satu kondisi terpenuhi.
  • Dalam contoh ini, ketika lebar layar adalah 400px atau lebih kecil, atau dalam orientasi landscape, warna teks body diatur menjadi abu-abu.
Kondisi NOT (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • Kondisi NOT menerapkan gaya ketika kondisi tidak terpenuhi.
  • Dalam contoh ini, untuk semua perangkat, ketika lebar layar bukan 600px atau lebih besar, ukuran font body diatur menjadi 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 digunakan untuk mendefinisikan font web. Dengan aturan ini, font eksternal dapat diunduh dan diterapkan ke halaman web.

  • Font khusus dapat digunakan daripada mengandalkan font standar.
  • Perhatian terhadap ukuran file font diperlukan.

@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 digunakan untuk membuat animasi CSS. Gaya dapat ditentukan pada setiap langkah animasi.

  • Ini memungkinkan kontrol yang mendetail terhadap animasi.
  • Ini digunakan bersamaan dengan properti animation.

@supports 

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

@supports memeriksa apakah fitur CSS tertentu didukung oleh browser dan menerapkan gaya berdasarkan hasilnya.

  • Ini membantu menjaga kompatibilitas antara browser lama dan baru.
  • Fallback dapat diterapkan melalui pendeteksian fitur.

@page 

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

@page digunakan untuk mengontrol gaya saat mencetak. Ini berguna untuk mengatur ukuran halaman dan margin.

Poin-poin:

  • Ini digunakan untuk mengatur gaya media cetak.
  • Anda juga dapat menyesuaikan gaya elemen halaman tertentu seperti header dan footer.

@charset 

1@charset "UTF-8";

@charset menentukan pengkodean karakter dari file CSS. UTF-8 terutama ditentukan.

  • Itu harus ditentukan di awal lembar gaya.
  • Ini khusus digunakan untuk situs web multibahasa.

@layer

@layer adalah aturan @ baru yang digunakan untuk mengatur prioritas stylesheet dalam CSS, memungkinkan beberapa aturan CSS untuk dikelompokkan dan dikelola berdasarkan lapisan. Aturan ini sangat berguna dalam stylesheet besar atau proyek yang melibatkan beberapa stylesheet eksternal untuk memudahkan menghindari konflik CSS.

Dalam stylesheet CSS, prioritas biasanya ditentukan oleh 'cascade', tetapi dengan menggunakan @layer, Anda dapat mengontrol prioritas gaya dengan lebih fleksibel dan eksplisit.

Sintaks Dasar 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • Saat mendefinisikan gaya menggunakan @layer, sintaksnya akan seperti ini.
 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}
  • Sebagai contoh, Anda dapat mendefinisikan gaya dalam lapisan yang berbeda seperti ini:
  • Dalam hal ini, lapisan reset, lapisan base, dan lapisan theme masing-masing didefinisikan, dan gaya h1 terakhir ditentukan oleh konten lapisan theme, menghasilkan penerapan color: red;.

Prioritas beberapa lapisan

Fitur kuat dari @layer adalah memungkinkan pengelolaan prioritas gaya antar lapisan. Dalam contoh di atas, karena lapisan theme didefinisikan terakhir, lapisan ini menimpa gaya yang didefinisikan di lapisan lainnya.

Selain itu, @layer dapat digunakan untuk mengelola prioritas cascade dalam stylesheet eksternal atau file CSS yang dimuat dari pustaka lainnya.

Prioritas global 
 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}
  • Urutan lapisan diprioritaskan dalam cascade CSS, dengan gaya yang didefinisikan terakhir memiliki prioritas. Sebagai contoh, Anda dapat secara eksplisit menentukan urutan lapisan dengan menuliskannya seperti ini.
  • Ini memastikan bahwa gaya diterapkan dalam urutan theme, base, dan reset, bahkan jika lapisan theme didefinisikan terlebih dahulu.

Menggunakan @import dengan @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);
  • Dengan menggabungkan @import dan @layer, dimungkinkan juga untuk mengelola lapisan dalam stylesheet eksternal.
  • Ini memungkinkan stylesheet eksternal ditempatkan di lapisan yang berbeda, mengelola prioritasnya.

Poin-poin kunci dari @layer

@layer adalah alat yang kuat dalam manajemen gaya CSS, memberikan metode yang nyaman untuk menghindari konflik gaya dalam proyek besar. Ini sangat menonjol untuk mengelola prioritas gaya secara ringkas saat berhadapan dengan beberapa sumber gaya. Ada baiknya untuk mengingat poin-poin berikut.

  • Dengan memisahkan gaya berdasarkan lapisan, Anda dapat mengontrol prioritas cascade.
  • Dengan menggunakannya bersama @import, Anda dapat menyertakan file CSS eksternal dalam manajemen lapisan.
  • Mendefinisikan beberapa lapisan dapat mencegah konflik gaya.

Ini meminimalkan tabrakan gaya dan memungkinkan desain yang efisien bahkan dalam proyek yang memerlukan manajemen gaya yang kompleks.

Contoh penggunaan @layer

Saat menggunakan @layer, Anda dapat mempertimbangkan poin-poin seperti konvensi penamaan layer, urutan impor, dan jumlah layer yang sesuai dengan skala proyek.

Penamaan Layer

Nama layer ditentukan berdasarkan struktur dan tujuan proyek. Contoh umum penamaan layer meliputi hal-hal berikut:.

1@layer base, layout, components, utilities;
  • base: Layer yang mendefinisikan gaya dasar seperti reset dan tipografi.
  • layout: Layer yang mendefinisikan gaya untuk tata letak halaman dan sistem grid.
  • components: Layer yang mendefinisikan gaya untuk komponen UI yang dapat digunakan kembali seperti tombol dan kartu.
  • utilities: Layer yang mendefinisikan gaya untuk kelas utilitas (misalnya, margin, padding, text-center).
Urutan Impor yang Jelas 
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);
  • Saat menangani banyak file CSS, penting untuk menetapkan urutan yang jelas menggunakan @import. Urutan ini memastikan prioritas yang dimaksud tetap terjaga.
Konsolidasi dan Penyederhanaan 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}
  • Dalam proyek berskala kecil, membatasi jumlah layer dapat mengurangi kompleksitas.

Ringkasan

Aturan CSS @ adalah alat yang kuat yang mendukung penerapan gaya yang fleksibel dan peningkatan kinerja dalam desain web. @media, @keyframes, dan @supports mempermudah styling dengan mempertimbangkan perbedaan perangkat dan kompatibilitas browser. Selain itu, @import dan @font-face memungkinkan integrasi sumber daya eksternal yang efisien untuk ekspresi yang lebih kaya.

Memahami dan menggunakan aturan @ ini dengan benar memungkinkan penulisan kode CSS yang lebih efektif.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Pseudokelas dan Pseudoelemen CSS