Articles
Introduksjon til CSS
CSS-`@`-regler

CSS-`@`-regler

Denne artikkelen forklarer CSS-@-regler.

Du kan lære om bruken av og hvordan du skriver @-regler som @import og @media.

YouTube Video

HTML for 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 spesielle instruksjoner som brukes til å kontrollere oppførsel og anvendelsesforhold for stilark. I motsetning til vanlige CSS-egenskaper, anvender @-regler stiler betinget eller importerer eksterne ressurser. Relevante @-regler inkluderer @media, @import og @keyframes, blant andre.

Typer av eksemplariske @-regler

@import 

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

@import brukes til å importere andre CSS-filer inn i det nåværende stilarket. Dette gjør det enkelt å gjenbruke eksterne CSS-filer.

Punkter:

  • @import må skrives i starten av stilarket.
  • Det bør unngås i store prosjekter på grunn av dets påvirkning på ytelsen.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media bruker mediaforespørsler for å anvende stiler basert på spesifikke forhold (som skjermbredde, oppløsning osv.). Det brukes ofte i implementeringen av responsiv design.

Vanlig brukte betingelser

Følgende er vanlige betingelser som ofte brukes i medieforespørsler.

Betingelser basert 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 stiler når bredden er lik eller større enn den angitte verdien.
  • Maksimal bredde (max-width) anvender stiler når bredden er lik eller mindre enn den angitte verdien.
Enhetsorientering (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}
  • Enhetsorientering (orientation) kan settes til portrett eller landskap.
