mozilla

pourcentage

Résumé

Le type de données CSS <percentage> représente une valeur en pourcentage. De nombreuses propriétés CSS prennent des valeurs en pourcentages, souvent pour déterminer des tailles en fonction de leurs parents. 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, comme width, margin et padding. 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 <longueur>, 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

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

L'HTML ci-dessus produira :

Width: 50%, Left margin: 20%
Width: 30%, Left margin: 60%

 

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

L'HTML ci-dessus produira :

Texte taille normal (18px) 50% 200%

Spécifications

Spécification Statut Commentaires
CSS Values and Units Module Level 3 Candidate Recommendation Aucun changement significatif depuis CSS Level 2 (Revision 1)
CSS Level 2 (Revision 1) Recommendation Aucun changement par rapport à CSS Level 1
CSS Level 1 Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support basique 1.0 1.0 (1.0) <=5.0 (Oui) 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support basique (Oui) (Oui) (Oui) (Oui) (Oui)

Voir également

Types de données CSS : <angle>, <blend-mode>, <color>, <frequency>, <gradient>, <image>, <length>, <number>, <percentage>, <position>, <ratio>, <resolution>, <shape>, <string>, <time>, <timing-function>, <uri>, <user-ident>

Étiquettes et contributeurs liés au document

Contributeurs à cette page : FredB
Dernière mise à jour par : FredB,
Masquer la barre latérale