<percentage>

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. Les pourcentages sont formés 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.

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.

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`

<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`

<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

Spécification	État	Commentaires
CSS Values and Units Module Level 3 La définition de '<percentage>' dans cette spécification.	Candidat au statut de recommandation	Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).
CSS Level 2 (Revision 1) La définition de '<percentage>' dans cette spécification.	Recommendation	Aucune modification depuis la spécification CSS de niveau 1.
CSS Level 1 La définition de '<percentage>' dans cette spécification.	Recommendation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	1.0	1.0 (1.7 ou moins)	(Oui)	(Oui)	1.0 (85)

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	(Oui)	(Oui)	(Oui)	(Oui)	(Oui)