Types de données numériques
Chaque déclaration CSS se compose d'une paire propriété/valeur. La valeur peut inclure divers types de données en fonction de la propriété, tels qu'un seul nombre, un mot-clé, une fonction ou une combinaison de différents types ; certaines valeurs ont des unités, tandis que d'autres n'en ont pas. Les types de données numériques incluent <integer>, <number>, <dimension>, et <percentage>. Ce guide est un aperçu des types de données numériques. Consultez la page de chaque type de valeur pour des informations plus détaillées.
Entiers
Un entier est un ou plusieurs chiffres décimaux, 0 à 9, tel que 1024 ou -55. Un entier peut être précédé d'un symbole + ou -, sans espace entre le symbole et l'entier.
Nombres
Un <number> représente un nombre réel, qui peut ou non avoir un point décimal avec une composante fractionnaire, par exemple 0.255, 128 ou -1.2. Les nombres peuvent également être précédés d'un symbole + ou -.
Dimensions
Un <dimension> est un <number> auquel une unité est attachée, par exemple 45deg, 100ms ou 10px. L'identifiant d'unité attaché est insensible à la casse. Il n'y a jamais d'espace ni d'autres caractères entre le nombre et l'identifiant d'unité : c'est-à-dire que 1 cm n'est pas valide.
CSS utilise des dimensions pour spécifier :
<length>(Unités de distance)<angle><time><frequency><flex><resolution>
Elles sont toutes couvertes dans les sous-sections suivantes.
Unités de distance
Lorsqu'une unité de distance, également connue sous le nom de longueur, est autorisée comme valeur pour une propriété, cela est décrit comme le type <length>. Il existe deux types de longueurs en CSS : relative et absolue. Les unités de longueur relatives spécifient une longueur par rapport à quelque chose d'autre.
Il existe deux types de longueurs relatives : les longueurs relatives à la police et les longueurs relatives au pourcentage de la fenêtre d'affichage. Ces deux types se déclinent en deux catégories. Les unités de longueur relatives à la police sont soit locales, soit racines. Les longueurs relatives au pourcentage de la fenêtre d'affichage sont soit relatives à la hauteur ou à la largeur de la fenêtre d'affichage, soit, comme défini dans le module de confinement CSS, relatives à un conteneur.
Longueurs relatives à la police locales
Les longueurs relatives à la police locales sont relatives à la taille de police ou à la hauteur de ligne « locale », spécifiant une longueur par rapport à une taille calculée d'une caractéristique de l'élément lui-même, ou relative à la valeur héritée de l'élément dans le cas d'une référence circulaire, comme la valeur em pour une propriété font-size ou une valeur lh pour une propriété line-height.
Par exemple, em est relative à la taille de police sur l'élément et ex est relative à la hauteur x de la police de l'élément.
| Unité | Relative à |
|---|---|
cap |
Hauteur des majuscules (hauteur nominale des lettres majuscules) de la police de caractères de l'élément. |
ch |
Avancement moyen des caractères d'un glyphe étroit dans la police de l'élément, tel que représenté par le glyphe « 0 » (ZERO, U+0030). |
em |
Taille de police de la police de l'élément. |
ex |
Hauteur x de la police de l'élément. |
ic |
Avancement moyen des caractères d'un glyphe plein dans la police de l'élément, tel que représenté par le glyphe « 水 » (idéogramme CJK pour l'eau, U+6C34). |
lh |
Hauteur de ligne de l'élément. |
Longueurs relatives à la police racine
Les longueurs relatives à la police racine spécifient une longueur par rapport à l'élément racine de l'élément, tel que <HTML> ou <SVG>.
Par exemple, rem est relative à la taille de police sur l'élément racine et rex est la hauteur x de la police de l'élément racine.
| Unité | Relative à |
|---|---|
rcap |
Hauteur des majuscules (hauteur nominale des lettres majuscules) de la police de caractères de l'élément racine. |
rch |
Avancement moyen des caractères d'un glyphe étroit dans la police de l'élément racine, tel que représenté par le glyphe « 0 » (ZERO, U+0030). |
rem |
Taille de police de la police de l'élément racine. |
rex |
Hauteur x de la police de l'élément racine. |
ric |
Avancement moyen des caractères d'un glyphe plein dans la police de l'élément racine, tel que représenté par le glyphe « 水 » (idéogramme CJK pour l'eau, U+6C34). |
rlh |
Hauteur de ligne de l'élément racine. |
Unités de la vue
Les longueurs d'unité de la vue (viewport en anglais) spécifient une longueur par rapport aux dimensions de la vue.
Par exemple, vw est relative à la largeur de la vue et vh est relative à la hauteur de la vue.
| Unité | Relative à |
|---|---|
dvh |
1% de la hauteur de la vue dynamique. |
dvw |
1% de la largeur de la vue dynamique. |
lvh |
1% de large de la hauteur de la vue. |
lvw |
1% de large de la largeur de la vue. |
svh |
1% de small de la hauteur de la vue. |
svw |
1% de small de la largeur de la vue. |
vb |
1% de la taille de la vue dans l'axe de bloc de l'élément racine. |
vh |
1% de la hauteur de la vue. |
vi |
1% de la taille de la vue dans l'axe en ligne de l'élément racine. |
vmax |
1% de la plus grande dimension de la vue. |
vmin |
1% de la plus petite dimension de la vue. |
vw |
1% de la largeur de la vue. |
Unités de conteneur
Les unités de longueur de requête de conteneur spécifient une longueur par rapport aux dimensions d'un conteneur de requête.
Par exemple, cqw est relative à la largeur du conteneur de requête et cqh est relative à la hauteur du conteneur de requête.
| Unité | Relative à |
|---|---|
cqb |
1% de la taille de bloc d'un conteneur de requête |
cqh |
1% de la hauteur d'un conteneur de requête |
cqi |
1% de la taille en ligne d'un conteneur de requête |
cqmax |
La plus grande valeur entre cqi ou cqb |
cqmin |
La plus petite valeur entre cqi ou cqb |
cqw |
1% de la largeur d'un conteneur de requête |
Unités de longueur absolue
Les unités de longueur absolue sont fixées à une longueur physique : soit un pouce, soit un centimètre. Beaucoup de ces unités sont donc plus utiles lorsque la sortie est un média de taille fixe, comme l'impression. Par exemple, mm est un millimètre physique, 1/10ème de centimètre.
| Unité | Nom | Équivalent à |
|---|---|---|
cm |
Centimètres | 1cm = 96px/2.54 |
in |
Pouces | 1in = 2.54cm = 96px |
mm |
Millimètres | 1mm = 1/10th of 1cm |
pc |
Picas | 1pc = 1/6th of 1in |
pt |
Points | 1pt = 1/72th of 1in |
px |
Pixels | 1px = 1/96th of 1in |
Q |
Quart de millimètre | 1Q = 1/40th of 1cm |
Quand on inclut une valeur de longueur, si la longueur est 0, l'identifiant d'unité n'est pas requis. Sinon, l'identifiant d'unité est requis, est insensible à la casse et doit venir immédiatement après la partie numérique de la valeur, sans espace entre les deux.
Unités d'angle
Les valeurs d'angle sont représentées par le type <angle> et acceptent les valeurs suivantes :
| Unité | Nom | Description |
|---|---|---|
deg |
Degrés | Il y a 360 degrés dans un cercle complet. |
grad |
Gradians | Il y a 400 gradians dans un cercle complet. |
rad |
Radians | Il y a 2π radians dans un cercle complet. |
turn |
Tours | Il y a 1 tour dans un cercle complet. |
Unités de temps
Les valeurs de temps sont représentées par le type <time>. Lors de l'inclusion d'une valeur temporelle, l'identifiant d'unité — le s ou ms — est requis. Il accepte les valeurs suivantes.
| Unité | Nom | Description |
|---|---|---|
ms |
Millisecondes | Il y a 1 000 millisecondes dans une seconde. |
s |
Secondes | Il y a 1 seconde dans une seconde. |
Unité de fréquence
Les valeurs de fréquence sont représentées par le type <frequency>. Il accepte les valeurs suivantes.
| Unité | Nom | Description |
|---|---|---|
Hz |
Hertz | Représente le nombre d'occurrences par seconde. |
kHz |
KiloHertz | Un kiloHertz est 1000 Hertz. |
1Hz, qui peut également être écrit comme 1hz ou 1HZ, est un cycle par seconde.
Unité flexible
Les unités flexibles sont représentées par le type <flex>. Il accepte la valeur suivante.
| Unité | Nom | Description |
|---|---|---|
fr |
Flex | Représente une longueur flexible à l'intérieur d'un conteneur de grille. |
Unités de résolution
Les unités de résolution sont représentées par le type <resolution>. Elles représentent la taille d'un seul point dans une représentation graphique, comme un écran, en indiquant combien de ces points tiennent dans un pouce, un centimètre ou un pixel CSS. Elle accepte les valeurs suivantes :
| Unité | Description |
|---|---|
dpcm |
Points par centimètre. |
dpi |
Points par pouce. |
dppx, x |
Points par unité px. |
Pourcentages
Un <percentage> est un type qui représente une fraction d'une autre valeur.
Les valeurs en pourcentage sont toujours relatives à une autre quantité, par exemple une longueur. Chaque propriété qui permet des pourcentages définit également la quantité à laquelle le pourcentage se réfère. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur d'une propriété d'un élément ancêtre, une mesure d'un bloc conteneur, ou autre chose.
Par exemple, si vous spécifiez la width d'une boîte en pourcentage, cela fait référence au pourcentage de la largeur calculée du parent de la boîte :
.box {
width: 50%;
}
Mélange de pourcentages et de dimensions
Certaines propriétés acceptent une dimension qui pourrait être l'un des deux types, par exemple une <length> ou un <percentage>. Dans ce cas, la valeur autorisée est détaillée dans la spécification comme une unité de combinaison, par exemple <length-percentage>. D'autres combinaisons possibles sont les suivantes :
Types de données spéciaux (définis dans d'autres spécifications)
Couleur
La valeur <color> spécifie la couleur d'une caractéristique d'élément (par exemple, sa couleur d'arrière-plan) et est définie dans le Module CSS Color (angl.).
Image
La valeur <image> spécifie tous les différents types d'images qui peuvent être utilisés en CSS et est définie dans le Module CSS Image Values and Replaced Content (angl.).
Position
Le type <position> définit le positionnement 2D d'un objet à l'intérieur d'une zone de positionnement, par exemple une image d'arrière-plan à l'intérieur d'un conteneur. Ce type est interprété comme un background-position et est donc spécifié dans la spécification CSS Backgrounds and Borders (angl.).
Notation fonctionnelle
La notation fonctionnelle est un type de valeur qui peut représenter des types plus complexes ou invoquer un traitement spécial par CSS. La syntaxe commence par le nom de la fonction immédiatement suivi d'une parenthèse gauche ( suivie de l'argument (ou des arguments) de la notation suivie d'une parenthèse droite ). Les fonctions peuvent prendre plusieurs arguments, qui sont formatés de manière similaire à une valeur de propriété CSS.
L'espace blanc est autorisé, mais optionnel à l'intérieur des parenthèses. (Mais voir les notes concernant l'espace blanc dans les pages pour les fonctions min(), max(), minmax(), et clamp().)
Certaines notations fonctionnelles héritées, telles que la syntaxe héritée pour rgb(), rgba(), hsl(), et hsla(), utilisaient des virgules, mais les virgules sont généralement utilisées uniquement pour séparer les éléments d'une liste. Si une virgule est utilisée pour séparer les arguments, l'espace blanc est optionnel avant et après la virgule.
La spécification définit également la fonction toggle(). Elle n'a pas encore été implémentée nulle part.
Spécifications
| Specification |
|---|
| CSS Values and Units Module Level 4 |