Tab-grootte - CSS-trucs

De tab-sizeeigenschap in CSS wordt gebruikt om het aantal spaties aan te passen dat wordt weergegeven voor het tab-teken.

pre ( tab-size: 8; /* default. Pretty big! */ tab-size: 2; tab-size: 13px; /* you can set a width-per-tab also */ )

Speel eens met deze bereikschuifregelaars om te zien hoe verschillende waarden van invloed zijn op hoe tabbladen worden weergegeven (wanneer u daadwerkelijk tabbladen kunt zien):

Zie de Pen
rNBLYaP door Chris Coyier (@chriscoyier)
op CodePen.

Het tab-teken (unicode U + 0009) wordt typisch geconverteerd naar spaties (unicode U + 0020) door de witruimteverwerkingsregels en vervolgens samengevouwen zodat slechts één spatie in een rij in de browser wordt weergegeven. Daarom is de tab-sizeeigenschap alleen bruikbaar als de witruimteverwerkingsregels niet van toepassing zijn, namelijk binnen een

tag en wanneer de white-spaceeigenschap van een element is ingesteld op pre-wrap.
De standaardwaarde voor de tab-sizeeigenschap is 8 spaties en kan elke positieve gehele waarde accepteren.
Hij zijn enkele voorbeelden van de verschillende manieren die tab-sizekunnen worden gebruikt:


Zie de Pen
rNBLYjg door Chris Coyier (@chriscoyier)
op CodePen.
Zoals u in de bovenstaande voorbeelden kunt zien, tab-sizepast de eigenschap de hoeveelheid ruimte aan die voor het tab-teken is toegewezen. In het tweede voorbeeld is de
tag moet zijn white-spaceeigenschap hebben aangepast om pre-wrapervoor te zorgen dat de tab-tekens niet worden geconverteerd naar normale spaties en worden samengevouwen.
U zal ook merken in de CSS dat de -moz-en -o-voorvoegsels zijn vereist voor Firefox en Opera, maar Chrome aanvaardt het niet-vooraf vastgestelde versie.
Polyfill
De standaardwaarde van acht spaties is erg groot. Als u een niet-ondersteunde browser moet ondersteunen, kunt u deze polyfill (het JavaScript in deze pen) gebruiken:
Zie de
polyfill van het tabblad Pen door CSS-Tricks (@ css-tricks)
op CodePen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.


Bureaublad
 

 
 
Chrome
 
Firefox
 
D.W.Z
 
Rand
 
Safari
 

 

 

 
 
42
 
53 *
 
Nee
 
79
 
13.1
 

 

 

Mobiel / tablet
 

 
 
Android Chrome
 
Android Firefox
 
Android
 
iOS Safari
 

 

 

 
 
88
 
85 *
 
81
 
13.4-13.7
 

 

 

Deze eigenschap degradeert zeer gracieus. Elke browser ondersteunt tabtekens. Gebrek aan ondersteuning voor deze eigenschap maakt niets kapot, de browser geeft in plaats daarvan alleen tabbladen van acht tekens breed weer.