Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété text-size-adjust permet de contrôler l'algorithme d'amplification du texte sur certains appareils mobiles. Cette propriété n'est pas standard et doit donc être préfixée : -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.
De nombreuses pages web n'ont pas été conçues pour le mobile et les navigateurs mobiles n'affichent pas les pages web de la même façon que les navigateurs de bureau. Plutôt que d'afficher une page web dans la largeur de l'écran, un navigateur mobile sera parfois amené à l'afficher dans une zone d'affichage beaucoup plus large que l'écran. Pour gérer la largeur de l'écran, le navigateur n'affichera qu'une partie ou rétrécira la taille de la zone d'affichage.
Par essence, cela signifie que, sur mobiles, on ne voit qu'une portion rectangulaire de la page ou que la page a l'air dézoomée (et apparaît donc plus petite).
Cependant, lorsque l'utilisateur zoome jusqu'à ce que le texte soit lisible, on a alors une barre horizontale de défilement qui apparaît car le texte est large que la largeur de l'écran et l'ergonomie est donc détériorée car l'utilisateur doit défiler à la fin et au début à chaque passage à la ligne. Pour éviter ce problème, plusieurs navigateurs mobiles implémentent un algorithme de gonflement (inflation). Lorsqu'un élément reçoit le focus, qu'il contient du texte et qu'il utilise 100 % de la largeur de l'écran, la taille du texte est augmentée afin qu'il soit lisible, sans pour autant modifier la disposition générale (ce qui évite d'avoir à recourir à une barre de défilement horizontale).
La propriété text-size-adjust permet aux auteurs de ne pas suivre ce comportement si les pages web ont été adaptées pour les différents formats d'écran.
- Cette propriété n'est pas standard et les auteurs doivent donc la dupliquer plusieurs fois avec les différents préfixes nécessaires afin de l'utiliser.
- Le comportement et la syntaxe de cette propriété varient d'un navigateur à l'autre. Veuillez vous référer au tableau de compatibilité ci-après pour de plus amples informations.
- Cette propriété n'agit que pour les smartphones. Les navigateurs utilisés par les ordinateurs de bureau n'ont pas d'algorithme de gonflement, sur certaines tablettes (l'iPad par exemple), cette propriété n'est pas suppportée. Cette propriété est uniquement conçue pour ne pas utiliser ce comportement offert par le navigateur.
- Si
-webkit-text-size-adjustvaut explicitementnone, les anciennes versions des navigateurs basées sur Webkit (Chrome ≤ 26 ou Safari ≤ 5) empêcheront l'utilisateur de zoomer/dézommer (voir #ce bug). - Tous les moteurs ne permettent pas de contrôler la taille finale du texte grâce à un pourcentage (Webkit et Trident le permettent, Gecko ne le permet pas). Là encore, veuillez vous référer au tableau de compatibilité ci-après.
| Valeur initiale | auto pour les navigateurs de smartphones qui supportent l'expansion, none in 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 |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Le texte n'est jamais amplifié */ text-size-adjust: none; /* Le texte peut être amplifié */ text-size-adjust: auto; /* Le texte peut être amplifié avec cette proportion */ text-size-adjust: 80%; /* Valeurs globales */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset;
Valeurs
none- Un mot-clé qui permet de ne pas utiliser l'algorithme de gonflement. En résumé, cela signifie que l'élément sera affiché sans que le texte soit amplifié. Pour les anciennes versions des navigateurs basés sur le moteur WebKit (Chrome ≤ 26 et Safari ≤ 5), cela empêchera l'utilisateur de zoomer/dézoomer sur la page web.
auto- Active l'algorithme d'amplification du navigateur. Ce mot-clé permet notamment d'annuler une valeur
noneutilisée précédemment. <percentage>- Une valeur exprimée en pourcentages. Cette valeur est synonyme du mot-clé
autoet ajoute comme information le taux d'amplification à utiliser sur la police avec l'algorithme.
Syntaxe formelle
none | auto | <percentage>
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Mobile Text Size Adjustment Module Level 1 La définition de 'text-size-adjust' dans cette spécification. |
Brouillon de l'éditeur | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | 54.0[1] | Pas de support | Pas de support | 42 | Pas de support[1] |
| Pourcentages | ? | Pas de support | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Android | Webview Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome pour Android |
|---|---|---|---|---|---|---|---|
| Support simple | ? | 54.0[1] | 11.0 (11.0) -moz[2] | (Oui) -ms[3] 11-webkit |
42 | (Oui)-webkit | 54.0[1] |
| Pourcentages | ? | ? | Pas de support | (Oui)[3] | Pas de support | (Oui) | ? |
[1] Il existe un bug pour les anciens navigateurs basés sur WebKit : si -webkit-text-size-adjust vaut explicitement none, la propriété ne sera pas simplement ignorée : l'utilisateur ne pourra pas zoomer ou dézoomer sur la page. Pour plus d'informations, voir les bugs 56543, 163359 et 84186.
[2] Si le viewport est défini avec l'élément <meta>, la valeur de la propriété CSS text-size-adjust est ignorée. Pour plus d'informations sur l'implémentation, voir la page consacrée sur MSDN.
[3] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.