Veľkosť tabuľky - Triky CSS

Anonim

tab-sizeNehnuteľnosť v CSS slúži na nastavenie množstva medzier, ktoré zobrazovaný znak tabulátora.

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

Pohrajte sa s týmito posúvačmi rozsahu a zistite, ako rôzne hodnoty ovplyvňujú spôsob vykresľovania kariet (keď karty skutočne vidíte):

Prezrite si pero
rNBLYaP od Chrisa Coyiera (@chriscoyier)
na stránkach CodePen.

Znak tabulátora (unicode U + 0009) sa zvyčajne prevedie na medzery (unicode U + 0020) podľa pravidiel spracovania bieleho priestoru a potom sa zbalí, takže sa v prehliadači zobrazí iba jedna medzera v rade. Táto tab-sizevlastnosť je preto užitočná iba v prípade, že neplatia pravidlá spracovania bieleho priestoru, konkrétne vo vnútri a

značka a keď je white-spacevlastnosť prvku nastavená na pre-wrap.

Predvolená hodnota tab-sizevlastnosti je 8 medzier a môže akceptovať akékoľvek kladné celé číslo.


Je niekoľko príkladov rôznych spôsobov, ako tab-sizesa dajú použiť:


Prezrite si pero
rNBLYjg od Chrisa Coyiera (@chriscoyier)
na stránkach CodePen.





Ako vidíte v príkladoch vyššie, tab-sizevlastnosť upravuje veľkosť priestoru prideleného znaku tabulátora. V druhom príklade


značka musí mať svoju white-spacevlastnosť upravenú tak, pre-wrapaby sa znaky tabulátora neprevodili na bežné medzery a nezbalili sa.


Budete tiež všimnúť, v CSS, že -moz-aj -o-predpony sú potrebné pre Firefox a Opera, Chrome, ale prijíma non-pripevnený verzii.


Polyfill


Osempriestorová predvolená hodnota je strašne veľká. Ak potrebujete podporiť nepodporovaný prehliadač, môžete použiť túto polyfill (JavaScript v tomto pere):


Prezrite si na CodePen viacnásobné vyplnenie pera vo formáte
CSS-Tricks (@ css-tricks)
.


Podpora prehľadávača


Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.


Desktop


 

 

 Chrome Firefox IE Hrana Safari 


 

 

 

 42 53 * Nie 79 13.1 


 

 



Mobil / tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13,4-13,7 


 

 



Táto vlastnosť sa degraduje veľmi elegantne. Každý prehľadávač podporuje znaky tabulátora. Nedostatok podpory pre túto vlastnosť nič nerozbije, prehliadač namiesto toho zobrazí iba karty so šírkou ôsmich znakov.