Articles
Introduktion till CSS
CSS `@`-regler

CSS `@`-regler

Den här artikeln förklarar CSS @-regler.

Du kan lära dig om användningen och hur man skriver @-regler som @import och @media.

YouTube Video

HTML för förhandsgranskning

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) är speciella instruktioner som används för att kontrollera stilmallars beteende och tillämpningsvillkor. Till skillnad från vanliga CSS-egenskaper tillämpas @-regler villkorligt eller importerar externa resurser. Exempel på vanliga @-regler inkluderar @media, @import och @keyframes, bland andra.

Typer av viktiga @-regler

@import 

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

@import används för att importera andra CSS-filer till den nuvarande stilmallen. Detta möjliggör enkel återanvändning av externa CSS-filer.

Punkter:

  • @import måste skrivas i början av stilmallen.
  • Det bör undvikas i stora projekt på grund av dess påverkan på prestandan.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media använder mediefrågor för att tillämpa stilar baserade på specifika villkor (som skärmbredd, upplösning, etc.). Det används ofta vid implementering av responsiv design.

Vanligt använda villkor

Följande är vanliga villkor som ofta används i mediefrågor.

Villkor baserade på bredd 
 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}
  • Minsta bredd (min-width) tillämpar stilar när bredden är lika med eller större än det angivna värdet.
  • Maximal bredd (max-width) tillämpar stilar när bredden är lika med eller mindre än det angivna värdet.
Enhetens 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}
  • Enhetens orientering (orientation) kan ställas in som porträtt eller landskap.
