Articles
Introduktion til CSS
CSS `@` Regler

CSS `@` Regler

Denne artikel forklarer CSS @ regler.

Du kan lære om brugen og hvordan man skriver @ regler som @import og @media.

YouTube Video

HTML til forhåndsvisning

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 @ Regler

CSS @ regler (at-regler) er særlige instruktioner, der bruges til at kontrollere adfærden og anvendelsesbetingelserne for stylesheets. I modsætning til normale CSS-egenskaber anvender @ regler betingede styles eller importerer eksterne ressourcer. Repræsentative @ regler inkluderer @media, @import og @keyframes blandt andre.

Typer af Eksemplariske @ Regler

@import 

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

@import bruges til at importere andre CSS-filer ind i det aktuelle stylesheet. Dette gør det nemt at genbruge eksterne CSS-filer.

Punkter:

  • @import skal skrives i begyndelsen af stylesheetet.
  • Det bør undgås i store projekter på grund af dets indvirkning på ydeevnen.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media bruger medieforespørgsler til at anvende styles baseret på specifikke betingelser (som skærmbredde, opløsning osv.). Det bruges ofte til implementering af responsivt design.

Ofte anvendte betingelser

Følgende er almindelige betingelser, der ofte bruges i medieforespørgsler.

Betingelser Baseret på Bredde 
 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}
  • Minimumsbredde (min-width) anvender stilarter, når bredden er lig med eller større end den angivne værdi.
  • Maksimumsbredde (max-width) anvender stilarter, når bredden er lig med eller mindre end den angivne værdi.
Enhedens Orientering (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}
  • Enhedens orientering (orientation) kan indstilles til portræt eller landskab.
