Les fonctions
On a déjà utilisé différentes fonctions dans les parties précédentes.
Pour les transformations rotate(), translate()...
Pour les images url(), blur(), contrast()...
Pour les couleurs rgb(), hsl()...
Je présente ici attr(), counter() et calc().
Définition : attr()
La fonction attr() permet de récupérer la valeur d'un attribut de l'élément sur lequel la règle CSS est appliquée. Elle est essentiellement utilisée avec la propriété content.
1
section::after {
2
content: attr(name);
3
}
1
<section name="Bonjour"></section>
Fonction attr()
Définition : counter()
La fonction counter() permet de gérer la numérotation d'éléments à l'aide d'un compteur.
Les propriétés counter-reset et counter-incremente permettent de gérer l'évolution du compteur.
1
body {2
counter-reset: numero;
3
}
4
h1::before {
5
counter-increment: numero;
6
content: counter(numero) "-";
7
}
1
<h1>Titre</h1>
2
<h1>Titre</h1>
3
<h1>Titre</h1>
Titre
Titre
Titre
Fonction counter()
Définition : calc()
La fonction calc() permet d’effectuer des calculs à partir de valeurs de même ou de différentes unités.
1
section {2
width: calc(100% - 50px);
3
}