text-size-adjust
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS text-size-adjust contrôle l'algorithme d'agrandissement du texte utilisé sur certains smartphones et tablettes. Les autres navigateurs ignorent cette propriété.
Comme de nombreux sites n'ont pas été développés en pensant aux petits appareils, les navigateurs mobiles diffèrent des navigateurs de bureau dans la manière dont ils rendent les pages web. Au lieu de disposer les pages à la largeur de l'écran de l'appareil, ils les disposent en utilisant une zone d'affichage beaucoup plus large, généralement 800 ou 1000 pixels. Pour ramener cette disposition très large à la taille réelle de l'appareil, ils affichent soit une partie du rendu, soit réduisent la zone d'affichage pour l'adapter.
Comme le texte réduit pour s'adapter à un écran mobile peut devenir très petit, de nombreux navigateurs mobiles appliquent un algorithme d'agrandissement du texte pour le rendre plus lisible. Lorsque un élément contenant du texte utilise 100% de la largeur de l'écran, l'algorithme augmente la taille du texte sans modifier la mise en page. La propriété text-size-adjust permet aux auteur·ice·s web de désactiver ou de modifier ce comportement, les pages conçues pour les petits écrans n'en ayant pas besoin.
Syntaxe
/* Valeur avec un mot-clé */
text-size-adjust: none;
text-size-adjust: auto;
/* Valeurs de type <percentage> */
text-size-adjust: 80%;
/* Valeurs globales */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;
La propriété text-size-adjust est définie comme none, auto ou un <percentage>.
Valeurs
none-
Désactive l'algorithme d'agrandissement du texte du navigateur.
auto-
Active l'algorithme d'agrandissement du texte du navigateur. Cette valeur est utilisée pour annuler une valeur
noneprécédemment définie avec CSS. <percentage>-
Active l'algorithme d'agrandissement du texte du navigateur, en spécifiant un pourcentage avec lequel augmenter la taille de la police.
Définition formelle
| Valeur initiale | auto pour les navigateurs de smartphones qui supportent l'expansion, none dans les autres cas (non modifiable alors). |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Pourcentages | oui, indique la taille correspondante de la police de texte |
| Valeur calculée | comme défini |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
text-size-adjust =
auto |
none |
<percentage [0,∞]>
Exemples
Utilisation simple de la désactivation
Comme indiqué ci-dessus, sur un site correctement conçu pour être réactif, le comportement text-size-adjust n'est pas nécessaire, les développeurs peuvent donc choisir de le désactiver en spécifiant une valeur de none :
p {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
Spécifications
| Spécification |
|---|
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |
Compatibilité des navigateurs
Voir aussi
- La documentation d'Apple (angl.) (2016)
- Description du comportement de Google Chrome (angl.) (2014)
- Description du comportement de Gecko (angl.) par L. David Baron (2011)