Caractères spéciaux et fonctions dans CSS

Articles

Cet article explique les caractères spéciaux et les fonctions en CSS.

Vous pouvez apprendre à propos des caractères spéciaux et des fonctions comme calc() et var() dans CSS.

YouTube Video

HTML pour l'aperçu

css-escape-and-function.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 Pseudo Class/Element</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-escape-and-function.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Special Characters &amp; Functions</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Special Characters</h2></header>
 19        <article>
 20            <h3>CSS Special Characters</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24#my\#id {
 25    color: red;
 26}
 27
 28#my\.id {
 29    color: red;
 30}
 31
 32#my\[id\] {
 33    color: red;
 34}
 35</pre>
 36                <header><h4>HTML</h4></header>
 37<pre>
 38&lt;div id="my.id"&gt;Dot Example&lt;/div&gt;
 39&lt;div id="my[id]"&gt;Bracket Example&lt;/div&gt;
 40&lt;div id="my#id"&gt;Sharp Example&lt;/div&gt;
 41</pre>
 42                <header><h4>HTML+CSS</h4></header>
 43                <section class="sample-view">
 44                    <div id="my#id">Sharp Example</div>
 45                    <div id="my.id">Dot Example</div>
 46                    <div id="my[id]">Bracket Example</div>
 47                </section>
 48            </section>
 49        </article>
 50        <article>
 51            <h3>CSS Special Characters</h3>
 52            <section>
 53                <header><h4>CSS</h4></header>
 54<pre class="sample">
 55.\31 23abc {
 56    font-weight: bold;
 57    color: blue;
 58}
 59</pre>
 60                <header><h4>HTML</h4></header>
 61<pre>
 62&lt;div class="123abc"&gt;Numeric Class&lt;/div&gt;
 63</pre>
 64                <header><h4>HTML+CSS</h4></header>
 65                <section class="sample-view">
 66                    <div class="123abc">Numeric Class</div>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>CSS Special Characters</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.content-unicode::before {
 76    content: "\00A9"; /* copyright mark */
 77    color: blue;
 78}
 79
 80.content-backslash::after {
 81    content: " : \\";
 82    color: blue;
 83}
 84</pre>
 85                <header><h4>HTML</h4></header>
 86<pre>
 87&lt;div class="content-unicode"&gt;Copyright&lt;/div&gt;
 88&lt;div class="content-backslash"&gt;This is a backslash example&lt;/div&gt;
 89</pre>
 90                <header><h4>HTML+CSS</h4></header>
 91                <section class="sample-view">
 92                    <div class="content-unicode">Copyright</div>
 93                    <div class="content-backslash">This is a backslash example</div>
 94                </section>
 95            </section>
 96        </article>
 97        <article>
 98            <h3>CSS Special Characters</h3>
 99            <section>
