Tab-size - CSS-Tricks

Anonim

tab-sizeProprietatea în CSS este folosit pentru a regla cantitatea de spații care să fie afișate pentru caracterul tab.

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

Jucați-vă cu aceste glisoare de gamă pentru a vedea modul în care diferite valori afectează modul de redare a filelor (când puteți vedea filele)

Vedeți Pen
rNBLYaP de Chris Coyier (@chriscoyier)
pe CodePen.

Caracterul tabului (unicode U + 0009) este de obicei convertit în spații (unicode U + 0020) de regulile de procesare a spațiului alb și apoi se prăbușește astfel încât doar un spațiu pe rând să fie afișat în browser. Prin urmare, tab-sizeproprietatea este utilă numai atunci când regulile de procesare a spațiului alb nu se aplică, și anume în interiorul unui

tag și când white-spaceproprietatea unui element este setată la pre-wrap.

Valoarea implicită pentru tab-sizeproprietate este de 8 caractere spațiale și poate accepta orice valoare întreagă pozitivă.


El este câteva exemple ale diferitelor moduri în care tab-sizepot fi utilizate:


Vedeți Pen
rNBLYjg de Chris Coyier (@chriscoyier)
pe CodePen.





După cum puteți vedea în exemplele de mai sus, tab-sizeproprietatea ajustează cantitatea de spațiu alocat caracterului filă. În al doilea exemplu,


eticheta trebuie să aibă white-spaceproprietatea ajustată la pre-wrap, pentru ca caracterele filelor să nu fie convertite în spații obișnuite și să se prăbușească.


De asemenea, veți observa în CSS că prefixele -moz-și -o-prefixele sunt necesare pentru Firefox și Opera, dar Chrome acceptă versiunea non-prefixată.


Polyfill


Setarea implicită de opt spații este grozav de mare. Dacă aveți nevoie să acceptați un browser neacceptat, puteți utiliza acest polyfill (JavaScript din acest stilou):


Consultați
polilența de dimensiune a filei Pen de la CSS-Tricks (@ css-tricks)
pe CodePen.


Suport pentru browser


Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.


Desktop


 

 

 Crom Firefox IE Margine Safari 


 

 

 

 42 53 * Nu 79 13.1 


 

 



Mobil / Tabletă


 

 

 Android Chrome Android Firefox Android Safari iOS 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Această proprietate se degradează foarte grațios. Fiecare browser acceptă caractere tab. Lipsa de asistență pentru această proprietate nu rupe nimic, browserul afișează doar file cu opt caractere.