| CARVIEW |
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Types de données textuelles
Chaque déclaration CSS se compose d'une paire propriété/valeur. La valeur peut inclure différents types de données selon la propriété, comme un mot-clé, un entier, une fonction ou une combinaison de types ; certaines valeurs ont des unités, d'autres non. Ce guide donne un aperçu des types de données textuelles. Consultez la page dédiée à chaque type de valeur pour plus de détails.
Les types de données textuelles sont soit <string>, une suite de caractères entre guillemets, soit <ident>, un « identifiant CSS » (chaîne de caractères qui n'est pas entre guillemets), soit <url>, qui peut être entre guillemets ou non. Une <string> est entourée de guillemets simples ou doubles. Les identifiants CSS, notés <ident> ou <custom-ident> dans les spécifications, ne doivent pas être entre guillemets.
Dans les spécifications CSS, les valeurs définies par le·la développeur·euse (par exemple, les noms d'animations, de familles de polices ou de zones de grille) sont indiquées comme <custom-ident>, <string> ou les deux.
Lorsque les valeurs textuelles définies par l'utilisateur·ice peuvent être entre guillemets ou non, la spécification indique <custom-ident> | <string>, ce qui signifie que les guillemets sont optionnels (exemple : noms d'animations :)
@keyframes validIdent {
/* keyframes go here */
}
@keyframes 'validString' {
/* keyframes go here */
}
Certaines valeurs textuelles ne sont pas valides si elles sont entre guillemets. Par exemple, la valeur de grid-area peut être un <custom-ident>, donc si une zone de grille s'appelle content, il faut l'utiliser sans guillemets :
.item {
grid-area: content;
}
À l'inverse, un type de donnée <string>, comme la valeur de la propriété content, doit obligatoirement être entre guillemets :
.item::after {
content: "This is my content.";
}
Vous pouvez en général choisir n'importe quel nom (même avec des emojis), mais l'identifiant ne peut pas être none, unset, initial ou inherit, ne doit pas commencer par un chiffre ou deux tirets, et il vaut mieux éviter tout autre mot-clé CSS prédéfini. Voir les pages de référence <custom-ident> et <string> pour plus de détails.
Valeurs de mots-clés prédéfinis
Les mots-clés prédéfinis sont des valeurs textuelles définies par la spécification pour une propriété donnée. Ces mots-clés sont aussi des identifiants CSS, donc ils s'utilisent sans guillemets.
Dans la syntaxe des valeurs de propriété CSS (dans la spécification ou sur MDN), les mots-clés autorisés sont listés ainsi. Les valeurs énumérées suivantes sont les mots-clés autorisés pour float :
left | right | none | inline-start | inline-end
Ces valeurs s'utilisent sans guillemets :
.box {
float: left;
}
Mots-clés globaux CSS
En plus des mots-clés prédéfinis propres à chaque propriété, toutes les propriétés CSS acceptent les valeurs globales (ou « CSS-wide ») initial, inherit, unset, revert et revert-layer, qui définissent explicitement des comportements par défaut.
initial-
Représente la valeur initiale spécifiée pour la propriété.
inherit-
Représente la valeur calculée de la propriété sur le parent de l'élément, si elle est héritée.
unset-
Se comporte comme
inheritouinitialselon que la propriété est héritée ou non. revert-
Réinitialise la propriété à la valeur héritée si elle est héritée du parent, ou à la valeur par défaut définie par la feuille de style de l'agent utilisateur (ou par les styles utilisateur s'ils existent).
revert-layer-
Restaure la valeur d'une propriété dans une couche de cascade à la valeur de la propriété dans une règle CSS correspondante d'une couche précédente. La valeur de la propriété avec ce mot-clé est recalculée comme si aucune règle n'était spécifiée sur l'élément cible dans la couche de cascade courante.
URL
Le type <url> utilise une notation fonctionnelle qui accepte une <string> représentant une URL. Il peut s'agir d'une URL absolue ou relative. Par exemple, pour inclure une image d'arrière-plan :
.box {
background-image: url("images/my-background.png");
}
.box {
background-image: url("https://www.example.com/images/my-background.png");
}
Le paramètre de url() peut être entre guillemets ou non. S'il ne l'est pas, il est analysé comme un <url-token>, qui impose des contraintes supplémentaires (certains caractères doivent être échappés). Voir <url> pour plus d'informations.