mozilla
Vos résultats de recherche

    longueur

    Résumé

    Le type de données CSS <longueur> correspond à une mesure de distance. C'est un <number> 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 width, margin, padding, font-size, border-width, 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 <percentage> 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 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 font-size calculée de l'élément. Si utilisée avec la propriété 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 line-height, font-size, margin-bottom et margin-top ont souvent des dimensions exprimées en em.

    ex
    Cette unité représente la hauteur d'x de la 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 font-size de l'élément racine (par exemple la taille de la police de l'élément <html>). Quand utilisée avec 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 @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 minimale entre la hauteur et la largeur du viewport.
    vmax
    1/100e de la valeur maximale entre la hauteur et la largeur du viewport.

    Unités de longueur absolues

    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.

    Pour les périphériques ayant un faible nombre de points par pouce, l’unité px représente le pixel de référence physique et les autres sont définies de façon relative à lui. Ainsi, 1in est définit comme 96px, ce qui équivaut à 72pt. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (in), centimètres (cm) et millimètres (mm) ne correspondent pas forcément à la longueur de l’unité physique du même nom.

    Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (in), centimètres (cm) et millimètres (mm) sont définis comme leur équivalent physique. Par conséquent, l’unité px est définie comme étant relavite à eux (1/96 de pouce).

    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). When setting length related to font-size, prefer relative units like em or rem.

    px
    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.
    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.
    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.
    in
    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.
    pt
    Un point pica (soit 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 (soit 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.
    mozmm
    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.

    Unités CSS et points par pouce

    L’unité in ne représente pas un pouce physique de l’écran, mais 96px. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à 96dpi. Sur les périphériques dotés d’une plus grande densité de pixel, 1in fera moins d’1 pouce physique. De la même manière,  mm, cm, et pt ne sont pas des longueurs absolues.

    Quelques exemples spécifiques :

    • 1in est toujours égal à 96px,
    • 3pt est toujours égal à 4px,
    • 25.4mm est toujours égal à 96px.

    Spécifications

    Spécification Statut Commentaire
    CSS Values and Units Module Level 3 Candidate Recommendation Ajoute ch, rem, vw, vh, vmin, vmax
    CSS Level 2 (Revision 1) Recommendation pt, pc, px sont explicitement définies (elles l'étaient implicitement en CSS1)
    CSS Level 1 Recommendation  

    Compatibilité des navigateurs

    Fonctionnalité Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
    Support de base 1.0 1.0 (1.7 ou moins) 3.0 3.5 1.0
    ch Pas de support 1.0 (1.7 ou moins) [1] 9.0 20.0 7.0 et antérieur
    rem 4 (532.3) 3.6 (1.9.2) 9.0 11.6 4.1
    vh, vw 20.0 19 (19) 9.0 20.0 6.0
    vmin

    20.0

    19 (19) 9.0 (avec le nom non-standard vm) 20.0 6.0
    vmax 26 19 (19) Pas de support 20.0 Pas de support (537.30)
    Longueurs liées au viewport non valides dans @page ? 21 (21) ? ? ?
    mozmm Pas de support 4.0 (2.0) Pas de support Pas de support Pas de support
    1in est toujours 96dpi (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
    Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base (Oui) (Oui) (Oui) (Oui) (Oui)
    ch Pas de support (Oui) 7.8 ? 7.1.1
    rem 2.1 (Oui) ? 12.0 4
    vh, vw, vmin (Oui) 19.0 (19) ? Pas de support 6.0
    vmax Pas de support (bug 91440) 19.0 (19) ? Pas de support Pas de support (bug 91440)
    Longueurs liées au viewport non valides dans @page ? 21.0 (21.0) ? ? ?

    [1] Dans Gecko 1.0 à 1.9.0 (Firefox 1.0 à 3.0), ch était la largeur du caractère « M » et ne fonctionnait pas pour les propriétés CSS border-width et outline-width.

    Voir également

    Les types de données CSS : <angle>, <blend-mode>, <color>, <frequency>, <gradient>, <image>, <length>, <number>, <percentage>, <position>, <ratio>, <resolution>, <shape>, <string>, <time>, <timing-function>, <uri>, <user-ident>

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: tregagnon, Fredchat, Mgjbot, Goofy, teoli, wakka27, BenoitL, FredB, Kyodev
    Dernière mise à jour par : teoli,
    Masquer la barre latérale