100                <header><h4>CSS</h4></header>
101<pre class="sample">
102.user\@name {
103  color: green;
104}
105
106#section\$ {
107  font-size: 24px;
108  color: blue;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;user@name&quot;&gt;User&lt;/div&gt;
114&lt;div id=&quot;section$&quot;&gt;Section&lt;/div&gt;
115</pre>
116                <header><h4>HTML+CSS</h4></header>
117                <section class="sample-view">
118                    <div class="user@name">User</div>
119                    <div id="section$">Section</div>
120                </section>
121            </section>
122        </article>
123    </main>
124
125    <main>
126        <header><h2>CSS Functions</h2></header>
127        <article>
128            <h3>calc()</h3>
129            <section>
130                <header><h4>CSS</h4></header>
131<pre class="sample">
132p.calc-width {
133    width: calc(50% - 10px);
134}
135</pre>
136                <header><h4>HTML</h4></header>
137<pre>
138&lt;p class="calc-width"&gt;
139    &lt;span&gt;First Text&lt;/span&gt;
140&lt;/p&gt;
141</pre>
142                <header><h4>HTML+CSS</h4></header>
143                <section class="sample-view">
144                    <p class="calc-width">
145                        <span>First Text</span>
146                    </p>
147                </section>
148            </section>
149        </article>
150        <article>
151            <h3>rgb() / rgba()</h3>
152            <section>
153                <header><h4>CSS</h4></header>
154<pre class="sample">
155p.rgb {
156    background-color: rgb(255, 0, 0);
157}
158
159p.rgb span {
160    background-color: rgba(0, 255, 0, 0.5);
161}
162</pre>
163                <header><h4>HTML</h4></header>
164<pre>
165&lt;p class="rgb"&gt;
166    &lt;span&gt;First Text&lt;/span&gt;
167&lt;/p&gt;
168</pre>
169                <header><h4>HTML+CSS</h4></header>
170                <section class="sample-view">
171                    <p class="rgb">
172                        <span>First Text</span>
173                    </p>
174                </section>
175            </section>
176        </article>
177        <article>
178            <h3>hsl() / hsla()</h3>
179            <section>
180                <header><h4>CSS</h4></header>
181<pre class="sample">
182p.hsl {
183    /* Specify hue, saturation, and lightness */
184    background-color: hsl(240, 25%, 50%);
185}
186
187p.hsl span {
188    /* Specification with transparency */
189    background-color: hsla(120, 100%, 50%, 0.5);
190}
191</pre>
192                <header><h4>HTML</h4></header>
193<pre>
194&lt;p class="hsl"&gt;
195    &lt;span&gt;First Text&lt;/span&gt;
196&lt;/p&gt;
197</pre>
198                <header><h4>HTML+CSS</h4></header>
199                <section class="sample-view">
200                    <p class="hsl">
201                        <span>First Text</span>
202                    </p>
203                </section>
204            </section>
205        </article>
206        <article>
207            <h3>url()</h3>
208            <section>
209                <header><h4>CSS</h4></header>
210<pre class="sample">
211div.bg-image {
212    background-image: url('image.jpg');
213}
214</pre>
215                <header><h4>HTML</h4></header>
216<pre>
217&lt;div class="bg-image"&gt;
218    &lt;span&gt;First Text&lt;/span&gt;
219&lt;/div&gt;
220</pre>
221                <header><h4>HTML+CSS</h4></header>
222                <section class="sample-view">
223                    <div class="bg-image">
224                        <span>First Text</span>
225                    </div>
226                </section>
227            </section>
228        </article>
229        <article>
230            <h3>var()</h3>
231            <section>
232                <header><h4>CSS</h4></header>
233<pre class="sample">
234/* Definition of custom properties */
235:root {
236    --main-color: #3498db;
237}
238
239/* Use of custom properties */
240p.main-color {
241    color: var(--main-color);
242}
243</pre>
244                <header><h4>HTML</h4></header>
245<pre>
246&lt;p class="main-color"&gt;
247    &lt;span&gt;First Text&lt;/span&gt;
248&lt;/p&gt;
249</pre>
250                <header><h4>HTML+CSS</h4></header>
251                <section class="sample-view">
252                    <p class="main-color">
253                        <span>First Text</span>
254                    </p>
255                </section>
256            </section>
257        </article>
258        <article>
259            <h3>attr()</h3>
260            <section>
261                <header><h4>CSS</h4></header>
262<pre class="sample">
263/* Example of using the attr() function */
264a::after {
265    content: " (" attr(title) ")";
266}
267</pre>
268                <header><h4>HTML</h4></header>
269<pre>
270&lt;a href="#section1" title="Section 1"&gt;Click here&lt;/a&gt;
271</pre>
272                <header><h4>HTML+CSS</h4></header>
273                <section class="sample-view">
274                    <a href="#section1" title="Section 1">Click here</a>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>min() / max() / clamp()</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283div.min {
284    /* Use the smaller value between 100% and 500px as the width */
285    width: min(100%, 500px);
286}
287div.max {
288    /* Use the larger value between 100% and 500px as the width */
289    width: max(100%, 500px);
290}
291div.clamp {
292    /* Adjust to fit within the range of 300px to 600px */
293    width: clamp(100px, 30%, 400px);
294}
295</pre>
296                <header><h4>HTML</h4></header>
297<pre>
298&lt;div class="min"&gt;min(100%, 500px)&lt;/div&gt;
299&lt;div class="max"&gt;max(100%, 500px)&lt;/div&gt;
300&lt;div class="clamp"&gt;clamp(100px, 30%, 400px)&lt;/div&gt;
301</pre>
302                <header><h4>HTML+CSS</h4></header>
303                <section class="sample-view">
304                    <div class="min">min(100%, 500px)</div>
305                    <div class="max">max(100%, 500px)</div>
306                    <div class="clamp">clamp(100px, 30%, 400px)</div>
307                </section>
308            </section>
309        </article>
310        <article>
311            <h3>repeat()</h3>
312            <section>
313                <header><h4>CSS</h4></header>
314<pre class="sample">
315/* Set three columns to be evenly spaced */
316grid-template-columns: repeat(3, 1fr);
317</pre>
318            </section>
319        </article>
320        <article>
321            <h3>linear-gradient() / radial-gradient() / conic-gradient()</h3>
322            <section>
323                <header><h4>CSS</h4></header>
324<pre class="sample">
325div.linear-gradient {
326    /* Linear gradient */
327    background: linear-gradient(to right, red, blue);
328}
329div.radial-gradient {
330    /* Radial gradient */
331    background: radial-gradient(circle, red, blue);
332}
333div.conic-gradient {
334    /* Conic gradient */
335    background: conic-gradient(from 0deg, red, yellow, blue, red);
336}
337</pre>
338                <header><h4>HTML</h4></header>
339<pre>
340&lt;div class="linear-gradient"&gt;linear-gradient&lt;/div&gt;
341&lt;div class="radial-gradient"&gt;radial-gradient&lt;/div&gt;
342&lt;div class="conic-gradient"&gt;radial-gradient&lt;/div&gt;
343</pre>
344                <header><h4>HTML+CSS</h4></header>
345                <section class="sample-view">
346                    <div class="linear-gradient">linear-gradient</div>
347                    <div class="radial-gradient">radial-gradient</div>
348                    <div class="conic-gradient">conic-gradient</div>
349                </section>
350            </section>
351        </article>
352    </main>
353</body>
354</html>

