Types de donnes CSS

Les types de donnes CSS dfinissent des valeurs typiques (y compris des mots-cls et des units) acceptes par les proprits et les fonctions CSS. Ils sont un type spcial de type de valeur du composant (angl.).

Les types les plus couramment utiliss sont dfinis dans le module Valeurs et units CSS. Ce module dfinit galement des notations fonctionnelles, qui permettent des types ou des traitements plus complexes. D'autres types sont dfinis dans les spcifications auxquelles ils s'appliquent.

Vous pouvez trouver ci-dessous une rfrence aux types que vous tes le plus susceptible de rencontrer, mais ce n'est pas une rfrence complte pour tous les types dfinis dans chaque spcification CSS.

Syntaxe

Dans la syntaxe CSS formelle, les types de donnes sont dsigns par un mot-cl plac entre les chevrons < et >. Ils ne correspondent aucune entit de code CSS tangible.

Types de donnes textuelles

Ces types incluent des mots-cls et des identifiants ainsi que des chanes de caractres et des URL.

Mots-cls prdfinis

Mots-cls ayant une signification prdfinie, par exemple, la valeur de collapse pour la proprit border-collapse.

Mots-cls globaux CSS

Toutes les proprits, y compris les proprits personnalises, acceptent les mots-cls globaux CSS :

initial: La valeur dfinie comme valeur initiale de la proprit.
inherit: La valeur calcule de la proprit sur l'lment parent.
revert: Rtablit la cascade la valeur de l'origine antrieure.
revert-layer: Rtablit la cascade la valeur de la couche de cascade antrieure.
revert-rule: Rtablit la cascade la valeur d'une rgle de style correspondante antrieure.
unset: Agit comme inherit ou initial en fonction de la proprit hrite ou non.

<custom-ident>

Un identifiant dfini par l'utilisateurice, par exemple le nom attribu l'aide de la proprit grid-area.

<dashed-ident>

Un <custom-ident> avec la restriction supplmentaire qu'il doit commencer par deux tirets, par exemple avec les proprits CSS personnalises.

<string>

Une chane de caractres entre guillemets, comme utilise pour une valeur de la proprit content.

<url>

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

Types de donnes numriques

Ces types de donnes sont utiliss pour indiquer des quantits, des index et des positions. La majorit d'entre eux sont dfinis dans le module des valeurs et units CSS, cependant d'autres types sont dcrits dans d'autres modules o ils sont spcifiques cette spcification seule - par exemple l'unit fr dans le module Grilles CSS.

<integer>: Un ou plusieurs chiffres dcimaux de 0 9.
<number>: Des nombres rels qui peuvent galement avoir une composante fractionnaire, par exemple 1 ou 1.34.
<dimension>: Un nombre avec une unit attache, 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 attache et utilise pour le dimensionnement des pistes de grille.

Quantits

Ces types sont utiliss pour dfinir des distances et d'autres quantits.

<length>: Les longueurs sont une <dimension> et se rfrent des distances.
<angle>: Les angles sont utiliss dans des proprits telles que linear-gradient() et sont une <dimension> avec l'une des units deg, grad, rad ou turn attaches.
<time>: Les units de dure sont une <dimension> avec une unit s ou ms.
<frequency>: Les frquences sont une <dimension> avec une unit Hz ou kHz attache.
<resolution>: Une <dimension> avec un identifiant d'unit de dpi, dpcm, dppx ou x.

Combinaisons de types

Certaines proprits CSS peuvent accepter une dimension ou une valeur de pourcentage. Dans ce cas, la valeur de pourcentage est rsolue en une quantit qui correspond la dimension autorise. Les proprits qui peuvent accepter un pourcentage en plus d'une dimension utilisent l'un des types numrs ci-dessous.

<length-percentage>: Un type qui peut accepter une longueur ou un pourcentage comme valeur.
<frequency-percentage>: Un type qui peut accepter une frquence 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 dure ou un pourcentage comme valeur.

Couleur

Le module Couleur CSS dfinit le type de donnes <color>, ainsi que d'autres types lis la couleur en CSS.

<color>: Dfinit comme un mot-cl ou une valeur numrique de couleur.
<alpha-value>: Dfinit la transparence d'une couleur. Peut tre un <number>, auquel cas 0 est compltement transparent et 1 est compltement opaque, ou un <percentage>, auquel cas 0% est compltement transparent et 100% compltement opaque.
<hue>: Dfinit l'<angle>, avec un identifiant d'unit de deg, grad, rad ou turn, ou un <number> sans unit interprt comme deg, de la roue chromatique spcifique aux <absolute-color-functions> dont il est un composant.

Images

Le module Images CSS dfinit les types de donnes qui traitent des images, y compris les dgrads.

<image>: Une rfrence d'URL une image ou un dgrad de couleur.
<color-stop-list>: Une liste de deux ou plusieurs arrts 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'arrt de couleur pour cette partie du dgrad.
<linear-color-hint>: Un <length-percentage> pour indiquer comment la couleur s'interpole.
<ending-shape>: Utilis pour les dgrads radiaux ; peut avoir une valeur de mot-cl de circle ou ellipse.
<size>: Dtermine la taille de la forme de fin du dgrad radial. Cela accepte une valeur de mot-cl ou un <length> mais pas un pourcentage.

Positionnement 2D

Le type de donnes <position> est interprt comme dfini pour la proprit background-position.

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

Types de donnes de calcul

Ces types de donnes sont utiliss dans les calculs de fonction mathmatique CSS.

<calc-sum>: Un calcul qui est une squence de valeurs de calcul entrecoupes d'oprateurs d'addition (+) et de soustraction (-). Ce type de donnes ncessite que les deux valeurs aient des units.
<calc-product>: Un calcul qui est une squence de valeurs de calcul entrecoupes d'oprateurs de multiplication (*) et de division (/). Lors de la multiplication, une valeur doit tre sans unit. Lors de la division, la deuxime valeur doit tre sans unit.
<calc-value>: Dfinit les valeurs acceptes pour les calculs, des valeurs telles que <number>, <dimension>, <percentage>, <calc-keyword> ou des calculs imbriqus <calc-sum>.
<calc-keyword>: Dfinit un certain nombre de mots-cls CSS reprsentant des constantes numriques telles que e et , qui peuvent tre utiliss dans les fonctions mathmatiques CSS.

Types de donnes de forme

Les modules formes CSS et bordures et dcorations de botes CSS dfinissent des types de donnes de forme :

<basic-shape>: Dcrit les fonctions de forme utilises dans les proprits clip-path, shape-outside et offset-path.
<corner-shape-value>: Dcrit la forme d'un coin de conteneur. Il est utilis par la proprit abrge corner-shape et ses proprits constitutives pour dfinir la forme applique aux coins de conteneur affects.

Index alphabtique des types de donnes

Spcifications

Spcification
CSS Values and Units Module Level 4

Voir aussi

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 1 aot 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu