12 Unités de mesure

Dans un outil de conception graphique, nous travaillons généralement avec des valeurs de pixels ou de points, car le format de la sortie peut être fixe, par exemple 1920×1080 pixels ou A4, A3 etc.

Le pixel et le point existent également dans le développement web, mais ils sont souvent trop statiques (unités de mesure absolues) pour adapter efficacement les mises en page et les polices à toutes les tailles d'écran possibles.

C'est pourquoi le CSS comporte de nombreuses unités de mesure relatives qui peuvent être réduites ou augmentées en fonction de leur place dans la mise en page ou de la taille de la police.

Unités absolues

# px - Fraction of Device Pixel

Un pixel est le plus petit carré possible qu'un écran peut afficher. L'unité px dans le CSS n'est pas tout à fait la même que les pixels dans le sens des écrans (device-pixel).

La valeur 1px dans le CSS est d'environ 1/96 de pouce. Cela signifie que 1px pour un écran de 96 PPI (Pixel Per Inch) couvre également 1 pixel de l'appareil, (96 / 96 = 1) ou 0,0104167 pouce (1 / 96 = 0,0104167) ou 0,026458418 centimètre.

Pour un écran de 300 PPI, 1px n'est plus égal à 1 pixel de l'appareil (96 / 300 = 0,32 pixel de l'appareil) ou 0,001067 pouce (0,32 / 300 = 0,001067) ou 0,00271018 centimètre.

Pour que nos dessins ne s'affichent pas beaucoup plus petits sur des écrans haute résolution, tous les fabricants utilisent un rapport de pixels. Il s'agit d'un facteur permettant de convertir les px du CSS en pixels-ecran.

Apple, par exemple, utilise un rapport de 2 pixels, ce qui garantit qu'un pixel CSS occupe deux pixels de l'appareil et a donc visuellement à peu près la même taille que sur un écran avec la moitié du PPI.

Normalement, les écrans utilisent un facteur de 1 pour convertir la taille correcte d'un pixel CSS en pixels de l'appareil et donc en pouces/centimètres.

Exemple Nous définissons avec le CSS une boîte d'une largeur de '96px'. Un écran de 96 PPI fait cela :

    96 pixels CSS * 1 / 96 PPI = 1 pouce ou 2,54 cm.

Pour les écrans haute résolution (comme les écrans Retina), ce facteur (ou rapport de pixels par défaut) est porté à 2. Donc :

    96 pixels CSS * 2 / 300 PPI = 0,64 pouce ou 1,6256 cm

:memo: Note

Comme vous pouvez le voir d'après les valeurs, la largeur de la boîte (à la même diagonale d'écran et à la même distance) diffère donc de plus d'un centimètre entier ! Cela crée de grandes difficultés dans le contexte du Responsive Design. Par conséquent, les unités de mesure relatives sont préférables pour la disposition des éléments.

cm, mm - Unités métriques (centimètre, millimètre)

Les lettres cm et mm sont toujours proportionnelles aux lettres px dans le CSS. Cependant, il n'y a guère de cas d'utilisation réelle où il serait logique d'utiliser mm ou cm dans le CSS.

    1mm = 0,1cm = 3,78px * rapport des pixels

:hand: Tâches

Recherchez des exemples ou des graphiques afin de pouvoir présenter clairement les unités absolues à la classe. Collez vos liens et exemples dans ce document Google

# Font-Relative Units

# em - context font-size

L'unité de mesure em provient de la typographie et des temps de plomb. Ici, 1em était la largeur de la lettre M, qui correspondait généralement aussi à la hauteur minimale de la ligne. Aujourd'hui, à l'ère du numérique avec un choix énorme de polices de caractères, la largeur de M ne correspond pas toujours (ou du moins pas exactement) à la hauteur minimale de ligne. C'est pourquoi le em dans le CSS ne se réfère plus à la lettre M, mais à la taille actuelle de la police ou font-size.

EM est toujours relatif à la font-size définie dans l'élément DOM parent suivant. Si aucun font-size n'est trouvé, la taille de police par défaut (généralement 16px) de l'élément de DOM html est utilisée.

    /* taille de la police parent: 16px */
    2em = 32px
    
    /* taille de la police parent: 32px */
    2em = 64px

# rem - root font-size

Rem est identique à Em, à la différence que Rem est toujours proportionnel à la taille de la police de l'élément de DOM englobant html, c'est-à-dire l'élément racine.

    /* taille de la police racine: 16px*/
    1rem = 16px

