longueur

  • Raccourci de la révision : CSS/longueur
  • Titre de la révision : longueur
  • ID de la révision : 451867
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

Le type de données CSS <longueur> correspond à une mesure de distance. C'est un {{ xref_cssnumber() }} immédiatement suivi par une unité de longueur (px, em, pc, in, mm, …). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité.

De nombreuses propriétés CSS utilisent des longueurs comme valeurs, telles que {{ Cssxref("width") }}, {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("font-size") }}, {{ Cssxref("border-width") }}, {{ Cssxref("text-shadow") }}, …

Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, mais les longueurs négatives sont autorisées pour d'autres. Veuillez noter que bien que les valeurs {{ Xref_csspercentage() }} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <longueur>, elles ne sont pas elle-mêmes des valeurs <longueur>.

Interpolation

Les valeurs du type <longueur> 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") }} associée à l'animation.

Unités

Unités de longueur relatives

Longueurs liées à la police

em

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 héritée de l'élément.

Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le rythme vertical de la page, 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 em.

ex
Cette unité représente la hauteur d'x 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. 1ex ≈ 0.5em dans de nombreuses polices.
ch
Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle.
rem

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.

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é em, mais la réalisation est un petit peu plus complexe.

Longueurs liées au viewport

Les longueurs liées au viewport définissent une longueur relative à la taille du viewport, qui est la partie visible du document.

Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au viewport sont non valides et la déclaration sera ignorée.

vh
1/100e de la hauteur du viewport.
vw
1/100e de la largeur du viewport.
vmin
1/100e de la valeur minimum entre la hauteur et la largeur du viewport.
vmax
1/100e de la valeur maximum entre la hauteur et la largeur du viewport.

Unités de longueur absolues

