Propriété CSS tab-size
Comment utiliser la propriété CSS tab-size pour définir la largeur d'un caractère de tabulation. Valeurs, exemples et compatibilité navigateurs.
La propriété CSS tab-size contrôle la largeur avec laquelle un caractère de tabulation (U+0009) est affiché. Par défaut, un navigateur représente chaque tabulation comme 8 espaces, ce qui est souvent bien trop large pour des blocs de code. tab-size permet de fixer cette largeur à un nombre quelconque de largeurs d'espace, ou à une longueur CSS exacte.
Cette page explique ce que fait la propriété, dans quels contextes elle prend effet, la différence entre les valeurs <number> et <length>, la compatibilité des navigateurs et un exemple interactif.
Quand tab-size est-elle utile ?
Une tabulation ne modifie la mise en page visible que lorsque les espaces environnants sont préservés. En HTML normal, les navigateurs réduisent les tabulations, les espaces et les sauts de ligne en un seul espace, de sorte que tab-size n'a aucun effet. Elle devient significative lorsque les espaces blancs sont conservés, ce qui se produit dans deux situations courantes :
- À l'intérieur de
<pre>et<textarea>, qui préservent les espaces par défaut. - Sur tout élément dont vous définissez
white-spaceàpre,pre-wrapoupre-line.
C'est pourquoi tab-size est la propriété à utiliser lorsque vous affichez du code source, des tableaux ASCII ou tout contenu dont les colonnes doivent s'aligner. Cette propriété fait partie des propriétés CSS3 et est héritée, ce qui signifie que la définir sur un conteneur s'applique également au texte préformaté imbriqué.
Les valeurs négatives sont invalides et la déclaration est ignorée. La valeur doit être un <number> non négatif ou une <length> non négative.
| Valeur initiale | 8 |
|---|---|
| S'applique à | Tous les éléments, mais n'affecte que les conteneurs de blocs et les éléments avec des espaces préservés. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.tabSize = "20"; |
Syntaxe
tab-size: <number> | <length> | initial | inherit;<number>— le nombre de largeurs d'espace qu'occupe une tabulation (ex.tab-size: 4). Il s'agit de la forme la plus courante. Elle est relative à la police, de sorte que la tabulation reste proportionnelle lorsque la taille de la police change.<length>— une largeur explicite telle quetab-size: 2emoutab-size: 20px. Utile lorsque vous avez besoin d'un taquet de tabulation fixe, indépendant de la police.
Un caractère de tabulation n'ajoute pas toujours l'équivalent d'un tab-size complet en espace. Comme un vrai taquet de tabulation, il avance le texte jusqu'à la prochaine limite de tabulation, de sorte que l'écart dépend du nombre de caractères déjà présents sur cette ligne avant la tabulation.
Exemple de la propriété tab-size
Exemple de code CSS tab-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.tab1 {
tab-size: 5;
}
.tab2 {
tab-size: 20;
}
</style>
</head>
<body>
<h2>Tab-size property example</h2>
<pre class="tab1">
Lorem ipsum is a...
</pre>
<pre class="tab2">
Lorem ipsum is a...
</pre>
</body>
</html>Résultat
Dans l'exemple ci-dessus, la valeur de tab-size du premier élément est 5, celle du second élément est 20.
Utilisation d'une valeur de longueur
Au lieu d'un nombre d'espaces, vous pouvez spécifier une largeur fixe. Ici, chaque tabulation avance jusqu'à un taquet de 2em, quelle que soit la largeur d'espace de la police :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
pre {
tab-size: 2em;
}
</style>
</head>
<body>
<pre>Name Role
Ann Designer
Bob Developer</pre>
</body>
</html>Comme chaque ligne utilise une tabulation après le nom, la deuxième colonne s'aligne au même taquet de 2em.
Compatibilité des navigateurs
tab-size est prise en charge par tous les navigateurs modernes. La forme <number> bénéficie du support le plus large ; la forme <length> est prise en charge dans les versions actuelles de Chrome, Edge, Firefox et Safari. Les navigateurs plus anciens peuvent nécessiter les préfixes -moz-tab-size et -o-tab-size, mais ceux-ci ne sont plus requis pour les navigateurs à jour.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| number | Définit le nombre de caractères espaces dans une tabulation. Les valeurs négatives sont invalides. La valeur par défaut est 8. | Essayer » |
| length | Définit la largeur de la tabulation. Les valeurs négatives sont invalides. Cette valeur est largement prise en charge par les navigateurs modernes. | |
| initial | Applique la valeur par défaut de la propriété. | |
| inherit | Hérite de la valeur de la propriété depuis son élément parent. |