Les systèmes EM et REM présentent l'avantage que lorsque vous apportez un changement à un élément parent, tous les enfants héritent de ce changement (également appelé héritage). Par exemple, vous pouvez augmenter ou réduire la taille de la police pour toute votre page sans avoir à ajuster une taille de police fixe en px pour chaque élément individuel.

# ex, ch - x-height & 0-width

Cette unité de mesure se réfère à la hauteur de la lettre minuscule x de la police sélectionnée. Contrairement à em, ex change lorsque vous changez de police, car la hauteur du x peut être différente selon la police, mais la taille de la police reste la même.

ch fonctionne de manière très similaire à ex, sauf qu'il fait référence à la largeur du chiffre 0 dans la police sélectionnée. Cela change également si vous choisissez une police différente.

Ces deux unités sont principalement utilisées en CSS lorsqu'il s'agit de réaliser une microtypographie précise.

:hand: Tâches

Recherchez des exemples ou des graphiques afin de pouvoir présenter clairement à la classe les unités relatives aux polices de caractères. Collez vos liens et exemples dans ce document Google

Viewport Units

# vw - viewport width

1vw est égal à 1 % de la largeur de l'écran. Contrairement au pourcentage, les unités de visualisation ignorent l'imbrication des éléments et sont toujours basées sur les dimensions de l'écran.

# vh - viewport height

Pareil que vw, sauf que vh fait référence à la hauteur de l'écran.

# vmin - côté-vue plus petit

Le terme vmin fait référence au petit côté de l'écran. C'est particulièrement pratique pour les écrans qui peuvent passer du mode portrait au mode paysage, comme les tablettes et les smartphones.

# vmax - larger viewport side

C'est la même chose que vmin, mais vmax fait référence au côté long de l'écran.

:hand: Tâches

Recherchez des exemples ou des graphiques vivants afin de pouvoir présenter clairement les unités Viewport à la classe. Collez vos liens et exemples dans ce document Google

# Pourcentages

# % - pourcentages

Les pourcentages sont des valeurs relatives qui se réfèrent toujours à une autre valeur. Il n'y a fondamentalement que trois possibilités pour cela :

• La valeur en pourcentage d'une propriété fait référence à la valeur d'une autre propriété du même élément, par exemple une valeur en pourcentage pour la line-height dépend de la font-size du même élément.

• La valeur en pourcentage d'une propriété se réfère à la valeur d'une propriété d'un élément parent, par exemple, une valeur en pourcentage pour font-size dépend de la font-size de l'élément parent.

• La valeur en pourcentage d'une propriété se réfère au contexte du formatage, par exemple une valeur en pourcentage pour la width ou la height dépend de la largeur ou de la hauteur de l'élément parent qui l'entoure.

Exemple Nous définissons un div en HTML et lui donnons une largeur de 500px en CSS. Maintenant, nous emboîtons un autre div dans ce div en HTML et nous lui donnons la propriété width: 50% en CSS - alors le div intérieur sera affiché en largeur de 250px.

:memo: Note

Veuillez noter que le navigateur définit automatiquement des valeurs comme width et height sur les éléments de bloc, même si vous ne l'avez pas déclaré explicitement dans votre CSS. Cela fait beaucoup de travail pour vous, donc vous n'avez pas à styliser tous les éléments du DOM manuellement en CSS. Cela signifie que vous pouvez utiliser des pourcentages la plupart du temps, même si vous n'avez pas défini manuellement sur quoi le pourcentage doit être basé.

:hand: Tâches

Recherchez des exemples ou des graphiques afin de pouvoir présenter clairement à la classe les unités de pourcentage. Collez vos liens et exemples dans ce document Google

# Overview & Browser Support

Dans cet exemple, vous trouverez une représentation visuelle des différentes unités. De plus, toutes les barres doivent être vertes pour vous. Cela vous montre que votre navigateur peut afficher toutes les unités affichées.

https://codepen.io/chriscoyier/pen/CiwFD/

🔗 Conseils et liens

Understandingcss units The Lengths of CSS

Variables CSS

Les variables CSS sont des entités définies pour contenir des valeurs pouvant être utilisées dans tout le document. Elles sont créées en initiant des propriétés personnalisées telles que --main-color: noir; et sont accessibles en utilisant la syntaxe var() tel que color: var(--main-color);. Ces propriétés permettent de réduire la répétition de la valeur et simplifient la maintenance du code.

Exemple :

    :root {
        --main-color: black;
        --main-bg-color: white;
    }

    body {
        color: var(--main-color);
        background-color: var(--main-bg-color);
    }

:hand: Tâches Remplacer les couleurs de votre site web par des variables CSS.