Règles CSS `@`

Articles

Règles CSS `@`

Cet article explique les règles CSS @.

Vous pouvez apprendre à utiliser et à écrire des règles @ comme @import et @media.

YouTube Video

HTML pour l'aperçu

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>

Règles CSS `@`

Les règles CSS @ (règles at) sont des instructions spéciales utilisées pour contrôler le comportement et les conditions d'application des feuilles de style. Contrairement aux propriétés CSS normales, les règles @ appliquent conditionnellement des styles ou importent des ressources externes. Les règles @ représentatives incluent @media, @import et @keyframes, entre autres.

Types de règles `@` exemplaires

`@import`

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

@import est utilisé pour importer d'autres fichiers CSS dans la feuille de style actuelle. Cela permet une réutilisation facile des fichiers CSS externes.

Points :

@import doit être écrit au début de la feuille de style.
Il faut l'éviter dans les grands projets en raison de son impact sur les performances.

`@media`

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

@media utilise des requêtes media pour appliquer des styles en fonction de conditions spécifiques (comme la largeur d'écran, la résolution, etc.). Il est fréquemment utilisé dans l'implémentation du design responsive.

Conditions couramment utilisées

Voici des conditions couramment utilisées dans les media queries.

Conditions basées sur la largeur

 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}

Largeur minimale (min-width) applique les styles lorsque la largeur est égale ou supérieure à la valeur spécifiée.
Largeur maximale (max-width) applique les styles lorsque la largeur est égale ou inférieure à la valeur spécifiée.

Orientation de l'appareil (`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'orientation de l'appareil (orientation) peut être définie sur portrait ou paysage.

Résolution (`resolution`)

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

Les styles peuvent être appliqués en fonction de la résolution (resolution).
Dans cet exemple, une image d'arrière-plan haute résolution est spécifiée pour les écrans à haute résolution.

Combinaison des conditions

Les media queries peuvent également combiner plusieurs conditions.

Condition ET (`and`)

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

La condition ET applique les styles lorsque toutes les conditions sont remplies.
Dans cet exemple, lorsque la largeur de l'écran est de 600px ou plus et que l'orientation est portrait, la couleur d'arrière-plan du body est définie sur vert clair.

Condition OU (`,`)

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

La condition OU applique les styles lorsque l'une des conditions est remplie.
Dans cet exemple, lorsque la largeur de l'écran est de 400px ou moins, ou que l'orientation est paysage, la couleur du texte du body est définie sur gris.

Condition NON (`not`)

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

La condition NON applique les styles lorsque la condition n'est pas remplie.
Dans cet exemple, pour tous les appareils, lorsque la largeur de l'écran n'est pas de 600px ou plus, la taille de la police du body est définie sur 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 est utilisé pour définir des polices web. Avec cette règle, des polices externes peuvent être téléchargées et appliquées à une page web.

Des polices personnalisées peuvent être utilisées à la place des polices standards.
Il est nécessaire de faire attention à la taille des fichiers de police.

`@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 est utilisé pour créer des animations CSS. Les styles peuvent être spécifiés pour chaque étape d'une animation.

Cela permet de contrôler les animations de manière détaillée.
Il est utilisé en conjonction avec la propriété animation.

`@supports`

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

@supports vérifie si certaines fonctionnalités CSS sont prises en charge par le navigateur et applique des styles en fonction du résultat.

Cela aide à maintenir la compatibilité entre les anciens et les nouveaux navigateurs.
Des solutions alternatives peuvent être appliquées grâce à la détection des fonctionnalités.

`@page`

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

@page est utilisé pour contrôler les styles d'impression. C'est utile pour définir la taille de la page et les marges.

Points :

Il est utilisé pour définir des styles pour les supports d'impression.
Vous pouvez également personnaliser les styles de certains éléments de la page, comme les en-têtes et les pieds de page.

`@charset`

1@charset "UTF-8";

@charset spécifie l'encodage des caractères d'un fichier CSS. UTF-8 est principalement spécifié.

Il doit être spécifié au début de la feuille de style.
Il est particulièrement utilisé pour les sites web multilingues.

`@layer`

@layer est une nouvelle règle @ utilisée pour organiser la priorité des feuilles de style en CSS, permettant de regrouper et de gérer plusieurs règles CSS par couches. Cette règle est particulièrement utile dans les grandes feuilles de style ou les projets impliquant plusieurs feuilles de style externes pour éviter les conflits CSS.

Dans les feuilles de style CSS, la priorité est généralement déterminée par la 'cascade', mais en utilisant @layer, vous pouvez contrôler la priorité des styles de manière plus flexible et explicite.

Syntaxe de base

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

Lors de la définition de styles à l'aide de @layer, la syntaxe serait comme suit.

 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}

Par exemple, vous pouvez définir des styles dans différentes couches comme suit :
Dans ce cas, les couches reset, base et theme sont définies respectivement, et le style final de h1 est déterminé par le contenu de la couche theme, ce qui applique color: red;.

Priorité de plusieurs couches

La fonctionnalité puissante de @layer est qu'elle permet de gérer la priorité des styles entre les couches. Dans l'exemple ci-dessus, comme la couche theme est définie en dernier, elle écrase les styles définis dans les autres couches.

De plus, @layer peut être utilisé pour gérer la cascade de priorité dans les feuilles de style externes ou les fichiers CSS chargés depuis d'autres bibliothèques.

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'ordre des couches est priorisé dans la cascade CSS, les styles définis plus tard prenant la priorité. Par exemple, vous pouvez spécifier explicitement l'ordre des couches en les écrivant ainsi.
Cela garantit que les styles sont appliqués dans l'ordre de theme, base et reset, même si la couche theme a été définie en premier.

Utiliser `@import` avec `@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);