px
Pour l'affichage sur écran, un pixel de l'affichage. Pour les écrans en haute résolution et pour les imprimantes, un groupement de plusieurs pixels, ainsi le nombre de px par pouce (ppi) reste aux alentours de 96.
in
Un pouce (en anglais inch, équivalent à 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.
cm
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.
mm
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.
pt
Un point pica (équivalent à 1/72e 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.
pc
Un pica (équivalent à 12 points, soit 1/6e 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.

Spécifications

Spécification Statut Commentaire
{{ SpecName('CSS3 Values', '#lengths', '<length>') }} {{ Spec2('CSS3 Values') }} Ajoute ch, rem, vw, vh, vmin, vmax
{{ SpecName('CSS2.1', 'syndata.html#length-units', '<length>') }} {{ Spec2('CSS2.1') }} pt, pc, px sont explicitement définies (elles l'étaient implicitement en CSS1)
{{ SpecName('CSS1', '#length-units', '<length>') }} {{ Spec2('CSS1') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonctionnalité Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
Support basique 1.0 {{ CompatGeckoDesktop("1.0")}} 3.0 3.5 1.0
ch {{ CompatNo() }} {{ CompatGeckoDesktop("1.0")}} [1] 9.0 {{ CompatNo() }} {{ CompatNo() }}
rem 4 (532.3) {{ CompatGeckoDesktop("1.9.2")}} 9.0 11.6 4.1
vh, vw 20.0 {{CompatGeckoDesktop("19")}} 9.0 {{ CompatNo() }} 6.0
vmin

20.0

{{CompatGeckoDesktop("19")}} 9.0 (avec le nom non-standard vm) {{ CompatNo() }} 6.0
vmax 26 {{CompatGeckoDesktop("19")}} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} (537.30)
Longueurs liées au viewport non valide dans {{cssxref("@page")}} {{CompatUnknown}} {{CompatGeckoDesktop("21")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
mozmm {{non-standard_inline()}} {{ CompatNo() }} {{ CompatGeckoDesktop("2.0")}} {{ CompatNo() }} {{ CompatNo() }} 6.0
1in est toujours 96dpi {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0")}} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support basique {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
ch {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
rem 2.1 {{ CompatVersionUnknown() }} {{ CompatUnknown() }} 12.0 4
vh, vw, vmin {{ CompatVersionUnknown() }} {{CompatGeckoMobile("19")}} {{ CompatUnknown() }} {{ CompatNo() }} 6.0
vmax {{ CompatNo() }} (bug 91440) {{CompatGeckoMobile("19")}} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} (bug 91440)
Longueurs liées au viewport non valide dans {{cssxref("@page")}} {{CompatUnknown}} {{CompatGeckoMobile("21.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Voir également

Les types de données CSS : {{ CSSDataTypes() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>Le type de données <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>&lt;longueur&gt;</code> correspond à une mesure de distance. C'est un {{ xref_cssnumber() }} immédiatement suivi par 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é.</p>
<p>De nombreuses propriétés CSS utilisent des longueurs comme valeurs, telles que {{ 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, mais les longueurs négatives sont autorisées pour d'autres. Veuillez noter que bien que les valeurs {{ Xref_csspercentage() }} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <code>&lt;longueur&gt;</code>, elles ne sont pas elle-mêmes des valeurs <code>&lt;longueur&gt;</code>.</p>
<h2 id="Interpolation">Interpolation</h2>
<p>Les valeurs du type <code>&lt;longueur&gt;</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") }} associée à l'animation.</p>
<h2 id="Unit.C3.A9s" name="Unit.C3.A9s">Unités</h2>
<h3 id="Unit.C3.A9s_de_longueur_relatives">Unités de longueur relatives</h3>
<h4 id="Longueurs_li.C3.A9es_.C3.A0_la_police">Longueurs liées à la police</h4>
<dl>
  <dt>
    <a name="em">em</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/" title="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">ex</a></dt>
  <dd>
    Cette unité représente la <a href="https://fr.wikipedia.org/wiki/Hauteur_d%27x" title="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 style="white-space: nowrap;">1ex ≈ 0.5em </code>dans de nombreuses polices.</dd>
  <dt>
    <a name="ch">ch</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.</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>
</dl>
<h4 id="Longueurs_li.C3.A9es_au_viewport">Longueurs liées au viewport</h4>
<p>Les longueurs liées au viewport définissent une longueur relative à la taille du viewport, qui est la partie visible du document.</p>
<p>Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au viewport sont non valides et la déclaration sera ignorée.</p>
<dl>
  <dt>
    <a name="vh"><code>vh</code></a></dt>
  <dd>
    1/100e de la hauteur du viewport.</dd>
  <dt>
    <a name="vw"><code>vw</code></a></dt>
  <dd>
    1/100e de la largeur du viewport.</dd>
  <dt>
    <a name="vmin"><code>vmin</code></a></dt>
  <dd>
    1/100e de la valeur minimum entre la hauteur et la largeur du viewport.</dd>
  <dt>
    <a name="vmax"><code>vmax</code></a></dt>
  <dd>
    1/100e de la valeur maximum entre la hauteur et la largeur du viewport.</dd>
</dl>
<h3 id="Unit.C3.A9s_de_longueur_absolues">Unités de longueur absolues</h3>
<dl>
  <dt>
    <a name="px">px</a></dt>
  <dd>
    Pour l'affichage sur écran, un pixel de l'affichage. Pour les écrans en haute résolution et pour les imprimantes, un groupement de plusieurs pixels, ainsi le nombre de <code>px</code> par pouce (ppi) reste aux alentours de 96.</dd>
  <dt>
    <a name="in">in</a></dt>
  <dd>
    Un pouce (en anglais <em>inch</em>, équivalent à 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="cm">cm</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="mm">mm</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>
    <a name="pt">pt</a></dt>
  <dd>
    Un point pica (équivalent à 1/72e 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">pc</a></dt>
  <dd>
    Un pica (équivalent à 12 points, soit 1/6e 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>
</dl>
<h2 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th>Spécification</th>
      <th>Statut</th>
      <th>Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Values', '#lengths', '&lt;length&gt;') }}</td>
      <td>{{ Spec2('CSS3 Values') }}</td>
      <td>Ajoute <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code></td>
    </tr>
    <tr style="vertical-align: top;">
      <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;') }}</td>
      <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
      <td style="vertical-align: top;"><code>pt</code>, <code>pc</code>, <code>px</code> sont explicitement définies (elles l'étaient implicitement en CSS1)</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{ SpecName('CSS1', '#length-units', '&lt;length&gt;') }}</td>
      <td style="vertical-align: top;">{{ Spec2('CSS1') }}</td>
      <td style="vertical-align: top;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome (WebKit)</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support basique</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0")}}</td>
        <td>3.0</td>
        <td>3.5</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td><code>ch</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.0")}} [1]</td>
        <td>9.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>rem</code></td>
        <td>4 (532.3)</td>
        <td>{{ CompatGeckoDesktop("1.9.2")}}</td>
        <td>9.0</td>
        <td>11.6</td>
        <td>4.1</td>
      </tr>
      <tr>
        <td><code>vh, vw</code></td>
        <td>20.0</td>
        <td>{{CompatGeckoDesktop("19")}}</td>
        <td>9.0</td>
        <td>{{ CompatNo() }}</td>
        <td>6.0</td>
      </tr>
      <tr>
        <td><code>vmin</code></td>
        <td>
          <p>20.0</p>
        </td>
        <td>{{CompatGeckoDesktop("19")}}</td>
        <td>9.0 (avec le nom non-standard <code>vm</code>)</td>
        <td>{{ CompatNo() }}</td>
        <td>6.0</td>
      </tr>
      <tr>
        <td><code>vmax</code></td>
        <td>26</td>
        <td>{{CompatGeckoDesktop("19")}}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} (537.30)</td>
      </tr>
      <tr>
        <td>Longueurs liées au viewport non valide dans {{cssxref("@page")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop("21")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>mozmm</code> {{non-standard_inline()}}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("2.0")}}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>6.0</td>
      </tr>
      <tr>
        <td><code>1in</code> est toujours <code>96dpi</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0")}}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support basique</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>ch</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>rem</code></td>
        <td>2.1</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>12.0</td>
        <td>4</td>
      </tr>
      <tr>
        <td><code>vh, vw, vmin</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{CompatGeckoMobile("19")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>6.0</td>
      </tr>
      <tr>
        <td><code>vmax</code></td>
        <td>{{ CompatNo() }} (<a href="https://bugs.webkit.org/show_bug.cgi?id=91440" title="https://bugs.webkit.org/show_bug.cgi?id=91440">bug 91440</a>)</td>
        <td>{{CompatGeckoMobile("19")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} (<a href="https://bugs.webkit.org/show_bug.cgi?id=91440" title="https://bugs.webkit.org/show_bug.cgi?id=91440">bug 91440</a>)</td>
      </tr>
      <tr>
        <td>Longueurs liées au viewport non valide dans {{cssxref("@page")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("21.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h2>
<p>Les types de données CSS : {{ CSSDataTypes() }}</p>
Revenir à cette révision