Regole CSS `@`

Articles

Regole CSS `@`

Questo articolo spiega le regole CSS @.

Puoi imparare l'uso e come scrivere regole @ come @import e @media.

YouTube Video

HTML per Anteprima

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>

Regole CSS `@`

Le regole CSS @ (at-rules) sono istruzioni speciali utilizzate per controllare il comportamento e le condizioni di applicazione dei fogli di stile. A differenza delle normali proprietà CSS, le regole @ applicano stili o importano risorse esterne in modo condizionale. Le regole @ rappresentative includono @media, @import e @keyframes, tra le altre.

Tipi di Regole Esemplari `@`

`@import`

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

@import viene utilizzato per importare altri file CSS nel foglio di stile corrente. Ciò consente un facile riutilizzo dei file CSS esterni.

Punti:

@import deve essere scritto all'inizio del foglio di stile.
Dovrebbe essere evitato in progetti di grandi dimensioni a causa del suo impatto sulle prestazioni.

`@media`

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

@media utilizza le media queries per applicare stili in base a condizioni specifiche (come larghezza dello schermo, risoluzione, ecc.). È frequentemente utilizzato nell'implementazione del design responsivo.

Condizioni Comunemente Usate

Di seguito sono elencate le condizioni comuni spesso utilizzate nelle query multimediali.

Condizioni basate sulla larghezza

 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}

Larghezza minima (min-width) applica gli stili quando la larghezza è uguale o maggiore del valore specificato.
Larghezza massima (max-width) applica gli stili quando la larghezza è uguale o inferiore al valore specificato.

Orientamento del dispositivo (`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}

L'orientamento del dispositivo (orientation) può essere impostato su portrait (verticale) o landscape (orizzontale).

Risoluzione (`resolution`)

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

Gli stili possono essere applicati in base alla risoluzione (resolution).
In questo esempio, un'immagine di sfondo ad alta risoluzione è specificata per schermi ad alta risoluzione.

Combinazione di condizioni

Le query multimediali possono anche combinare più condizioni.

Condizione AND (`and`)

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

La condizione AND applica gli stili quando tutte le condizioni sono soddisfatte.
In questo esempio, quando la larghezza dello schermo è pari o superiore a 600px e in orientamento verticale, il colore di sfondo del body è impostato su verde chiaro.

Condizione OR (`,`)

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

La condizione OR applica gli stili quando una qualunque condizione è soddisfatta.
In questo esempio, quando la larghezza dello schermo è pari o inferiore a 400px, o in orientamento orizzontale, il colore del testo del body è impostato su grigio.

Condizione NOT (`not`)

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

La condizione NOT applica gli stili quando la condizione non è soddisfatta.
In questo esempio, per tutti i dispositivi, quando la larghezza dello schermo non è pari o superiore a 600px, la dimensione del carattere del body è impostata a 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 viene utilizzato per definire i font web. Con questa regola, i font esterni possono essere scaricati e applicati a una pagina web.

Possono essere utilizzati font personalizzati invece di font standard.
È necessaria attenzione alla dimensione dei file dei font.

`@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 viene utilizzato per creare animazioni CSS. Gli stili possono essere specificati a ogni fase di un'animazione.

Consente un controllo dettagliato delle animazioni.
È utilizzato in combinazione con la proprietà animation.

`@supports`

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

@supports verifica se determinate funzionalità CSS sono supportate dal browser e applica gli stili in base al risultato.

Aiuta a mantenere la compatibilità tra browser vecchi e nuovi.
È possibile applicare soluzioni alternative attraverso il rilevamento delle funzionalità.

`@page`

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

@page viene utilizzato per controllare gli stili per la stampa. È utile per impostare la dimensione della pagina e i margini.

Punti:

È utilizzato per impostare gli stili per i supporti di stampa.
Puoi anche personalizzare gli stili di specifici elementi della pagina, come intestazioni e piè di pagina.

`@charset`

1@charset "UTF-8";

@charset specifica la codifica dei caratteri di un file CSS. UTF-8 è principalmente specificato.

Deve essere specificato all'inizio del foglio di stile.
È particolarmente utilizzato per siti web multilingue.

`@layer`

@layer è una nuova regola @ che viene utilizzata per organizzare la precedenza dei fogli di stile in CSS, consentendo di raggruppare e gestire più regole CSS tramite i livelli. Questa regola è particolarmente utile nei fogli di stile di grandi dimensioni o nei progetti che implicano più fogli di stile esterni per evitare conflitti CSS.

Nei fogli di stile CSS, la precedenza è solitamente determinata dalla 'cascata', ma utilizzando @layer, è possibile controllare la precedenza degli stili in modo più flessibile ed esplicito.

Sintassi di Base

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

Quando si definiscono stili utilizzando @layer, la sintassi sarebbe simile a questa.

 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}

