diff options
Diffstat (limited to 'files/fr/web/css/length/index.html')
| -rw-r--r-- | files/fr/web/css/length/index.html | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/files/fr/web/css/length/index.html b/files/fr/web/css/length/index.html new file mode 100644 index 0000000000..33252fc014 --- /dev/null +++ b/files/fr/web/css/length/index.html @@ -0,0 +1,182 @@ +--- +title: <length> +slug: Web/CSS/length +tags: + - CSS + - Reference + - Type + - Type de donnée +translation_of: Web/CSS/length +--- +<div>{{CSSRef}}</div> + +<p>Le type de données CSS <strong><code><length></code></strong> correspond à une mesure de distance.</p> + +<p>De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("font-size")}}, {{cssxref("border-width")}}, {{cssxref("text-shadow")}}, …</p> + +<p>Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées.</p> + +<p>On notera que bien que les valeurs {{cssxref("<percentage>")}} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <code><length></code>, ce sont bien deux types distincts. Voir {{cssxref("<length-percentage>")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Une longueur est un nombre (type {{cssxref("<number>")}}) immédiatement suivi d'une unité de longueur (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>…). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité. L'unité est optionnelle pour la valeur nulle.</p> + +<div class="note"> +<p><strong>Note :</strong> Certaines propriétés permettent d'utiliser des longueurs négatives alors que d'autres n'acceptent que des valeurs positives.</p> +</div> + +<h3 id="Unités">Unités</h3> + +<h4 id="Unités_de_longueur_relatives">Unités de longueur relatives</h4> + +<p>Les longueurs relatives permettent d'indiquer une longueur basée sur la taille d'un caractère dans une police donnée, sur la taille de l'élément parent ou sur la taille de la zone d'affichage (<em>viewport</em>). Les unités associées permettent d'indiquer à quelle taille elles se rapportent.</p> + +<h5 id="Longueurs_liées_à_la_police">Longueurs liées à la police</h5> + +<p>Les unités relatives aux polices de caractères permettent d'obtenir des longueurs basées sur la taille d'un caractère ou la caractéristique de la police utilisée pour l'élément courant ou pour un élément parent.</p> + +<dl> + <dt><code>cap</code></dt> + <dd>Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.</dd> + <dt><a name="ch"><code>ch</code></a></dt> + <dd>Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.</dd> + <dt><a name="em"><code>em</code></a></dt> + <dd> + <p>Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police <em>héritée</em> de l'élément.</p> + + <div class="note"> + <p>Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p> + </div> + </dd> + <dt><a name="ex"><code>ex</code></a></dt> + <dd>Cette unité représente la <a href="https://fr.wikipedia.org/wiki/Hauteur_d%27x">hauteur d'x</a> de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. <code>1ex ≈ 0.5em</code> dans de nombreuses polices.</dd> + <dt><code>ic</code></dt> + <dd>Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.</dd> + <dt><code>lh</code></dt> + <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.</dd> + <dt><a name="rem"><code>rem</code></a></dt> + <dd> + <p>Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.</p> + + <div class="note"> + <p>Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p> + </div> + </dd> + <dt><code>rlh</code></dt> + <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}} de l'élément racine, convertie en longueur absolue. Lorsque cette unité est utilisée pour les propriétés {{cssxref("font-size")}} ou {{cssxref("line-height")}} de l'élément racine, l'unité <code>rlh</code> fait référence aux valeurs initiales des propriétés.</dd> +</dl> + +<h5 id="Longueurs_liées_au_viewport">Longueurs liées au <em>viewport</em></h5> + +<p>Les longueurs liées au <em>viewport</em> définissent une longueur relative à la taille du <em>viewport</em>, qui correspond à la partie visible du document.</p> + +<p>Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au <em>viewport</em> sont invalides et la déclaration sera ignorée.</p> + +<dl> + <dt><code>vb</code></dt> + <dd>1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.</dd> + <dt><a name="vh"><code>vh</code></a></dt> + <dd>1/100<sup>e</sup> de la hauteur du <em>viewport</em>.</dd> + <dt><code>vi</code></dt> + <dd>1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.</dd> + <dt><a name="vw"><code>vw</code></a></dt> + <dd>1/100<sup>e</sup> de la largeur du <em>viewport</em>.</dd> + <dt><a name="vmin"><code>vmin</code></a></dt> + <dd>1/100<sup>e</sup> du côté le plus petit du <em>viewport</em>.</dd> + <dt><a name="vmax"><code>vmax</code></a></dt> + <dd>1/100<sup>e</sup> du côté le plus grand du <em>viewport</em>.</dd> +</dl> + +<h4 id="Unités_de_longueur_absolues">Unités de longueur absolues</h4> + +<p>Les unités de longueur absolues représentent une mesure physique. Cela est réalisé en faisant correspondre une des unités à une unité physique et en définissant les autres relativement à elle. La correspondance est différente pour les périphériques basse-résolution, tels que les écrans, et pour les périphériques haute-résolution, comme les imprimantes.</p> + +<p>Pour les périphériques ayant un faible nombre de points par pouce, l’unité <strong>px</strong> représente le pixel de <em>référence physique</em> et les autres sont définies de façon relative à lui. Ainsi, <code>1in</code> est définit comme <code>96px</code>, ce qui équivaut à <code>72pt</code>. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) ne correspondent pas forcément à la longueur de l’unité physique du même nom.</p> + +<p>Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) sont définis comme leur équivalent physique. Par conséquent, l’unité <strong>px</strong> est définie comme étant relavite à eux (1/96 de pouce).</p> + +<div class="note"> +<p><strong>Note :</strong> Les utilisateurs peuvent augmenter la taille des polices pour des raisons d’accessibilité. Pour permettre des mises en page adaptées quelque soit la taille des polices, utilisez uniquement des unités de longueur quand les caractéristiques physiques du média de sortie sont connues, telles que les images matricielles (bitmap) et sinon, privilégiez les unités relatives telles que <code>em</code> et <code>rem</code> (notamment pour {{cssxref("font-size")}}).</p> +</div> + +<dl> + <dt><a name="px"><code>px</code></a></dt> + <dd>Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.</dd> + <dt><a name="mm"><code>mm</code></a></dt> + <dd>Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> + <dt><code>Q</code>{{experimental_inline}}</dt> + <dd>Un quart de millimètre (1/40<sup>e</sup> de centimètre).</dd> + <dt><a name="cm"><code>cm</code></a></dt> + <dd>Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> + <dt><a name="in"><code>in</code></a></dt> + <dd>Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> + <dt><a name="pt"><code>pt</code></a></dt> + <dd>Un point pica (soit 1/72<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> + <dt><a name="pc"><code>pc</code></a></dt> + <dd>Un pica (soit 12 points, soit 1/6<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> + <dt><code><a name="mozmm">mozmm</a></code> {{non-standard_inline}}, retiré avec Firefox 59</dt> + <dd>Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.</dd> +</dl> + +<h2 id="Unités_CSS_et_points_par_pouce">Unités CSS et points par pouce</h2> + +<p class="note">L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p> + +<p>Quelques exemples particuliers :</p> + +<ul> + <li><code>1in</code> est toujours égal à <code>96px,</code></li> + <li><code>3pt</code> est toujours égal à <code>4px</code>,</li> + <li><code>25.4mm</code> est toujours égal à <code>96px.</code></li> +</ul> + +<h2 id="Interpolation">Interpolation</h2> + +<p>Les valeurs du type <code><length></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spécification</th> + <th>État</th> + <th>Commentaires</th> + </tr> + <tr> + <td>{{SpecName('CSS4 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td>Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code> et <code>rlh</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Ajout des unités <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Définition explicite des unités <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> (la définition était implicite pour CSS1)</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#length-units', '<length>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale. Définition implicite des unités <code>em</code>, <code>pt</code>, <code>pc</code> et <code>px</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("css.types.length")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Référence des unités et valeurs en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîtes CSS</a></li> +</ul> |