Tab-size - Trucchi CSS

La tab-sizeproprietà in CSS viene utilizzata per regolare la quantità di spazi visualizzati per il carattere di tabulazione.

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

Gioca con questi cursori di intervallo per vedere come i diversi valori influenzano il rendering delle schede (quando puoi effettivamente vedere le schede):

Guarda la Pen
rNBLYaP di Chris Coyier (@chriscoyier)
su CodePen.

Il carattere di tabulazione (unicode U + 0009) viene generalmente convertito in spazi (unicode U + 0020) dalle regole di elaborazione dello spazio bianco e quindi viene compresso in modo che nel browser venga visualizzato solo uno spazio di fila. Pertanto la tab-sizeproprietà è utile solo quando le regole di elaborazione degli spazi bianchi non si applicano, ovvero all'interno di un file

tag e quando la white-spaceproprietà di un elemento è impostata su pre-wrap.
Il valore predefinito per la tab-sizeproprietà è di 8 caratteri di spazio e può accettare qualsiasi valore intero positivo.
Sono alcuni esempi dei vari modi in cui tab-sizepossono essere utilizzati:


Guarda la penna
rNBLYjg di Chris Coyier (@chriscoyier)
su CodePen.
Come puoi vedere negli esempi sopra, la tab-sizeproprietà regola la quantità di spazio assegnato per il carattere di tabulazione. Nel secondo esempio, il
Il tag deve avere la sua white-spaceproprietà regolata pre-wrapin modo che i caratteri di tabulazione non vengano convertiti in spazi regolari e compressi.
Noterai anche nel CSS che i prefissi -moz-e -o-sono richiesti per Firefox e Opera, ma Chrome accetta la versione senza prefisso.
Polyfill
L'impostazione predefinita di otto spazi è terribilmente grande. Se è necessario supportare un browser non supportato, è possibile utilizzare questo polyfill (il JavaScript in questa penna):
Vedi il
polyfill della dimensione della scheda della penna di CSS-Tricks (@ css-tricks)
su CodePen.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.


Desktop
 

 
 
Cromo
 
Firefox
 
IE
 
Bordo
 
Safari
 

 

 

 
 
42
 
53 *
 
No
 
79
 
13.1
 

 

 

Mobile / Tablet
 

 
 
Android Chrome
 
Android Firefox
 
Android
 
iOS Safari
 

 

 

 
 
88
 
85 *
 
81
 
13.4-13.7
 

 

 

Questa proprietà degrada molto graziosamente. Ogni browser supporta i caratteri di tabulazione. La mancanza di supporto per questa proprietà non interrompe nulla, il browser visualizza invece solo schede larghe otto caratteri.