CSS `@` Regels

Articles

CSS `@` Regels

Dit artikel legt de CSS @ regels uit.

Je leert het gebruik en hoe je @ regels zoals @import en @media kunt schrijven.

YouTube Video

HTML voor Voorbeeldweergave

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

CSS @ regels (at-regels) zijn speciale instructies die worden gebruikt om het gedrag en de toepassingsvoorwaarden van stijlsheets te regelen. In tegenstelling tot normale CSS-eigenschappen passen @ regels conditioneel stijlen toe of importeren externe bronnen. Representatieve @ regels zijn onder andere @media, @import en @keyframes.

Soorten Voorbeeldige `@` Regels

`@import`

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

@import wordt gebruikt om andere CSS-bestanden in het huidige stijlsheet te importeren. Dit maakt het eenvoudig om externe CSS-bestanden te hergebruiken.

Belangrijke punten:

@import moet aan het begin van het stijlsheet worden geschreven.
Het moet vermeden worden in grote projecten vanwege de impact op de prestaties.

`@media`

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

@media gebruikt media-query's om stijlen toe te passen op basis van specifieke voorwaarden (zoals schermbreedte, resolutie, enzovoort). Het wordt vaak gebruikt bij de implementatie van responsief design.

Veelgebruikte voorwaarden

De volgende zijn veelvoorkomende voorwaarden die vaak worden gebruikt in mediaqueries.

Voorwaarden Gebaseerd op Breedte

 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}

Minimale breedte (min-width) past stijlen toe wanneer de breedte gelijk is aan of groter is dan de opgegeven waarde.
Maximale breedte (max-width) past stijlen toe wanneer de breedte gelijk is aan of kleiner is dan de opgegeven waarde.

Apparaat Oriëntatie (`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}

Apparaat oriëntatie (orientation) kan worden ingesteld op portret of landschap.

Resolutie (`resolution`)

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

Stijlen kunnen worden toegepast op basis van resolutie (resolution).
In dit voorbeeld is een achtergrondafbeelding met hoge resolutie gespecificeerd voor schermen met een hoge resolutie.

Voorwaarden Combineren

Mediaqueries kunnen ook meerdere voorwaarden combineren.

EN Voorwaarde (`and`)

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

De EN-voorwaarde past stijlen toe wanneer aan alle voorwaarden wordt voldaan.
In dit voorbeeld, wanneer de schermbreedte 600px of groter is en in portretoriëntatie, wordt de achtergrondkleur van body ingesteld op lichtgroen.

OF Voorwaarde (`,`)

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

De OF-voorwaarde past stijlen toe wanneer aan een van de voorwaarden wordt voldaan.
In dit voorbeeld, wanneer de schermbreedte 400px of kleiner is, of in landschaporiëntatie, wordt de tekstkleur van body ingesteld op grijs.

NIET Voorwaarde (`not`)

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

De NIET-voorwaarde past stijlen toe wanneer niet aan de voorwaarde wordt voldaan.
In dit voorbeeld, voor alle apparaten, wanneer de schermbreedte niet 600px of groter is, wordt de lettergrootte van body ingesteld op 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 wordt gebruikt om webfonts te definiëren. Met deze regel kunnen externe lettertypen worden gedownload en toegepast op een webpagina.

Aangepaste lettertypen kunnen worden gebruikt in plaats van standaardlettertypen.
Let op de bestandsgrootte van de lettertypen.

`@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 wordt gebruikt om CSS-animaties te maken. Stijlen kunnen worden gespecificeerd bij elke stap van een animatie.

Het biedt gedetailleerde controle over animaties.
Het wordt gebruikt in combinatie met de eigenschap animation.

`@supports`

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

@supports controleert of bepaalde CSS-functies door de browser worden ondersteund en past stijlen toe op basis van het resultaat.

Het helpt compatibiliteit tussen oudere en nieuwere browsers te behouden.
Fallbacks kunnen worden toegepast via functieherkenning.

`@page`

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

@page wordt gebruikt om stijlen voor afdrukken te bepalen. Het is handig voor het instellen van paginaformaten en marges.

Belangrijke punten:

Het wordt gebruikt om stijlen in te stellen voor afdrukmedia.
U kunt ook de stijlen aanpassen van specifieke paginacomponenten zoals kopteksten en voetteksten.

`@charset`

1@charset "UTF-8";

@charset specificeert de tekencodering van een CSS-bestand. Meestal wordt UTF-8 gespecificeerd.

Het moet aan het begin van het stijlblad worden vermeld.
Het wordt vooral gebruikt voor meertalige websites.

`@layer`

@layer is een nieuwe @-regel die wordt gebruikt om de prioriteit van stijlen in CSS te organiseren, waarmee meerdere CSS-regels kunnen worden gegroepeerd en beheerd per laag. Deze regel is vooral handig in grote stijlenbladen of projecten met meerdere externe stijlenbladen om CSS-conflicten eenvoudiger te voorkomen.

In CSS-stijlenbladen wordt de prioriteit meestal bepaald door de 'cascade', maar met @layer kun je de prioriteit van stijlen flexibeler en explicieter beheren.

Basis Syntax

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

Bij het definiëren van stijlen met @layer zou de syntax er ongeveer zo uitzien.

 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}