En combinant @import et @layer, il est également possible de gérer des couches dans des feuilles de style externes.
Cela permet de placer les feuilles de style externes dans différentes couches, en gérant leur priorité.

Points clés de `@layer`

@layer est un outil puissant pour la gestion des styles CSS, offrant une méthode pratique pour éviter les conflits de styles dans les grands projets. Il est particulièrement remarquable pour gérer la priorité des styles de manière concise lors de l'utilisation de multiples sources de styles. Il serait bon de garder à l'esprit les points suivants.

En séparant les styles par couches, vous pouvez contrôler la priorité de la cascade.
En l'utilisant avec @import, vous pouvez inclure des fichiers CSS externes dans la gestion des couches.
Définir plusieurs couches peut prévenir les conflits de style.

Cela minimise les collisions de style et permet un design efficace, même dans les projets nécessitant une gestion complexe des styles.

Exemples d'utilisation de `@layer`

Lors de l'utilisation de @layer, vous pouvez prendre en compte des points tels que les conventions de nommage des couches, l'ordre d'importation et le nombre de couches approprié à l'échelle du projet.

Nom des couches

Les noms des couches sont déterminés en fonction de la structure et de l'objectif du projet. Voici des exemples courants de nommage des couches :.

1@layer base, layout, components, utilities;

base : Une couche qui définit les styles de base tels que les resets et la typographie.
layout : Une couche qui définit les styles pour la mise en page et les systèmes de grille.
components : Une couche qui définit les styles pour les composants UI réutilisables tels que les boutons et les cartes.
utilities : Une couche qui définit les styles pour les classes utilitaires (par ex., margin, padding, text-center).

Ordre d'importation clair

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

Lors de la gestion de plusieurs fichiers CSS, il est important de définir un ordre clair à l'aide de @import. Cet ordre garantit que la priorité souhaitée est respectée.

Consolidation et simplification des couches

 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}

Dans les projets de petite envergure, limiter le nombre de couches peut réduire la complexité.

Résumé

Les règles CSS @ sont des outils puissants qui favorisent une application flexible des styles et une amélioration des performances dans la conception web. @media, @keyframes et @supports facilitent le style en tenant compte des différences entre les appareils et de la compatibilité des navigateurs. De plus, @import et @font-face permettent l'intégration efficace de ressources externes pour une expression plus riche.

Comprendre et utiliser correctement ces règles @ permet un codage CSS plus efficace.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Pseudo-classes et pseudo-éléments CSS

Règles CSS `@`

YouTube Video

HTML pour l'aperçu

Règles CSS @

Types de règles @ exemplaires

@import

Points :

@media

Conditions couramment utilisées

Conditions basées sur la largeur

Orientation de l'appareil (orientation)

Résolution (resolution)

Combinaison des conditions

Condition ET (and)

Condition OU (,)

Condition NON (not)

@font-face

@keyframes

@supports

@page

Points :

@charset

@layer

Syntaxe de base

Priorité de plusieurs couches

Priorité globale

Utiliser @import avec @layer

Points clés de @layer

Exemples d'utilisation de @layer

Nom des couches

Ordre d'importation clair

Consolidation et simplification des couches

Résumé

YouTube Video

Règles CSS `@`

Types de règles `@` exemplaires

`@import`

`@media`

Orientation de l'appareil (`orientation`)

Résolution (`resolution`)

Condition ET (`and`)

Condition OU (`,`)

Condition NON (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

Utiliser `@import` avec `@layer`

Points clés de `@layer`

Exemples d'utilisation de `@layer`