Indique l'emplacement d'une légende du tableau
La propriété CSS tab-size permet de spécifier la largeur des tabulations dans un élément affichant du texte, comme les éléments <pre> (préformaté) ou <code>.
La syntaxe générale de la propriété tab-size est la suivante :
selector { tab-size: valeur;}
Valeurs par défaut | 8 |
---|---|
Inherited: | oui |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.tabSize="16" |
La valeur de la propriété tab-size peut être un nombre positif ou la valeur inherit. Par défaut, la valeur est tab-size: 8. Voici un exemple de différentes valeurs possibles :
pre { tab-size: 4; /* Tabulation de 4 espaces */ } pre.example { tab-size: 2; /* Tabulation de 2 espaces */ }
Voici quelques exemples pratiques d'utilisation de la propriété tab-size :
<pre> /* Par défaut : tabulation de 8 espaces */ Code indenté avec une tabulation de 8 espaces </pre> <pre style="tab-size: 4;"> Code indenté avec une tabulation de 4 espaces </pre>
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Tutoriel sur la propriété css tab-size</title> <style> body { padding: 1rem; } pre { border: 1px solid #999; padding: 1rem; background: #eee; } pre span { display: inline-block; } #course { tab-size: 0; } </style> </head> <body> <input type="range" min="1" max="20" value="8" id="code-exemple-slider"> <pre id="code" style="tab-size: 5;">a { color: red; &:hover, &:focus { color: blue; } }</pre> <input type="range" min="0" max="20" value="0" id="raceExempleSlider"> <pre id="course">Course! <span>🚕</span> <span>🚙</span> <span>🚗</span> </pre> <script> const codeExempleSlider = document.querySelector("#code-exemple-slider"); codeExempleSlider.addEventListener("input", () => { document.querySelector("#code").style.tabSize = codeExempleSlider.value; }); const raceExempleSlider = document.querySelector("#raceExempleSlider"); raceExempleSlider.addEventListener("input", () => { document.querySelector("#course").style.tabSize = raceExempleSlider.value; }); </script> </body></html>
dans l'exemple:
Le code HTML et JavaScript fourni implémente des curseurs pour ajuster la valeur de la propriété tabSize des éléments <pre> dans le document.
Le JavaScript du code permet de mettre à jour dynamiquement la propriété tabSize des éléments <pre> en fonction de la valeur des curseurs. Lorsque vous déplacez les curseurs, la taille des tabulations des éléments <pre> correspondants est ajustée en temps réel.
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit- ou -o- indiquent la première version qui fonctionne avec un préfixe.
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 21 | 79 | 53 4.0 -moz- | 6.1 | 15.0 10.6 -o- |
La propriété tab-size est prise en charge par la plupart des navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, certaines anciennes versions de navigateurs peuvent ne pas la prendre en charge. Dans ce cas, il est préférable de fournir une alternative ou de trouver une solution de contournement.