Types de données CSS

Syntaxe

Dans la syntaxe CSS formelle, les types de données sont désignés par un mot-clé placé entre les chevrons < et >. Ils ne correspondent à aucune entité de code CSS tangible.

Types de données textuelles

Ces types incluent des mots-clés et des identifiants ainsi que des chaînes de caractères et des URL.

Mots-clés prédéfinis

Mots-clés ayant une signification prédéfinie, par exemple, la valeur de collapse pour la propriété border-collapse.

Mots-clés globaux CSS

Toutes les propriétés, y compris les propriétés personnalisées, acceptent les mots-clés globaux CSS :

• initial
  • La valeur définie comme valeur initiale de la propriété.
• inherit
  • La valeur calculée de la propriété sur l'élément parent.
• revert
  • Rétablit la cascade à la valeur de l'origine antérieure.
• revert-layer
  • Rétablit la cascade à la valeur de la couche de cascade antérieure.
• unset
  • Agit comme inherit ou initial en fonction de la propriété héritée ou non.

<custom-ident>

Un identifiant défini par l'utilisateur·ice, par exemple le nom attribué à l'aide de la propriété grid-area.

<dashed-ident>

Un <custom-ident> avec la restriction supplémentaire qu'il doit commencer par deux tirets, par exemple avec les propriétés CSS personnalisées.

<string>

Une chaîne de caractères entre guillemets, comme utilisée pour une valeur de la propriété content.

<url>

Un pointeur vers une ressource, par exemple comme valeur de background-image.

Types de données numériques

Ces types de données sont utilisés pour indiquer des quantités, des index et des positions. La majorité d'entre eux sont définis dans le module des valeurs et unités CSS, cependant d'autres types sont décrits dans d'autres modules où ils sont spécifiques à cette spécification seule - par exemple l'unité fr dans le module Grilles CSS.

<integer>

Un ou plusieurs chiffres décimaux de 0 à 9.

<number>

Des nombres réels qui peuvent également avoir une composante fractionnaire, par exemple 1 ou 1.34.

<dimension>

Un nombre avec une unité attachée, par exemple 23px ou 15em.

<percentage>

Un nombre avec un signe de pourcentage attaché, par exemple 10%.

<ratio>

Un rapport, écrit avec la syntaxe <number> / <number>.

<flex>

Une longueur flexible introduite pour Grilles CSS, écrite comme un <number> avec l'unité fr attachée et utilisée pour le dimensionnement des pistes de grille.

Quantités

Ces types sont utilisés pour spécifier des distances et d'autres quantités.

<length>

Les longueurs sont une <dimension> et se réfèrent à des distances.

<angle>

Les angles sont utilisés dans des propriétés telles que linear-gradient() et sont une <dimension> avec l'une des unités deg, grad, rad ou turn attachées.

<time>

Les unités de durée sont une <dimension> avec une unité s ou ms.

<frequency>

Les fréquences sont une <dimension> avec une unité Hz ou kHz attachée.

<resolution>

Une <dimension> avec un identifiant d'unité de dpi, dpcm, dppx ou x.

Combinaisons de types

Certaines propriétés CSS peuvent accepter une dimension ou une valeur de pourcentage. Dans ce cas, la valeur de pourcentage sera résolue en une quantité qui correspond à la dimension autorisée. Les propriétés qui peuvent accepter un pourcentage en plus d'une dimension utiliseront l'un des types énumérés ci-dessous.

<length-percentage>

Un type qui peut accepter une longueur ou un pourcentage comme valeur.

<frequency-percentage>

Un type qui peut accepter une fréquence ou un pourcentage comme valeur.

<angle-percentage>

Un type qui peut accepter un angle ou un pourcentage comme valeur.

<time-percentage>

Un type qui peut accepter une durée ou un pourcentage comme valeur.

Couleur

Le module Couleur CSS définit le type de données <color>, ainsi que d'autres types liés à la couleur en CSS.

<color>

Définit comme un mot-clé ou une valeur numérique de couleur.

<alpha-value>

Définit la transparence d'une couleur. Peut être un <number>, auquel cas 0 est complètement transparent et 1 est complètement opaque, ou un <percentage>, auquel cas 0% est complètement transparent et 100% complètement opaque.

<hue>

Définit l'<angle>, avec un identifiant d'unité de deg, grad, rad ou turn, ou un <number> sans unité interprété comme deg, de la color wheel spécifique aux <absolute-color-functions> dont il est un composant.

Images

Le module Images CSS définit les types de données qui traitent des images, y compris les dégradés.

<image>

Une référence d'URL à une image ou à un dégradé de couleur.

<color-stop-list>

Une liste de deux ou plusieurs arrêts de couleur avec des informations de transition optionnelles utilisant un indice de couleur.

<linear-color-stop>

Un <color> et un <length-percentage> pour indiquer l'arrêt de couleur pour cette partie du dégradé.

<linear-color-hint>

Un <length-percentage> pour indiquer comment la couleur s'interpole.

<ending-shape>

Utilisé pour les dégradés radiaux ; peut avoir une valeur de mot-clé de circle ou ellipse.

<size>

Détermine la taille de la forme de fin du dégradé radial. Cela accepte une valeur de mot-clé ou un <length> mais pas un pourcentage.

Positionnement 2D

Le type de données <position> est interprété comme défini pour la propriété <background-position>.

<position>

Définit la position d'une zone d'objet. Accepte une valeur de mot-clé telle que top ou left, ou un <length-percentage>.

Types de données de calcul

Ces types de données sont utilisés dans les calculs de fonction mathématique CSS.

<calc-sum>

Un calcul qui est une séquence de valeurs de calcul entrecoupées d'opérateurs d'addition (+) et de soustraction (-). Ce type de données nécessite que les deux valeurs aient des unités.

<calc-product>

Un calcul qui est une séquence de valeurs de calcul entrecoupées d'opérateurs de multiplication (*) et de division (/). Lors de la multiplication, une valeur doit être sans unité. Lors de la division, la deuxième valeur doit être sans unité.

<calc-value>

Définit les valeurs acceptées pour les calculs, des valeurs telles que <number>, <dimension>, <percentage>, <calc-keyword> ou des calculs imbriqués <calc-sum>.

<calc-keyword>

Définit un certain nombre de mots-clés CSS représentant des constantes numériques telles que e et π, qui peuvent être utilisés dans les fonctions mathématiques CSS.

Types de données de forme

Les modules formes CSS et bordures et décorations de boîtes CSS définissent des types de données de forme :

<basic-shape>

Décrit les fonctions de forme utilisées dans les propriétés clip-path, shape-outside et offset-path.

<corner-shape-value>

Décrit la forme d'un coin de conteneur. Il est utilisé par la propriété abrégée corner-shape et ses propriétés constitutives pour spécifier la forme appliquée aux coins de conteneur affectés.

Spécifications

Voir aussi

• Le module Valeurs et unités CSS
• Apprendre : Valeurs et unités
• Fonctions de valeur CSS