Caractères spéciaux et échappement en CSS

Les caractères d'échappement CSS sont des techniques pour gérer en toute sécurité certains caractères. En échappant les symboles spéciaux ou les caractères ayant une signification syntaxique, vous pouvez les utiliser en toute sécurité dans les sélecteurs ou les chaînes.

Aperçu des caractères d'échappement CSS

L'échappement CSS est un mécanisme pour échapper certains caractères ou Unicode afin qu'ils puissent être utilisés dans des sélecteurs en suivant des règles syntaxiques spécifiques. Par exemple, lorsque les ID ou noms de classe d'éléments HTML contiennent des symboles spéciaux (#, @, . etc.), ou lorsqu'il s'agit de noms de classe ou d'ID commençant par des chiffres, les caractères d'échappement sont utiles.

L'échappement est principalement utilisé pour les objectifs suivants :

Utilisation de caractères spéciaux comme sélecteurs
Gestion des identifiants ou noms de classes qui commencent par des chiffres
Échapper les symboles spéciaux ou les caractères non ASCII

Syntaxe d'échappement de base

Les caractères d'échappement sont écrits en CSS en utilisant le caractère de barre oblique inverse (\). En plaçant une barre oblique inverse avant les caractères à échapper, ceux-ci sont interprétés comme des caractères normaux.

Échapper les caractères spéciaux

1<div id="my#id">Sharp Example</div>
2<div id="my.id">Dot Example</div>
3<div id="my[id]">Bracket Example</div>

 1#my\#id {
 2    color: red;
 3}
 4
 5#my\.id {
 6    color: red;
 7}
 8
 9#my\[id\] {
10    color: red;
11}

Comme dans cet exemple, l'échappement est nécessaire lors de l'utilisation de caractères spéciaux dans les sélecteurs CSS.
#, ., [, et ] sont des caractères spéciaux en CSS. Si ces caractères sont inclus dans des ID, l'échappement est nécessaire.

Échapper les identifiants ou les noms de classes commençant par des chiffres

1<div class="123abc">Numeric Class</div>

1.\31 23abc {
2    font-weight: bold;
3    color: blue;
4}

En CSS, si un ID ou un nom de classe commence par un chiffre, il est invalide de l'écrire directement. Dans de tels cas, utilisez l'échappement.
Ici, nous échappons le 1 au début de 123abc. 1 est représenté comme Unicode U+0031 et échappé avec une barre oblique inverse et un espace comme \31 .

Échapper les caractères Unicode

1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3    content: "\00A9"; /* copyright symbol */
4    color: blue;
5}

Lors de l'échappement de caractères Unicode, spécifiez un nombre hexadécimal à 6 chiffres après la barre oblique inverse.
Ce code montre comment afficher © (symbole du copyright) en CSS.

Échapper à l'intérieur des chaînes

1.content-backslash::after {
2    content: " : \\";
3    color: blue;
4}

Lors de l'utilisation d'une barre oblique inverse dans des chaînes en CSS (comme pour la propriété content), il doit s'agir d'une double barre oblique inverse.
Dans cet exemple, \\ est écrit pour afficher une barre oblique inverse dans la chaîne.

Exemple Pratique : Style des Éléments HTML avec des Caractères Spéciaux

1<div class="user@name">User</div>
2<div id="section$">Section</div>

 1/* When the class name contains special characters */
 2.user\@name {
 3    color: green;
 4}
 5
 6/* When the ID contains special characters */
 7#section\$ {
 8    font-size: 24px;
 9    color: blue;
10}

Ici, nous échappons les éléments contenant des caractères spéciaux @ et $.

Résumé

Les caractères d'échappement CSS sont très utiles pour gérer correctement les sélecteurs et les chaînes dans des cas particuliers. Comprendre quand l'échappement est nécessaire aide à éviter les erreurs lors du style d'éléments HTML complexes. Surtout lorsqu'il s'agit de noms de classe ou d'ID commençant par des caractères spéciaux ou des chiffres, l'échappement avec une barre oblique inverse est essentiel.

