Tab-size - Propriété CSS

tab-size

Résumé des caractéristiques de la propriété tab-size

Description rapide
Définit la taille des caractères de tabulation.
Statut
Standard
S'applique à
Éléments contenant du texte.
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
8
Héritée par défaut
Oui.
Type d'animation
Computed value : lors d'une animation, la propriété tab-size passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Texte
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de tab-size.

Tab-size property - Syntax diagramSyntax diagram of the tab-size CSS property. See stylescss.free.fr for details. number number length lengthtab-size:;tab-size:;
Schéma syntaxique de la propriété tab-size.
Description des valeurs

Description des termes utilisés sur le schéma :

  • length est une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.
  • number est un nombre sans unité, positif ou nul.

Description de la propriété tab-size.

La propriété tab-size définit la taille des tabulations, autrement dit le nombre d'espaces équivalents à un caractère de tabulation. La propriété n'a d'effet que sur certains types d'éléments :

  • Les éléments pre.
  • Les éléments textarea.
  • Tous les autres éléments dont la propriété white-space a la valeur pre, pre-wrap ou break-spaces.

Pour tous les autres éléments, HTML affiche les caractères de tabulation comme des espaces, et la propriété tab-size est sans effet.

Valeurs pour tab-size.

  • tab-size: 8;

    Un nombre sans unité indique le nombre d'espaces équivalent à un caractère de tabulation. La valeur par défaut est 8.
    Cette valeur peut comporter des décimales.

    Le résultat ne sera visible que si l'élément a sa propriété white-space fixée à pre, pre-wrap ou break-spaces.

  • tab-size: 20px;

    Un nombre avec une unité de dimension indique la taille du caractère de tabulation. Voir les unités de dimension.

  • tab-size: initial; (8) tab-size: inherit; tab-size: revert; tab-size: revertLayer; tab-size: unset;

    Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété tab-size.

tab-size peut être animée de façon très fluide car cette propriété accepte les valeurs décimales. Voici un exemple de ce que peut donner cette animation.

| | | | | | |

Simulateur avec la propriété tab-size.

tab-size :
Jours fériés en France : | | | | | | | | | | 1 Jour de l'an 1er janvier. 2 Fête du travail 1er mai. 3 Victoire de 1945 8 mai. 4 Fête nationale 14 juillet.

Compatibilité de tab-size avec les navigateurs actuels.

Colonne 1
Support de la propriété tab-size avec un entier indiquant le nombre de caractères équivalent à un caractère de tabulation.
Colonne 2
Support de la propriété tab-size avec une valeur exprimée sous la form d'une dimension (un nombre suivi d'une unité de dimension).

Remarques :

(1) Support partiel : la propriété tab-size accepte un entier et non pas une dimension.

1
Propriété
tab-size
2
Valeur
avec unité
Estimation de la prise en charge globale.
96%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

1

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

1
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la propriété tab-size.

Voir aussi...

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété tab-size fait partie du module CSS Text Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

⚠
hanging-punctuation
Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
hyphenate-character
Définit le caractère qui sera à utiliser comme marque de césure.
⚠
hyphenate-limit-chars
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
⚠
hyphenate-limit-last
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
⚠
hyphenate-limit-lines
Définit le nombre maximal de lignes successives se terminant une césure
⚠
hyphenate-limit-zone
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
hyphens
Définit si les mots peuvent être coupés en fin de ligne. La césure des mots donne une mise en page plus agréable mais peut être gênante dans certains cas.
letter-spacing
Espacement des lettres.
line-break
Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).
⚠
line-padding
Ajoute un espace au début et à la fin des lignes.
overflow-wrap
Gestion des coupures de mots pour les langues CJK et quelques autres.
text-align
Spécifie comment doit être aligné le texte de l'élément.
⚠
text-align-all
Définit l'alignement des lignes d'un texte (synonyme de text-align).
text-align-last
Définit l'alignement de la dernière ligne des paragraphes.
⚠
text-autospace
Définit l'espace entre les caractères adjacents (utilisable pour les langues CJK).
⚠
text-group-align
text-indent
Définit le retrait de la première ligne des paragraphe (indentation).
⚠
text-justify
Sélectionne la méthode utilisée pour justifier le texte.
✗
text-space-collapse
Définit comment gérer les espaces et les espaces multiples dans le texte.
✗
text-space-trim
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
⚠
text-spacing
⚠
text-spacing-trim
Definit l'espacement autour des caractères de ponctuation CJK.
text-transform
Casse du texte (minuscules, majuscules...).
⚠
text-wrap
Définit la gestion des retours à la ligne du texte.
text-wrap-mode
Définit si les retours à la ligne sont autorisés.
text-wrap-style
Définit comment les saut de ligne vont se faire.
white-space
Définit comment sont restitués les espaces multiples et les retours chariot.
white-space-collapse
Définit comment les espaces successifs et les retours à la ligne doivent être traités.
⚠
white-space-trim
Définit si comment le navigateur doit supprimer les espaces réductibles.
⚠
word-boundary-detection
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
✗
word-boundary-expansion
Substitue certains caractères de séparation de mots par d'autres.
word-break
Coupure des mots longs.
⚠
word-space-transform
Normalise les caractères d'espacement (écritures CJK).
word-spacing
Permet d'ajuster l'espacement des mots.
word-wrap
Coupure des mots pour les langues CJK et quelques autres.
⚠
wrap-after
Autorise ou non les sauts de lignes après la boite.
⚠
wrap-before
Autorise ou non les sauts de lignes avant la boite.
⚠
wrap-inside
Autorise ou non les sauts de lignes dans la boite.