Opløsning (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Stilarter kan anvendes baseret på opløsning (resolution).
  • I dette eksempel specificeres et baggrundsbillede i høj opløsning til skærme med høj opløsning.

Kombinere Betingelser

Medieforespørgsler kan også kombinere flere betingelser.

OG-Betingelse (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • OG-betingelsen anvender stilarter, når alle betingelser er opfyldt.
  • I dette eksempel, når skærmbredden er 600px eller større og i portrætorientering, fastsættes body baggrundsfarven til lysegrøn.
ELLER-Betingelse (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • ELLER-betingelsen anvender stilarter, når en hvilken som helst betingelse er opfyldt.
  • I dette eksempel, når skærmbredden er 400px eller mindre, eller i landskabsorientering, fastsættes body tekstfarven til grå.
IKKE-Betingelse (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • IKKE-betingelsen anvender stilarter, når betingelsen ikke er opfyldt.
  • I dette eksempel, for alle enheder, når skærmbredden ikke er 600px eller større, fastsættes body skrifttypestørrelsen til 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 bruges til at definere webfonte. Med denne regel kan eksterne fonte downloades og anvendes på en webside.

  • Tilpassede fonte kan bruges i stedet for at stole på standardfonte.
  • Opmærksomhed på fontfilsstørrelse er nødvendig.

@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 bruges til at skabe CSS-animationer. Styles kan specificeres i hvert trin af en animation.

  • Det giver detaljeret kontrol over animationer.
  • Det bruges i forbindelse med animation-egenskaben.

@supports 

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

@supports kontrollerer, om visse CSS-funktioner understøttes af browseren, og anvender typografi baseret på resultatet.

  • Det hjælper med at opretholde kompatibilitet mellem ældre og nyere browsere.
  • Fallbacks kan anvendes ved hjælp af funktionsdetektering.

@page 

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

@page bruges til at kontrollere typografien til udskrift. Det er nyttigt til at angive sidestørrelse og marginer.

Punkter:

  • Det bruges til at angive stilarter til printmedier.
  • Du kan også tilpasse stilarterne for specifikke sideelementer såsom overskrifter og sidefødder.

@charset 

1@charset "UTF-8";

@charset angiver tegnkodningen for en CSS-fil. UTF-8 angives for det meste.

  • Det skal angives i begyndelsen af stylesheetet.
  • Det bruges især til flersprogede websites.

@layer

@layer er en ny @-regel, der bruges til at organisere prioritetsrækkefølgen af stylesheets i CSS, hvilket gør det muligt at gruppere og håndtere flere CSS-regler i lag. Denne regel er særligt nyttig i store stylesheets eller projekter med flere eksterne stylesheets for at gøre det nemmere at undgå CSS-konflikter.

I CSS-stylesheets bestemmes prioritetsrækkefølgen normalt af 'cascaden', men ved brug af @layer kan du styre stilprioriteter mere fleksibelt og eksplicit.

Grundlæggende syntaks 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • Når du definerer stilarter ved hjælp af @layer, vil syntaksen se sådan ud.
 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}
  • For eksempel kan du definere stilarter i forskellige lag som dette:
  • I dette tilfælde er reset-laget, base-laget og theme-laget defineret henholdsvis, og den endelige h1-stil bestemmes af indholdet i theme-laget, hvilket resulterer i, at color: red; anvendes.

Prioritet af flere lag

Den kraftfulde funktion ved @layer er, at den gør det muligt at styre stilets prioritet mellem lag. I eksemplet ovenfor overskriver theme-laget, da det er defineret sidst, stilarter, der er defineret i andre lag.

Desuden kan @layer bruges til at håndtere prioritetskaskaden i eksterne stylesheets eller CSS-filer, der er indlæst fra andre biblioteker.

Global prioritet 
 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}
  • Rækkefølgen af lag prioriteres inden for CSS-cascaden, hvor stilarter, der er defineret senere, har forrang. For eksempel kan du eksplicit angive rækkefølgen af lag ved at skrive dem sådan.
  • Dette sikrer, at stilarter anvendes i rækkefølgen theme, base og reset, selv hvis theme-laget blev defineret først.

Brug af @import med @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);
  • Ved at kombinere @import og @layer er det også muligt at administrere lag i eksterne stylesheets.
  • Dette gør det muligt at placere eksterne stylesheets i forskellige lag og administrere deres prioritet.

Vigtige punkter ved @layer

@layer er et stærkt værktøj i CSS-stylingsadministration og tilbyder en praktisk metode til at undgå konflikter i store projekter. Det er særligt bemærkelsesværdigt til kortfattet styring af stylingrækkefølge ved flere kildestyles. Det vil være godt at huske følgende punkter.

  • Ved at adskille styles i lag kan du kontrollere lagens cascade-prioritet.
  • Ved at bruge det sammen med @import kan du inkludere eksterne CSS-filer i lagstyring.
  • Ved at definere flere lag kan stilkonflikter undgås.

Dette minimerer kolliderende stilarter og muliggør effektivt design, selv for projekter med kompleks stylingsstyring.

Eksempler på brug af @layer

Når du bruger @layer, kan du overveje punkter som navngivningskonventioner for lag, importrækkefølge og antallet af lag, der passer til projektets omfang.

Navngivning af lag

Lagnavne bestemmes ud fra projektets struktur og formål. Almindelige eksempler på navngivning af lag inkluderer følgende:.

1@layer base, layout, components, utilities;
  • base: Et lag, der definerer grundlæggende stilarter som resets og typografi.
  • layout: Et lag, der definerer stilarterne for sidelayout og gitterstrukturer.
  • components: Et lag, der definerer stilarterne for genanvendelige UI-komponenter som knapper og kort.
  • utilities: Et lag, der definerer stilarter til hjælpeklasser (f.eks. margin, padding, text-center).
Klar importrækkefølge 
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);
  • Når du arbejder med flere CSS-filer, er det vigtigt at angive en klar rækkefølge ved at bruge @import. Denne rækkefølge sikrer, at den tilsigtede prioritet opretholdes.
Sammenlægning og forenkling af lag 
 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}
  • I mindre projekter kan det at begrænse antallet af lag reducere kompleksiteten.

Sammendrag

CSS @-regler er stærke værktøjer, der understøtter fleksibel styling og forbedret ydeevne i webdesign. @media, @keyframes og @supports gør det nemt at style med hensyn til enhedsforskelle og browserkompatibilitet. Desuden muliggør @import og @font-face effektiv integration af eksterne ressourcer for en rigere oplevelse.

Forståelse af og korrekt brug af disse @-regler muliggør mere effektiv CSS-kodning.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-pseudoklasser og -pseudoelementer