<percentage>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Le type de données CSS <percentage> représente une valeur exprimée en pourcentages. De nombreuses propriétés CSS utilisent des valeurs en pourcentages, la plupart du temps pour déterminer des tailles en fonction de la taille des éléments parent.

De nombreuses propriétés CSS utilisent des pourcentages : width, margin, padding, etc.. Les pourcentages peuvent aussi être vus avec font-size, où la taille du texte est directement en relation avec celle de son parent.

Note : Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur <length>, sera accessible sur la propriété héritée, pas la valeur en pourcentage.

Syntaxe

Les valeurs de type <percentage> sont formées d'un <number> immédiatement suivi par le signe pourcentage %. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.

Interpolation

Les valeurs du type <percentage> 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. La rapidité de l'interpolation est déterminée par la fonction de temporisation associée à l'animation.

Exemples

`width` et `margin-left`

html

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">
    width : 50%, left-margin : 20%
  </div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">
    width : 30%, left-margin : 60%
  </div>
</div>

Le fragment de HTML précédent sera affiché de cette façon :

`font-size`

html

<div style="font-size:18px;">
  <p>Texte en taille normale (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>

Le fragment HTML précédent donnera ce résultat :

Spécifications

Specification
CSS Values and Units Module Level 4 # percentages

Compatibilité des navigateurs

BCD tables only load in the browser