Fonctions en CSS

En CSS, vous pouvez utiliser des fonctions pour spécifier ou calculer dynamiquement des styles. Ici, nous présentons quelques fonctions CSS typiques.

`calc()`

1p.calc-width {
2    /* Specify the value obtained by subtracting 10px from 50% width */
3    width: calc(50% - 10px);
4    background-color: #eee;
5}

La fonction calc() est utilisée pour calculer dynamiquement des valeurs comme la largeur et la hauteur des éléments. Vous pouvez utiliser les opérateurs +, -, *, / pour combiner des valeurs relatives (%) et des valeurs absolues (px) dans les mises en page.

`rgb()` / `rgba()`

1p.rgb {
2    /* Color specification for red, green, and blue */
3    background-color: rgb(255, 0, 0);
4}
5
6p.rgb span {
7    /* Color specification with transparency */
8    background-color: rgba(0, 255, 0, 0.5);
9}

Les fonctions rgb() et rgba() sont utilisées pour spécifier des couleurs. rgb() spécifie trois valeurs pour le rouge, le vert et le bleu (allant de 0 à 255), tandis que rgba() inclut également une valeur alpha pour la transparence.

`hsl()` / `hsla()`

1p.hsl {
2    /* Specify hue, saturation, and lightness */
3    background-color: hsl(240, 25%, 50%);
4}
5
6p.hsl span {
7    /* Specification with transparency */
8    background-color: hsla(120, 100%, 50%, 0.5);
9}

hsl() et hsla() utilisent la teinte, la saturation et la luminosité pour spécifier les couleurs. hsla() peut également spécifier la transparence.

`url()`

1div.bg-image {
2    background-image: url('image.jpg');
3}

La fonction url() est utilisée pour spécifier des chemins vers des images d'arrière-plan ou d'autres ressources.

`var()`

1/* Definition of custom properties */
2:root {
3    --main-color: #3498db;
4}
5
6/* Use of custom properties */
7p.main-color {
8    color: var(--main-color);
9}

La fonction var() est utilisée pour manipuler les propriétés personnalisées (variables CSS). Vous pouvez définir des variables CSS et les utiliser dans d'autres propriétés.

`attr()`

1/* Example of using the attr() function */
2a::after {
3    content: " (" attr(title) ")";
4}

La fonction attr() est utilisée pour exploiter les valeurs des attributs HTML dans les styles CSS. Elle est principalement utilisée dans la propriété content des pseudo-éléments pour afficher dynamiquement les valeurs d'attributs des éléments. Cependant, elle nécessite de la prudence car la prise en charge par les navigateurs est limitée.

`min()` / `max()` / `clamp()`

 1div.min {
 2    /* Use the smaller value between 100% and 500px as the width */
 3    width: min(100%, 500px);
 4    background-color: lightsteelblue;
 5}
 6div.max {
 7    /* Use the larger value between 100% and 500px as the width */
 8    width: max(100%, 500px);
 9    background-color: lightsteelblue;
10}
11div.clamp {
12    /* Adjust to fit within the range of 100px to 400px */
13    width: clamp(100px, 30%, 400px);
14    background-color: lightsteelblue;
15}

Ces fonctions sont utilisées pour déterminer des valeurs de manière dynamique.

min() sélectionne la plus petite valeur d'un ensemble de valeurs.
max() sélectionne la plus grande valeur d'un ensemble de valeurs.
clamp() ajuste une valeur dans une plage comprise entre une valeur minimale, recommandée et maximale.

`repeat()`

1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);

La fonction repeat() est utilisée avec grid-template-columns et grid-template-rows pour créer des motifs répétitifs.

`linear-gradient()` / `radial-gradient()`

 1div.linear-gradient {
 2    /* Linear gradient */
 3    background: linear-gradient(to right, red, blue);
 4}
 5div.radial-gradient {
 6    /* Radial gradient */
 7    background: radial-gradient(circle, red, blue);
 8}
 9div.conic-gradient {
10    /* Conic gradient */
11    background: conic-gradient(from 0deg, red, yellow, blue, red);
12}

Ces fonctions sont utilisées pour créer des dégradés.
- linear-gradient crée un dégradé linéaire.
- radial-gradient crée un dégradé radial. Vous pouvez spécifier eclipse au lieu de circle pour créer un dégradé elliptique.
- conic-gradient crée un dégradé qui change de couleur en fonction des angles autour du centre d'un cercle.

Résumé

Les fonctions CSS sont extrêmement utiles pour définir des mises en page et des styles flexibles. En les utilisant efficacement, vous pouvez obtenir des conceptions plus dynamiques et réactives.

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

Détails des sélecteurs d'attributs en CSS Pseudo-classes et pseudo-éléments CSS