Que sont les pourcentages CSS ?
Les pourcentages CSS sont des valeurs relatives dont la taille de référence est définie séparément pour chaque propriété. Un pourcentage peut être calculé par rapport à un bloc conteneur, à la taille de police ou à une autre dimension calculée.
Fonctionnement des pourcentages CSS
Un pourcentage n’a pas de signification universelle en pixels ; la grammaire de la propriété détermine à la fois s’il est autorisé et quelle grandeur lui sert de base. Sa résolution peut intervenir lors du calcul de la valeur calculée ou de la valeur utilisée, et une dimension indéfinie du conteneur peut donner à certains pourcentages un comportement semblable à auto. Les pourcentages peuvent aussi intervenir dans des fonctions comme calc() et être combinés avec des longueurs lorsque la grammaire le permet. Ils jouent un rôle central dans les mises en page fluides, les transformations, les arrière-plans, la typographie et le positionnement.
Points clés
- Pour width, un pourcentage se rapporte normalement à la largeur du bloc conteneur, tandis que les valeurs de translate() exprimées en pourcentage se rapportent à la boîte de référence de l’élément transformé lui-même.
- Les espacements internes supérieur et inférieur exprimés en pourcentage sont basés sur la taille en ligne du bloc conteneur dans les modes d’écriture horizontaux courants, ce qui surprend souvent lors de la mise en œuvre de techniques fondées sur le rapport largeur/hauteur.
- Dans de nombreux contextes de mise en page, une hauteur exprimée en pourcentage nécessite que la hauteur du bloc conteneur puisse être déterminée ; sinon, elle peut se comporter comme auto. Ainsi,
height: 100%ne remplit pas nécessairement l’espace libre.
Quand les pourcentages CSS sont utiles
Utilisez des pourcentages lorsqu’un élément doit s’adapter à sa dimension de référence pertinente plutôt que conserver une taille fixe. Vérifiez la base du pourcentage de la propriété, car une même valeur peut être résolue différemment pour la largeur, la hauteur et les transformations.