Oppløsning (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Stiler kan anvendes basert på oppløsning (resolution).
  • I dette eksemplet spesifiseres et bakgrunnsbilde med høy oppløsning for skjermer med høy oppløsning.

Kombinere betingelser

Medieforespørsler 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 stiler når alle betingelsene er oppfylt.
  • I dette eksemplet, når skjermbredden er 600px eller større og i portrettorientering, settes body-bakgrunnsfargen til lysegrønn.
ELLER-betingelse (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • ELLER-betingelsen anvender stiler når en hvilken som helst betingelse er oppfylt.
  • I dette eksemplet, når skjermbredden er 400px eller mindre, eller i landskapsorientering, settes body-tekstfargen til grå.
IKKE-betingelse (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • IKKE-betingelsen anvender stiler når betingelsen ikke er oppfylt.
  • I dette eksemplet, for alle enheter, når skjermbredden ikke er 600px eller større, settes body-skriftstø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 brukes til å definere webfonter. Med denne regelen kan eksterne fonter lastes ned og brukes på en nettside.

  • Egendefinerte fonter kan brukes i stedet for å stole på standardfonter.
  • Oppmerksomhet på fontfilstø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 brukes til å lage CSS-animasjoner. Stiler kan spesifiseres ved hvert steg i en animasjon.

  • Det muliggjør detaljert kontroll av animasjoner.
  • Det brukes i forbindelse med animation-egenskapen.

@supports 

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

@supports sjekker om bestemte CSS-funksjoner støttes av nettleseren og anvender stiler basert på resultatet.

  • Det bidrar til å opprettholde kompatibilitet mellom eldre og nyere nettlesere.
  • Tilbakefallsløsninger kan brukes gjennom funksjonsdeteksjon.

@page 

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

@page brukes til å kontrollere stiler for utskrift. Det er nyttig for å angi sidestørrelse og marger.

Punkter:

  • Det brukes til å sette stiler for trykt media.
  • Du kan også tilpasse stilene for spesifikke sideelementer som overskrifter og bunntekster.

@charset 

1@charset "UTF-8";

@charset spesifiserer tegnkodingen til en CSS-fil. UTF-8 er hovedsakelig spesifisert.

  • Det må spesifiseres i begynnelsen av stilarket.
  • Det brukes spesielt for flerspråklige nettsteder.

@layer

@layer er en ny @-regel som brukes for å organisere prioritet av stilark i CSS, slik at flere CSS-regler kan grupperes og administreres via lag. Denne regelen er spesielt nyttig i store stilark eller prosjekter med flere eksterne stilark for å unngå CSS-konflikter.

I CSS-stilark avgjøres prioritet vanligvis av "cascade", men ved bruk av @layer kan du kontrollere stilprioriteten mer fleksibelt og eksplisitt.

Grunnleggende Syntax 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • Når du definerer stiler med @layer, vil syntaksen være slik.
 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 stiler i forskjellige lag slik:
  • I dette tilfellet er reset-laget, base-laget og theme-laget definert, og den endelige h1-stilen bestemmes av innholdet i theme-laget, der color: red; blir anvendt.

Prioritet av flere lag

Den kraftige funksjonen til @layer er at det gir mulighet til å administrere stilprioriteten mellom lag. I eksempelet ovenfor, siden theme-laget er definert sist, overskriver det stiler definert i andre lag.

I tillegg kan @layer brukes til å administrere prioriteringsrekkefølgen i eksterne stilark eller CSS-filer lastet inn 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}
  • Rekkefølgen av lag prioriteres innenfor CSS-cascade, der stiler definert senere har høyere prioritet. For eksempel kan du eksplisitt spesifisere rekkefølgen på lagene ved å skrive dem slik.
  • Dette sikrer at stiler anvendes i rekkefølgen theme, base og reset, selv om theme-laget ble definert først.

Bruke @import sammen 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 å kombinere @import og @layer er det også mulig å administrere lag i eksterne stilark.
  • Dette gjør det mulig å plassere eksterne stilark i forskjellige lag og administrere deres prioritet.

Nøkkelpunkter for @layer

@layer er et kraftig verktøy i administrasjon av CSS-stiler og gir en praktisk metode for å unngå stilkonflikter i store prosjekter. Det er spesielt kjent for å håndtere stilprioritet på en enkel måte når man arbeider med flere stilkilder. Det er lurt å huske på følgende punkter.

  • Ved å skille stiler etter lag kan du kontrollere rekkefølgen i kaskaden.
  • Ved å bruke det sammen med @import, kan du inkludere eksterne CSS-filer i lagstyringen.
  • Å definere flere lag kan forhindre stilkonflikter.

Dette minimerer stilkollisjoner og gjør det mulig med effektiv design selv i prosjekter som krever kompleks stiladministrasjon.

Eksempler på bruk av @layer

Når du bruker @layer, kan du vurdere punkter som navnekonvensjoner for lag, importrekkefølge og antall lag som passer til prosjektets omfang.

Navngivning av lag

Lagnavn bestemmes basert på prosjektets struktur og formål. Vanlige eksempler på navngivning av lag inkluderer følgende:.

1@layer base, layout, components, utilities;
  • base: Et lag som definerer grunnleggende stiler som nullstilling og typografi.
  • layout: Et lag som definerer stiler for sidens layout og rutenettssystemer.
  • components: Et lag som definerer stiler for gjenbrukbare brukergrensesnittkomponenter som knapper og kort.
  • utilities: Et lag som definerer stiler for hjelpeklasser (f.eks. margin, padding, text-center).
Tydelig importrekkefø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 håndterer flere CSS-filer, er det viktig å sette en tydelig rekkefølge ved bruk av @import. Denne rekkefølgen sikrer at den tiltenkte prioriteten opprettholdes.
Sammenslåing og forenkling av 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 prosjekter kan det å begrense antall lag redusere kompleksiteten.

Sammendrag

CSS @-regler er kraftige verktøy som støtter fleksibel anvendelse av stiler og ytelsesforbedring i webdesign. @media, @keyframes og @supports gjør det enkelt å style med tanke på enhetsforskjeller og nettleserkompatibilitet. I tillegg lar @import og @font-face deg effektivt inkludere eksterne ressurser for rikere uttrykk.

Å forstå og bruke disse @-reglene riktig gjør det mulig å skrive mer effektiv CSS-kode.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS Pseudoklasser og Pseudo-elementer