Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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.

Compatibilité des navigateurs

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)

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, Prinz_Rana, fscholz, teoli, FredB, tregagnon, BenoitL
 Dernière mise à jour par : SphinxKnight,