Ad esempio, è possibile definire stili in diversi layer come segue:
In questo caso, vengono definiti rispettivamente i livelli reset, base e theme, e lo stile finale di h1 è determinato dal contenuto del livello theme, applicando color: red;.

Priorità di più layer

La funzione potente di @layer è che consente di gestire la priorità degli stili tra i livelli. Nell'esempio sopra, poiché il livello theme è definito per ultimo, sovrascrive gli stili definiti in altri livelli.

Inoltre, @layer può essere utilizzato per gestire la cascata di priorità nei fogli di stile esterni o nei file CSS caricati da altre librerie.

Priorità globale

 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}

L'ordine dei livelli ha la priorità all'interno della cascata CSS, con gli stili definiti successivamente che prendono la precedenza. Ad esempio, è possibile specificare esplicitamente l'ordine dei livelli scrivendoli così.
Questo garantisce che gli stili siano applicati nell'ordine di theme, base e reset, anche se il layer theme è stato definito per primo.

Utilizzo di `@import` con `@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);

Combinando @import e @layer, è anche possibile gestire i livelli nei fogli di stile esterni.
Ciò consente ai fogli di stile esterni di essere collocati in livelli diversi, gestendo la loro priorità.

Punti chiave di `@layer`

@layer è uno strumento potente nella gestione degli stili CSS, che offre un metodo pratico per evitare conflitti di stile nei grandi progetti. È particolarmente interessante per gestire in modo conciso la precedenza degli stili quando si utilizzano più fonti di stile. Sarebbe utile tenere a mente i seguenti punti.

Separando gli stili per livelli, è possibile controllare la precedenza nella cascata.
Utilizzandolo insieme a @import, è possibile includere file CSS esterni nella gestione dei livelli.
Definire più livelli può prevenire conflitti di stile.

Ciò minimizza le collisioni di stile e consente un design efficiente anche in progetti che richiedono una gestione complessa degli stili.

Esempi di utilizzo di `@layer`

Quando si utilizza @layer, è possibile considerare aspetti come le convenzioni di denominazione dei layer, l'ordine di importazione e il numero di layer appropriati alla scala del progetto.

Denominazione dei Layer

I nomi dei layer sono determinati in base alla struttura e agli obiettivi del progetto. Gli esempi comuni di denominazione dei layer includono i seguenti:.

1@layer base, layout, components, utilities;

base: Un layer che definisce stili di base, come reset e tipografia.
layout: Un layer che definisce gli stili per il layout delle pagine e i sistemi a griglia.
components: Un layer che definisce gli stili per i componenti riutilizzabili dell'interfaccia utente, come pulsanti e schede.
utilities: Un layer che definisce gli stili per le classi utility (ad esempio, margin, padding, text-center).

Ordine di Importazione Chiaro

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

Quando si gestiscono più file CSS, è importante impostare un ordine chiaro utilizzando @import. Questo ordine garantisce il mantenimento della priorità desiderata.

Consolidamento e Semplificazione dei 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}

Nei progetti di piccola scala, limitare il numero di layer può ridurre la complessità.

Riepilogo

Le regole CSS @ sono strumenti potenti che supportano un'applicazione flessibile degli stili e il miglioramento delle prestazioni nel web design. @media, @keyframes e @supports semplificano lo styling tenendo conto delle differenze tra dispositivi e della compatibilità dei browser. Inoltre, @import e @font-face consentono un'incorporazione efficiente di risorse esterne per un'espressione più ricca.

Comprendere e utilizzare correttamente queste regole @ consente una codifica CSS più efficace.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Pseudo-classi e Pseudo-elementi CSS

Regole CSS `@`

YouTube Video

HTML per Anteprima

Regole CSS @

Tipi di Regole Esemplari @

@import

Punti:

@media

Condizioni Comunemente Usate

Condizioni basate sulla larghezza

Orientamento del dispositivo (orientation)

Risoluzione (resolution)

Combinazione di condizioni

Condizione AND (and)

Condizione OR (,)

Condizione NOT (not)

@font-face

@keyframes

@supports

@page

Punti:

@charset

@layer

Sintassi di Base

Priorità di più layer

Priorità globale

Utilizzo di @import con @layer

Punti chiave di @layer

Esempi di utilizzo di @layer

Denominazione dei Layer

Ordine di Importazione Chiaro

Consolidamento e Semplificazione dei Layer

Riepilogo

YouTube Video

Regole CSS `@`

Tipi di Regole Esemplari `@`

`@import`

`@media`

Orientamento del dispositivo (`orientation`)

Risoluzione (`resolution`)

Condizione AND (`and`)

Condizione OR (`,`)

Condizione NOT (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

Utilizzo di `@import` con `@layer`

Punti chiave di `@layer`

Esempi di utilizzo di `@layer`