Upplösning (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Stilar kan tillämpas baserat på upplösning (resolution).
  • I detta exempel specificeras en högupplöst bakgrundsbild för högupplösta skärmar.

Kombinera villkor

Mediefrågor kan också kombinera flera villkor.

OCH-villkor (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • OCH-villkoret tillämpar stilar när alla villkor uppfylls.
  • I detta exempel, när skärmens bredd är 600px eller större och i porträttorientering, ställs bodys bakgrundsfärg till ljusgrön.
ELLER-villkor (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • ELLER-villkoret tillämpar stilar när något av villkoren uppfylls.
  • I detta exempel, när skärmens bredd är 400px eller mindre, eller i landskapsorientering, ställs bodys textfärg till grå.
ICKE-villkor (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • ICKE-villkoret tillämpar stilar när villkoret inte uppfylls.
  • I detta exempel, för alla enheter, när skärmens bredd inte är 600px eller större, ställs bodys teckenstorlek till 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 används för att definiera webbfonter. Med denna regel kan externa fonter laddas ner och tillämpas på en webbsida.

  • Anpassade fonter kan användas istället för att förlita sig på standardfonter.
  • Uppmärksamhet på fontfilens storlek är nödvändig.

@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 används för att skapa CSS-animationer. Stilar kan anges vid varje steg i en animation.

  • Det möjliggör detaljerad kontroll av animationer.
  • Det används tillsammans med egenskapen animation.

@supports 

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

@supports kontrollerar om vissa CSS-funktioner stöds av webbläsaren och tillämpar stilar baserat på resultatet.

  • Det hjälper till att bibehålla kompatibilitet mellan äldre och nyare webbläsare.
  • Återlösningar kan tillämpas genom funktionsdetektering.

@page 

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

@page används för att styra stilar för utskrift. Det är användbart för att ställa in sidstorlek och marginaler.

Punkter:

  • Det används för att ställa in stilar för utskriftsmedia.
  • Du kan också anpassa stilarna för specifika sidelement som rubriker och sidfötter.

@charset 

1@charset "UTF-8";

@charset anger teckenkodningen för en CSS-fil. UTF-8 anges oftast.

  • Det måste anges i början av stilmallen.
  • Det används särskilt för flerspråkiga webbplatser.

@layer

@layer är en ny @-regel som används för att organisera prioriteringen av stilmallar i CSS, vilket gör att flera CSS-regler kan grupperas och hanteras i lager. Denna regel är särskilt användbar i stora stilmallar eller projekt som involverar flera externa stilmallar för att underlätta undvikandet av CSS-konflikter.

I CSS-stilmallar bestäms prioritet vanligtvis av 'cascade', men genom att använda @layer kan du kontrollera stilprioritet mer flexibelt och uttryckligt.

Grundläggande syntax 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • När du definierar stilar med @layer ser syntaxen ut så här.
 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}
  • Till exempel kan du definiera stilar i olika lager så här:
  • I detta fall definieras reset-lagret, base-lagret och theme-lagret, och den slutliga h1-stilen bestäms av innehållet i theme-lagret, vilket resulterar i att color: red; tillämpas.

Prioritet för flera lager

Den kraftfulla funktionen i @layer är att den möjliggör hantering av stilprioritet mellan lager. I exemplet ovan, eftersom theme-lagret definieras sist, skriver det över stilar som definierats i andra lager.

Dessutom kan @layer användas för att hantera prioriteringskedjan i externa stilmallar eller CSS-filer som laddas från andra bibliotek.

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}
  • Ordningen på lager prioriteras inom CSS-kaskaden, där stilar som definieras senare har företräde. Till exempel kan du uttryckligen ange ordningen på lager genom att skriva dem så här.
  • Detta säkerställer att stilar tillämpas i ordningen theme, base och reset, även om theme-lagret definierades först.

Använda @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);
  • Genom att kombinera @import och @layer är det också möjligt att hantera lager i externa stilmallar.
  • Detta gör att externa stilmallar kan placeras i olika lager, vilket hanterar deras prioritet.

Viktiga punkter för @layer

@layer är ett kraftfullt verktyg inom CSS-stilhantering som ger en bekväm metod för att undvika stilkonflikter i stora projekt. Det är särskilt anmärkningsvärt för att kortfattat hantera stilprioritet när man arbetar med flera stilkällor. Det är bra att hålla följande punkter i åtanke.

  • Genom att separera stilar i lager kan du kontrollera kaskadprioriteten.
  • Genom att använda detta tillsammans med @import kan du inkludera externa CSS-filer i lagerhanteringen.
  • Genom att definiera flera lager kan stilkonflikter undvikas.

Detta minimerar stilkollisioner och möjliggör effektiv design även i projekt som kräver komplex stilhantering.

Exempel på användning av @layer

När du använder @layer kan du överväga punkter som namngivningskonventioner för lager, importordning och antalet lager som är lämpliga för projektets omfattning.

Namngivning av lager

Lagernamn fastställs baserat på projektets struktur och syfte. Vanliga exempel på lagernamn inkluderar följande:.

1@layer base, layout, components, utilities;
  • base: Ett lager som definierar grundstilar som resets och typografi.
  • layout: Ett lager som definierar stilar för sidlayout och rutnätssystem.
  • components: Ett lager som definierar stilar för återanvändbara UI-komponenter som knappar och kort.
  • utilities: Ett lager som definierar stilar för hjälpklasser (t.ex. margin, padding, text-center).
Tydlig importordning 
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 hanterar flera CSS-filer är det viktigt att ställa in en tydlig ordning med hjälp av @import. Denna ordning säkerställer att avsedd prioritet upprätthålls.
Konsolidering och förenkling av lager 
 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 projekt kan begränsning av antalet lager minska komplexiteten.

Sammanfattning

CSS @-regler är kraftfulla verktyg som stödjer flexibel stiltillämpning och prestandaförbättring i webbdesign. @media, @keyframes och @supports gör det enkelt att anpassa stilar med hänsyn till enhetsskillnader och webbläsarens kompatibilitet. Dessutom tillåter @import och @font-face effektiv integrering av externa resurser för rikare uttryck.

Att förstå och korrekt använda dessa @-regler möjliggör mer effektiv CSS-kodning.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS Pseudo-klasser och Pseudo-element