<percentage>
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Le type de données CSS <percentage> représente une valeur en pourcentage. Il est souvent utilisé pour définir une taille relative à l'objet parent d'un élément. De nombreuses propriétés peuvent utiliser des pourcentages, telles que width, height, margin, padding et font-size.
Note :
Seules les valeurs calculées peuvent être héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parente, une valeur réelle (comme une largeur en pixels pour une valeur <length>) sera accessible sur la propriété héritée, et non la valeur en pourcentage.
Syntaxe
Le type de données <percentage> est composé d'un <number> suivi du signe pourcentage (%). Il peut éventuellement être précédé d'un seul signe + ou -, bien que les valeurs négatives ne soient pas valides pour toutes les propriétés. Comme pour toutes les dimensions CSS, il n'y a aucun espace entre le symbole et le nombre.
Interpolation
Lorsqu'elles sont animées, les valeurs du type <percentage> sont interpolées sous forme de 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 class="container">
<div class="box1">width : 50%, left-margin : 20%</div>
<div class="box2">width : 30%, left-margin : 60%</div>
</div>
.container {
background-color: navy;
}
.box1 {
width: 50%;
margin-left: 20%;
background-color: chartreuse;
}
.box2 {
width: 30%;
margin-left: 60%;
background-color: pink;
}
font-size
<div class="container">
<p>Texte en taille normale (18px)</p>
<p><span class="half">50% (9px)</span></p>
<p><span class="double">200% (36px)</span></p>
</div>
.container {
font-size: 18px;
}
.half {
font-size: 50%;
}
.double {
font-size: 200%;
}
Spécifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # percentages |
Compatibilité des navigateurs
Voir aussi
- Le type de données
<length-percentage> - Le module des valeurs et unités CSS