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.