Back

Les unités de mesure en CSS

Les unités de mesure en CSS

  1. Objectif

    • Apprendre les types les plus courants de valeurs des propriétés des CSS et leurs unités associées.
  2. Itroduction

    • La spécification de certaines valeurs en CSS nécessite l’utilisation d’un certain nombre d’unités de mesure. Cette notion est importante pour que l’on ne s’y perde pas nous-mêmes dans nos spécifications.
    • Il y a plusieurs façons d’indiquer des valeurs en CSS et en fonction de celles-ci, on utilise différentes unités de mesure. Pour spécifier une valeur en CSS on l’exprime parfois juste avec des termes en anglais.



  3. Les unités relatives

    • Les unités relatives sont appelées ainsi car elles ne représentent pas une longueur prédéfinie mais une longueur relative à une référence.
    • Unité
      Définition
      %
      Représente une valeur en pourcentage. La référence peut être le parent,l’élément lui même ou tout autre valeur.
      em
      • Représente une proportion de la taille de la police courante.
      • L’unité em se rapporte à la taille de la police.
      • Avec elle on peut affecter une mesure relative à la taille de police de l’élément parent.
      • Elle permet d’avoir des feuilles de style plus facilement adaptables d’un média à un autre.
      • Les nombres décimaux sont autorisés, mais il faut tout simplement remplacer la virgule par un point.
      • Cette valeur em est utilisable pour d’autres propriétés acceptant la mention de longueur.
      ex
      • Représente la hauteur du glyphe ‘x’ (ou équivalent) dans la police courante
      • L’unité ex est utilisée souvent pour exprimer la hauteur des caractères.
      • Le point de référence est la hauteur des minuscules souvent appelée hauteur “x” lowercase.
      • En d’autres termes, dans le cas où la taille est donnée avec une unité “ex”, celle-ci est alors mesurée par rapport à la hauteur de la minuscule x de l’élément parent.
      ch
      Représente la dimension du glyphe ‘0’
      rem
      Représente la taille de la police de l’élément html.
      fr
      Représente une fraction de l’espace restant.
      dpi
      Représente la résolution du périphérique.
      vw
      Représente la largeur du viewport du périphérique.
      vh
      Représente la hauteur du viewport.
      vm
      Représente la plus petite valeur du viewport (largeur ou hauteur).

  4. Les unités absolues
    • Ces unités sont applicables sur toutes les propriétés nécessitant une valeur correspondant à une distance.
    • Elles sont cependant totalement dépendantes de la résolution du média sur lequel on visualise la page, il faudra donc être vigilant quant à l’utilisation des unités absolues
    • Unité
      Définition
      cm
      centimètre
      mm
      millimètre
      in
      pouce, c’est environ 2,54 cm
      px
      pixel, initialement 1 px est égal à 1/96 ème de pouce
      pt
      point, initialement 1 pt est égal à 1/72 ème de pouce
      pc
      pica, 1 pc est égal 12 pt

  5. Les unités d’angles
    • Nous les utiliserons notamment pour définir des transformations.
    • Notons la présence de l’unité turn, très utile pour définir des cycles de rotations, son implémentation est bientôt complète, Mozilla
      l’ayant ajoutée à Firefox 13
    • Unité
      Définition
      deg
      degré, 1 tour = 360 deg
      grad
      grade, 1 tour = 400 grad
      rad
      radian, 1 tour = 2π =6,28 rad
      turn
      tour, 0,5 tour = 180 deg

  6. Les unités de temps
    • Nous les utiliserons pour les transitions et les animations (tableau 2.18) mais sachez qu’elles sont aussi utiles pour les media de type audio (media speech).
    • Unité
      Définition
      s
      seconde
      ms
      milliseconde,1 000 ms = 1s



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement