Tab-size - CSS-triks

Anonim

Den tab-sizeegenskap i CSS brukes til å justere mengden av mellomrom som skjerm for tabulatortegnet.

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

Spill med disse glidebryterne for å se hvordan forskjellige verdier påvirker hvordan faner gjengis (når du faktisk kan se faner):

Se penn
rNBLYaP av Chris Coyier (@chriscoyier)
på CodePen.

Fanetegnet (unicode U + 0009) blir vanligvis konvertert til mellomrom (unicode U + 0020) av behandlingsreglene for hvite mellomrom og kollapset så slik at bare ett mellomrom på rad vises i nettleseren. Derfor er tab-sizeeiendommen bare nyttig når behandlingsreglene for hvite rom ikke gjelder, nemlig inne i en

tag og når white-spaceegenskapen til et element er satt til pre-wrap.

Standardverdien for tab-sizeegenskapen er 8 mellomromstegn, og den kan godta en hvilken som helst positiv heltallverdi.


Han er noen eksempler på de forskjellige måtene som tab-sizekan brukes:


Se penn
rNBLYjg av Chris Coyier (@chriscoyier)
på CodePen.





Som du kan se i eksemplene ovenfor, tab-sizejusterer egenskapen mengden plass som er tildelt tabulatortegnet. I det andre eksemplet,


tag må ha sin white-spaceegenskap justert til pre-wrapfor at tabulatortegnene ikke skal konverteres til vanlige mellomrom og kollapses.


Du vil også merke i CSS at -moz-og -o-prefikser kreves for Firefox og Opera, men Chrome godtar den ikke-prefiksede versjonen.


Polyfill


Åtte-plassers standard er forferdelig stor. Hvis du trenger å støtte en nettleser som ikke støttes, kan du bruke denne polyfill (JavaScript i denne pennen):


Se Pen
-størrelse polyfill av CSS-Tricks (@ css-tricks)
på CodePen.


Nettleserstøtte


Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.


Desktop


 

 

 Chrome Firefox DVS Kant Safari 


 

 

 

 42 53 * Nei 79 13.1 


 

 



Mobil / nettbrett


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Denne eiendommen nedbrytes veldig elegant. Hver nettleser støtter fanetegn. Mangel på støtte for denne eiendommen bryter ikke noe, nettleseren viser bare åtte tegn brede faner i stedet.