Je kunt bijvoorbeeld stijlen in verschillende lagen definiëren zoals dit:
In dit geval worden respectievelijk de reset-laag, base-laag en theme-laag gedefinieerd, en de uiteindelijke h1-stijl wordt bepaald door de inhoud van de theme-laag, wat resulteert in color: red; die wordt toegepast.

Prioriteit van meerdere lagen

De krachtige functie van @layer is dat het mogelijk maakt om de prioriteit van stijlen tussen lagen te beheren. In het bovenstaande voorbeeld overschrijft de theme-laag, omdat deze als laatste is gedefinieerd, stijlen die in andere lagen zijn gedefinieerd.

Bovendien kan @layer worden gebruikt om de prioriteitscascade te beheren in externe stijlenbladen of CSS-bestanden die uit andere bibliotheken worden geladen.

Globale prioriteit

 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}

De volgorde van lagen krijgt prioriteit binnen de CSS-cascade, waarbij stijlen die later worden gedefinieerd voorrang krijgen. Je kunt bijvoorbeeld expliciet de volgorde van lagen specificeren door ze op deze manier te schrijven.
Dit zorgt ervoor dat stijlen worden toegepast in de volgorde van thema, basis en reset, zelfs als de thema-laag als eerste werd gedefinieerd.

Het gebruik van `@import` met `@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);

Door @import en @layer te combineren, is het ook mogelijk om lagen in externe stylesheets te beheren.
Dit maakt het mogelijk om externe stylesheets in verschillende lagen te plaatsen en hun prioriteit te beheren.

Belangrijke punten van `@layer`

@layer is een krachtig hulpmiddel in CSS-stijlbeheer en biedt een handige methode om stijlconflicten in grote projecten te voorkomen. Het is met name opmerkelijk voor het beknopt beheren van stijlprioriteit bij het omgaan met meerdere stijlbronnen. Het is goed om de volgende punten in gedachten te houden.

Door stijlen per laag te scheiden, kun je de cascade-prioriteit beheren.
Door het samen met @import te gebruiken, kun je externe CSS-bestanden opnemen in het laagbeheer.
Het definiëren van meerdere lagen kan stijlconflicten voorkomen.

Dit minimaliseert stijlconflicten en maakt efficiënt ontwerp mogelijk, zelfs in projecten die complex stijlbeheer vereisen.

Voorbeelden van het gebruik van `@layer`

Bij het gebruik van @layer kun je punten overwegen zoals naamgevingsconventies voor lagen, de importvolgorde en het aantal lagen dat passend is bij de schaal van het project.

Naamgeving van lagen

Lagnaamgeving wordt bepaald op basis van de structuur en het doel van het project. Veelvoorkomende voorbeelden van lagenaamgeving zijn onder andere:.

1@layer base, layout, components, utilities;

base: Een laag die basisstijlen zoals resets en typografie definieert.
layout: Een laag die de stijlen voor paginalay-outs en gridsystemen definieert.
components: Een laag die de stijlen definieert voor herbruikbare UI-componenten zoals knoppen en kaarten.
utilities: Een laag die stijlen definieert voor hulpprogrammaklassen (bijv. margin, padding, text-center).

Duidelijke importvolgorde

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

Bij het werken met meerdere CSS-bestanden is het belangrijk om een duidelijke volgorde te bepalen met @import. Deze volgorde zorgt ervoor dat de beoogde prioriteit behouden blijft.

Consolidatie en vereenvoudiging van lagen

 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}

Bij kleinschalige projecten kan het beperken van het aantal lagen de complexiteit verminderen.

Samenvatting

CSS @-regels zijn krachtige hulpmiddelen die flexibele stijltoepassing en prestatieverbetering in webdesign ondersteunen. @media, @keyframes en @supports maken het gemakkelijk om te stijlen met inachtneming van apparaatverschillen en browsercompatibiliteit. Daarnaast maken @import en @font-face efficiënte opname van externe bronnen mogelijk voor een rijkere expressie.

Het begrijpen en correct gebruiken van deze @-regels maakt effectievere CSS-codering mogelijk.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS Pseudo-klassen en Pseudo-elementen

CSS `@` Regels

YouTube Video

HTML voor Voorbeeldweergave

CSS @ Regels

Soorten Voorbeeldige @ Regels

@import

Belangrijke punten:

@media

Veelgebruikte voorwaarden

Voorwaarden Gebaseerd op Breedte

Apparaat Oriëntatie (orientation)

Resolutie (resolution)

Voorwaarden Combineren

EN Voorwaarde (and)

OF Voorwaarde (,)

NIET Voorwaarde (not)

@font-face

@keyframes

@supports

@page

Belangrijke punten:

@charset

@layer

Basis Syntax

Prioriteit van meerdere lagen

Globale prioriteit

Het gebruik van @import met @layer

Belangrijke punten van @layer

Voorbeelden van het gebruik van @layer

Naamgeving van lagen

Duidelijke importvolgorde

Consolidatie en vereenvoudiging van lagen

Samenvatting

YouTube Video

CSS `@` Regels

Soorten Voorbeeldige `@` Regels

`@import`

`@media`

Apparaat Oriëntatie (`orientation`)

Resolutie (`resolution`)

EN Voorwaarde (`and`)

OF Voorwaarde (`,`)

NIET Voorwaarde (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

Het gebruik van `@import` met `@layer`

Belangrijke punten van `@layer`

Voorbeelden van het gebruik van `@layer`