La tab-sizepropriété en CSS est utilisée pour ajuster la quantité d'espaces qui s'affichent pour le caractère de tabulation.
pre ( tab-size: 8; /* default. Pretty big! */ tab-size: 2; tab-size: 13px; /* you can set a width-per-tab also */ )Jouez avec ces curseurs de plage pour voir comment différentes valeurs affectent le rendu des onglets (lorsque vous pouvez réellement voir les onglets):
Voir le Pen
rNBLYaP de Chris Coyier (@chriscoyier)
sur CodePen.
Le caractère de tabulation (unicode U + 0009) est généralement converti en espaces (unicode U + 0020) par les règles de traitement des espaces blancs, puis réduit de sorte qu'un seul espace dans une ligne soit affiché dans le navigateur. Par conséquent, la tab-sizepropriété n'est utile que lorsque les règles de traitement des espaces blancs ne s'appliquent pas, à savoir à l'intérieur d'un
balise et lorsque lawhite-spacepropriété d'un élément est définie surpre-wrap.La valeur par défaut de la
tab-sizepropriété est de 8 caractères d'espacement et elle peut accepter n'importe quelle valeur entière positive.Voici quelques exemples des différentes manières d'
tab-sizeutiliser:Voir le Pen
rNBLYjg de Chris Coyier (@chriscoyier)
sur CodePen.Comme vous pouvez le voir dans les exemples ci-dessus, la
tab-sizepropriété ajuste la quantité d'espace allouée au caractère de tabulation. Dans le deuxième exemple, leLa balise doit avoir sa
white-spacepropriété ajustéepre-wrappour que les caractères de tabulation ne soient pas convertis en espaces normaux et réduits.Vous remarquerez également dans le CSS que les préfixes
-moz-et-o-sont requis pour Firefox et Opera, mais Chrome accepte la version sans préfixe.Polyfill
La valeur par défaut de huit espaces est terriblement grande. Si vous avez besoin de prendre en charge un navigateur non pris en charge, vous pouvez utiliser ce polyfill (le JavaScript de ce stylo):
Voir le
polyfill de la taille de l'onglet Pen par CSS-Tricks (@ css-tricks)
sur CodePen.Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 42 | 53 * | Non | 79 | 13,1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 * | 81 | 13,4-13,7 |
Cette propriété se dégrade très gracieusement. Chaque navigateur prend en charge les caractères de tabulation. Le manque de support pour cette propriété ne casse rien, le navigateur affiche simplement des onglets de huit caractères à la place.