<length>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
* Some parts of this feature may have varying levels of support.
Le type de données CSS <length>
correspond à une mesure de distance. Les longueurs peuvent être utilisées dans de nombreuses propriétés CSS, comme width
, height
, margin
, padding
, border-width
, font-size
et text-shadow
.
Note :
Bien que les valeurs <percentage>
puissent être utilisées dans certaines propriétés qui acceptent des valeurs <length>
, elles ne sont pas elles-mêmes des valeurs <length>
. Voir <length-percentage>
.
Syntaxe
Le type de données <length>
consiste en un nombre (<number>
) suivi de l'une des unités listées ci-dessous. Comme pour toutes les dimensions CSS, il n'y a pas d'espace entre le nombre et l'unité littérale. L'unité de longueur est optionnelle si le nombre est 0
.
Note :
Certaines propriétés autorisent des valeurs <length>
négatives, d'autres non.
La valeur définie d'une longueur (longueur définie) est représentée par sa quantité et son unité. La valeur calculée d'une longueur (longueur calculée) est la longueur spécifiée résolue en une longueur absolue, et son unité n'est pas distinguée.
Les unités <length>
peuvent être relatives ou absolues. Les longueurs relatives représentent une mesure en fonction d'une autre distance. Selon l'unité, cette distance peut être la taille d'un caractère spécifique, la hauteur de ligne, ou la taille de la zone d'affichage. Les feuilles de style qui utilisent des unités de longueur relatives peuvent plus facilement s'adapter d'un environnement de sortie à un autre.
Note : Les éléments enfants n'héritent pas des valeurs relatives telles que spécifiées pour leur parent ; ils héritent des valeurs calculées.
Unités de longueur relatives
Les unités de longueur relatives CSS sont basées sur la police, le conteneur ou la taille de la zone d'affichage.
Unités de longueur relatives basées sur la police
Les longueurs liées à la police définissent la valeur <length>
en fonction de la taille d'un caractère particulier ou d'une caractéristique de la police actuellement utilisée dans un élément ou son parent.
Note :
Ces unités, en particulier em
et la racine relative rem
, sont souvent utilisées pour créer des mises en page adaptatives, qui maintiennent le rythme vertical de la page même lorsque l'utilisateur·ice change la taille de la police.
cap
-
Représente la hauteur nominale des lettres capitales (cap height) de la police (
font
) de l'élément. ch
-
Représente la largeur ou, plus précisément, la mesure d'avancement du glyphe
0
(zéro, le caractère Unicode U+0030) dans la police (font
) de l'élément. Dans les cas où il est impossible ou peu pratique de déterminer la mesure du glyphe0
, il faut supposer qu'il mesure0.5em
de large sur1em
de haut. em
-
Représente la taille de police (
font-size
) calculée de l'élément. Si utilisée sur la propriétéfont-size
, elle représente la taille de police héritée de l'élément. ex
-
Représente la hauteur d'x de la police (
font
) de l'élément. Dans les polices comportant la lettrex
, il s'agit généralement de la hauteur des lettres minuscules de la police ;1ex ≈ 0.5em
dans de nombreuses polices. ic
-
Égal à la mesure d'avancement utilisée du glyphe "水" (idéogramme CJK de l'eau, U+6C34), trouvée dans la police utilisée pour l'afficher.
lh
-
Égal à la valeur calculée de la propriété
line-height
de l'élément sur lequel elle est utilisée, convertie en longueur absolue. Cette unité permet des calculs de longueur basés sur la taille théorique d'une ligne vide idéale. Cependant, la taille réelle des boîtes de ligne peut différer selon leur contenu.
Unités de longueur relatives basées sur la police de l'élément racine
Les unités de longueur relatives à la police de l'élément racine définissent la valeur <length>
en fonction de la taille d'un caractère particulier ou d'une caractéristique de la police de l'élément :root
.
rcap
-
Représente la hauteur nominale des lettres capitales (cap height) de la police (
font
) de l'élément racine. rch
-
Représente la largeur ou, plus précisément, la mesure d'avancement du glyphe
0
(zéro, le caractère Unicode U+0030) dans la police (font
) de l'élément racine. rem
-
Représente la taille de police (
font-size
) de l'élément racine (généralement l'élément<html>
). Lorsqu'elle est utilisée sur la propriétéfont-size
de l'élément racine, elle représente sa valeur initiale. La valeur par défaut courante dans les navigateurs est16px
, mais les préférences utilisateur·ice·s peuvent la modifier. rex
-
Représente la hauteur d'x de la police (
font
) de l'élément racine. ric
-
Représente la valeur de l'unité
ic
sur la police de l'élément racine. rlh
-
Représente la valeur de l'unité
lh
sur la police de l'élément racine. Cette unité permet des calculs de longueur basés sur la taille théorique d'une ligne vide idéale. Cependant, la taille réelle des boîtes de ligne peut différer selon leur contenu.
Unités de longueur relatives à la zone d'affichage
Les unités de longueur en pourcentage de la zone d'affichage sont basées sur quatre tailles différentes de zone d'affichage : petite, grande, dynamique et par défaut. Cette distinction répond au fait que les interfaces des navigateurs peuvent s'étendre ou se rétracter dynamiquement, masquant ou affichant le contenu sous-jacent.
- Unités pour petite zone d'affichage
-
Lorsque vous souhaitez utiliser la plus petite zone d'affichage possible en réponse à l'expansion dynamique des interfaces du navigateur, utilisez la « petite » taille de zone d'affichage. Cette taille permet au contenu de remplir toute la zone d'affichage lorsque les interfaces du navigateur sont étendues. Ce choix peut toutefois laisser des espaces vides lorsque les interfaces se rétractent.
Par exemple, un élément dimensionné avec des unités en pourcentage basées sur la petite zone d'affichage remplira parfaitement l'écran sans que son contenu ne soit masqué lorsque toutes les interfaces dynamiques du navigateur sont affichées. Lorsque ces interfaces sont masquées, il peut cependant y avoir de l'espace supplémentaire autour de l'élément. Ainsi, les unités pour petite zone d'affichage sont généralement plus « sûres », mais peuvent produire une mise en page moins esthétique après interaction de l'utilisateur·ice avec la page.
La petite zone d'affichage est représentée par le préfixe
sv
et donne les unités de longueur en pourcentagesv*
. Les tailles de ces unités sont fixes, donc stables, sauf si la zone d'affichage elle-même est redimensionnée. - Unités pour grande zone d'affichage
-
Lorsque vous souhaitez utiliser la plus grande zone d'affichage possible en réponse à la rétraction dynamique des interfaces du navigateur, utilisez la « grande » taille de zone d'affichage. Cette taille permet au contenu de remplir toute la zone d'affichage lorsque les interfaces du navigateur sont rétractées. Attention : le contenu peut être masqué lorsque les interfaces s'étendent.
Par exemple, sur les téléphones mobiles où l'espace d'affichage est limité, les navigateurs masquent souvent tout ou partie de la barre de titre et de la barre d'adresse après un défilement. Un élément dimensionné avec une unité, en pourcentage, basée sur la grande zone d'affichage remplira toute la page visible lorsque ces interfaces sont masquées. Cependant, lorsque ces interfaces rétractables sont affichées, elles peuvent masquer le contenu dimensionné ou positionné avec les unités pour grande zone d'affichage.
La grande zone d'affichage est représentée par le préfixe
lv
et donne les unités de longueur en pourcentagelv*
. Les tailles de ces unités sont fixes, donc stables, sauf si la zone d'affichage elle-même est redimensionnée. - Unités pour zone d'affichage dynamique
-
Lorsque vous souhaitez que la zone d'affichage soit automatiquement dimensionnée en fonction de l'expansion ou de la rétraction dynamique des interfaces du navigateur, utilisez la taille « dynamique » de zone d'affichage. Cette taille permet au contenu de s'adapter exactement à la zone d'affichage, quelle que soit la présence d'interfaces dynamiques.
La zone d'affichage dynamique est représentée par le préfixe
dv
et donne les unités de longueur en pourcentagedv*
. Les tailles de ces unités ne sont pas stables, même si la zone d'affichage elle-même ne change pas.Note : Bien que la zone d'affichage dynamique offre plus de contrôle et de flexibilité, l'utilisation d'unités, en pourcentage, basées sur cette taille peut entraîner un redimensionnement du contenu lors du défilement de la page, ce qui peut dégrader l'interface et impacter les performances.
- Unités pour zone d'affichage par défaut
-
La taille de zone d'affichage par défaut est définie par le navigateur. Le comportement de l'unité résultante peut être équivalent à celui d'une unité basée sur la petite, la grande, une taille intermédiaire ou la zone d'affichage dynamique.
Note : Par exemple, un navigateur peut implémenter l'unité par défaut pour la hauteur (
vh
) comme équivalente à l'unité de hauteur pour grande zone d'affichage (lvh
). Cela peut masquer du contenu sur un affichage en pleine page lorsque l'interface du navigateur est étendue. Actuellement, toutes les unités par défaut (vh
,vw
, etc.) sont équivalentes à leurs homologues pour grande zone d'affichage (lvh
,lvw
, etc.).
Les longueurs en pourcentage de la zone d'affichage définissent des valeurs <length>
en pourcentage par rapport à la taille du bloc englobant initial, qui dépend soit de la taille de la zone d'affichage, soit de la zone de page, c'est-à-dire la partie visible du document. Lorsque la hauteur ou la largeur du bloc englobant initial change, les éléments dimensionnés en fonction de celui-ci sont redimensionnés en conséquence. Il existe une variante d'unité de longueur en pourcentage de la zone d'affichage pour chacune des tailles décrites ci-dessus.
Note :
Les longueurs de la zone d'affichage sont invalides dans les blocs de déclaration @page
.
vh
-
Représente un pourcentage de la hauteur du bloc englobant initial de la zone d'affichage.
1vh
correspond à 1% de la hauteur de la zone d'affichage. Par exemple, si la hauteur de la zone d'affichage est de300px
, une valeur de70vh
pour une propriété donnera210px
.Les unités respectives pour petite, grande et dynamique zone d'affichage sont
svh
,lvh
etdvh
.vh
est équivalent àlvh
, c'est-à-dire l'unité basée sur la grande zone d'affichage. vw
-
Représente un pourcentage de la largeur du bloc englobant initial de la zone d'affichage.
1vw
correspond à 1% de la largeur de la zone d'affichage. Par exemple, si la largeur de la zone d'affichage est de800px
, une valeur de50vw
pour une propriété donnera400px
.Pour les zones d'affichage petite, grande et dynamique, les unités respectives sont
svw
,lvw
etdvw
.vw
est équivalent àlvw
, c'est-à-dire l'unité basée sur la grande zone d'affichage. vmax
-
Représente en pourcentage la plus grande valeur entre
vw
etvh
.Pour les zones d'affichage petite, grande et dynamique, les unités respectives sont
svmax
,lvmax
etdvmax
.vmax
est équivalent àlvmax
, c'est-à-dire l'unité basée sur la grande zone d'affichage. vmin
-
Représente en pourcentage la plus petite valeur entre
vw
etvh
.Pour les zones d'affichage petite, grande et dynamique, les unités respectives sont
svmin
,lvmin
etdvmin
.vmin
est équivalent àlvmin
, c'est-à-dire l'unité basée sur la grande zone d'affichage. vb
-
Représente le pourcentage de la taille du bloc englobant initial, dans la direction de l'axe de bloc de l'élément racine.
Pour les zones d'affichage petite, grande et dynamique, les unités respectives sont
svb
,lvb
etdvb
.vb
est équivalent àlvb
, c'est-à-dire l'unité basée sur la grande zone d'affichage. vi
-
Représente un pourcentage de la taille du bloc englobant initial, dans la direction de l'axe en ligne de l'élément racine.
Pour les zones d'affichage petite, grande et dynamique, les unités respectives sont
svi
,lvi
etdvi
.vi
est équivalent àlvi
, c'est-à-dire l'unité basée sur la grande zone d'affichage.
Unités de longueur relatives au conteneur
Lorsque vous appliquez des styles à un conteneur à l'aide de requêtes de conteneur, vous pouvez utiliser des unités de longueur relatives au conteneur. Ces unités spécifient une longueur relative aux dimensions du conteneur de requête. Les composants qui utilisent des unités de longueur relatives à leur conteneur sont plus flexibles à utiliser dans différents conteneurs sans avoir à recalculer des valeurs de longueur concrètes.
Si aucun conteneur éligible n'est disponible pour la requête, l'unité de longueur relative au conteneur prend par défaut la petite unité de zone d'affichage pour cet axe (sv*
).
Pour plus d'informations, voir Requêtes de conteneur.
cqw
-
Représente un pourcentage de la largeur du conteneur de requête.
1cqw
correspond à 1% de la largeur du conteneur de requête. Par exemple, si la largeur du conteneur de requête est de800px
, une valeur de50cqw
pour une propriété donnera400px
. cqh
-
Représente un pourcentage de la hauteur du conteneur de requête.
1cqh
correspond à 1% de la hauteur du conteneur de requête. Par exemple, si la hauteur du conteneur de requête est de300px
, une valeur de10cqh
pour une propriété donnera30px
. cqi
-
Représente un pourcentage de la taille en ligne du conteneur de requête.
1cqi
correspond à 1% de la taille en ligne du conteneur de requête. Par exemple, si la taille en ligne du conteneur de requête est de800px
, une valeur de50cqi
pour une propriété donnera400px
. cqb
-
Représente un pourcentage de la taille de bloc du conteneur de requête.
1cqb
correspond à 1% de la taille de bloc du conteneur de requête. Par exemple, si la taille de bloc du conteneur de requête est de300px
, une valeur de10cqb
pour une propriété donnera30px
. cqmin
-
Représente un pourcentage de la plus petite valeur entre la taille en ligne ou la taille de bloc du conteneur de requête.
1cqmin
correspond à 1% de la plus petite valeur entre la taille en ligne ou la taille de bloc du conteneur de requête. Par exemple, si la taille en ligne du conteneur de requête est de800px
et sa taille de bloc de300px
, une valeur de50cqmin
pour une propriété donnera150px
. cqmax
-
Représente un pourcentage de la plus grande valeur entre la taille en ligne ou la taille de bloc du conteneur de requête.
1cqmax
correspond à 1% de la plus grande valeur entre la taille en ligne ou la taille de bloc du conteneur de requête. Par exemple, si la taille en ligne du conteneur de requête est de800px
et sa taille de bloc de300px
, une valeur de50cqmax
pour une propriété donnera400px
.
Unités de longueur absolues
Les unités de longueur absolues représentent une mesure physique lorsque les propriétés physiques du support de sortie sont connues, comme pour la mise en page à l'impression. Cela se fait en ancrant l'une des unités à une unité physique ou à l'unité d'angle visuel, puis en définissant les autres par rapport à celle-ci. Les unités physiques incluent cm
, in
, mm
, pc
, pt
, px
et Q
. L'ancrage est réalisé différemment pour les appareils à basse résolution, comme les écrans, et pour les appareils à haute résolution, comme les imprimantes.
Pour les appareils à faible densité de pixels (dpi pour ppp en français), l'unité px
représente le pixel de référence physique ; les autres unités sont définies par rapport à celle-ci. Ainsi, 1in
est défini comme 96px
, ce qui équivaut à 72pt
. Par conséquent, sur ces appareils, les dimensions décrites en pouces (in
), centimètres (cm
) ou millimètres (mm
) ne correspondent pas nécessairement à la taille de l'unité physique du même nom.
Pour les appareils à haute densité de pixels, les pouces (in
), centimètres (cm
) et millimètres (mm
) sont identiques à leurs équivalents physiques. L'unité px
est donc définie par rapport à eux (1/96 de 1in
).
Note :
De nombreux·ses utilisateur·ice·s augmentent la taille de police par défaut de leur agent utilisateur pour améliorer la lisibilité du texte. Les longueurs absolues peuvent poser des problèmes d'accessibilité car elles sont fixes et ne s'adaptent pas aux préférences utilisateur·ice·s. Pour cette raison, il est préférable d'utiliser des longueurs relatives (comme em
ou rem
) lors de la définition de font-size
.
px
-
Un pixel. Pour les écrans, cela représente traditionnellement un pixel matériel (point). Cependant, pour les imprimantes et les écrans haute résolution, un pixel CSS correspond à plusieurs pixels matériels.
1px
=1in / 96
. cm
-
Un centimètre.
1cm
=96px / 2,54
. mm
-
Un millimètre.
1mm
=1cm / 10
. Q
-
Un quart de millimètre.
1Q
=1cm / 40
. in
-
Un pouce.
1in
=2,54cm
=96px
. pc
-
Un pica.
1pc
=12pt
=1in / 6
. pt
-
Un point.
1pt
=1in / 72
.
Interpolation
Lorsqu'elles sont animées, les valeurs du type de données <length>
sont interpolées comme des nombres réels à virgule flottante. L'interpolation s'effectue sur la valeur calculée. La vitesse de l'interpolation est déterminée par la fonction de temporisation
associée à l'animation.
Exemples
>Comparer différentes unités de longueur
L'exemple suivant vous propose un champ de saisie dans lequel vous pouvez entrer une valeur <length>
(par exemple : 300px
, 50%
, 30vw
) pour définir la largeur d'une barre de résultat qui apparaîtra en dessous après avoir appuyé sur la touche Entrée ou Retour arrière.
Cela vous permet de comparer les effets des différentes unités de longueur.
HTML
<div class="outer">
<div class="input-container">
<label for="length">Entrer la largeur :</label>
<input type="text" id="length" />
</div>
<div class="inner"></div>
</div>
<div class="results"></div>
CSS
html {
font-family: sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.outer {
width: 100%;
height: 50px;
background-color: #eeeeee;
position: relative;
}
.inner {
height: 50px;
background-color: #999999;
box-shadow:
inset 3px 3px 5px rgb(255 255 255 / 50%),
inset -3px -3px 5px rgb(0 0 0 / 50%);
}
.result {
height: 20px;
box-shadow:
inset 3px 3px 5px rgb(255 255 255 / 50%),
inset -3px -3px 5px rgb(0 0 0 / 50%);
background-color: orange;
display: flex;
align-items: center;
margin-top: 10px;
}
.result code {
position: absolute;
margin-left: 20px;
}
.results {
margin-top: 10px;
}
.input-container {
position: absolute;
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
label {
margin: 0 10px 0 20px;
}
JavaScript
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");
inputElem.addEventListener("change", () => {
inputDiv.style.width = inputElem.value;
const result = document.createElement("div");
result.className = "result";
result.style.width = inputElem.value;
const code = document.createElement("code");
code.textContent = `width: ${inputElem.value}`;
result.appendChild(code);
resultsDiv.appendChild(result);
inputElem.value = "";
inputElem.focus();
});
Résultat
Spécifications
Specification |
---|
CSS Values and Units Module Level 4> # lengths> |
Compatibilité des navigateurs
Loading…