diff options
Diffstat (limited to 'files/fr/web/css/text-size-adjust/index.html')
| -rw-r--r-- | files/fr/web/css/text-size-adjust/index.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/files/fr/web/css/text-size-adjust/index.html b/files/fr/web/css/text-size-adjust/index.html new file mode 100644 index 0000000000..724f0ac75c --- /dev/null +++ b/files/fr/web/css/text-size-adjust/index.html @@ -0,0 +1,88 @@ +--- +title: text-size-adjust +slug: Web/CSS/text-size-adjust +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/text-size-adjust +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>text-size-adjust</code></strong> 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 : <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, and <code>-ms-text-size-adjust</code>.</p> + +<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ +text-size-adjust: none; +text-size-adjust: auto; + +/* Valeurs proportionnelles */ +text-size-adjust: 80%; + +/* Valeurs globales */ +text-size-adjust: inherit; +text-size-adjust: initial; +text-size-adjust: unset; +</pre> + +<p>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.</p> + +<p>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).</p> + +<p>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 <strong>gonflement</strong> (<em>inflation</em>). 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).</p> + +<p>La propriété <code>text-size-adjust</code> permet aux auteurs de ne pas suivre ce comportement si les pages web ont été adaptées pour les différents formats d'écran.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La propriété <code>text-size-adjust</code> est définie avec le mot-clé <code>none</code> ou le mot-clé <code>auto</code> ou avec une valeur de type <code><percentage></code>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>none</code></dt> + <dd>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.</dd> + <dt><code>auto</code></dt> + <dd>Active l'algorithme d'amplification du navigateur. Ce mot-clé permet notamment d'annuler une valeur <code>none</code> utilisée précédemment.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur exprimée en pourcentages (type de données {{cssxref("<percentage>")}}. Cette valeur est synonyme du mot-clé <code>auto</code> et ajoute comme information le taux d'amplification à utiliser sur la police avec l'algorithme.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td> + <td>{{Spec2("CSS Text Size Adjust")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("css.properties.text-size-adjust")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">La documentation d'Apple</a></li> + <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li> +</ul> |