Veličina kartice - CSS-trikovi

Anonim

tab-sizeNekretnina u CSS se koristi za podešavanje količine prostora koji prikaz za tabulatorom.

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

Poigrajte se s ovim klizačima raspona da biste vidjeli kako različite vrijednosti utječu na prikaz kartica (kada zapravo možete vidjeti kartice):

Pogledajte
Olovku rNBLYaP Chrisa Coyiera (@chriscoyier)
na CodePenu.

Znak kartice (unicode U + 0009) obično se pretvara u razmake (unicode U + 0020) pravilima obrade praznog prostora, a zatim sažima tako da se u pregledniku prikazuje samo jedan razmak u nizu. Stoga je tab-sizesvojstvo korisno samo kada se ne primjenjuju pravila za obradu praznina, naime unutar a

tag i kada je white-spacesvojstvo elementa postavljeno na pre-wrap.

Zadana vrijednost tab-sizesvojstva je 8 razmaka i može prihvatiti bilo koju pozitivnu cijelu vrijednost.


Evo nekoliko primjera različitih načina na koje tab-sizese mogu koristiti:


Pogledajte Pen
rNBLYjg Chrisa Coyiera (@chriscoyier)
na CodePenu.





Kao što možete vidjeti u gornjim primjerima, tab-sizesvojstvo prilagođava količinu prostora dodijeljenog znaku kartice. U drugom primjeru,


oznaka mora white-spaceprilagoditi svojstvo pre-wrapkako se znakovi kartice ne bi pretvorili u redovite razmake i skupili.


Također ćete primijetiti u CSS da -moz-i -o-prefiksi potrebne za Firefox i Opera, ali Chrome prihvaća bez prefiksom verziju.


Polifil


Zadana postavka od osam razmaka užasno je velika. Ako trebate podržati nepodržani preglednik, možete upotrijebiti ovaj polifil (JavaScript u ovoj olovci):


Pogledajte
polifiziranje veličine olovke olovke tvrtke CSS-Tricks (@ css-tricks)
na CodePen-u.


Podrška preglednika


Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.


Radna površina


 

 

 Krom Firefox IE Rub Safari 


 

 

 

 42 53 * Ne 79 13.1 


 

 



Mobitel / tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Ovo se svojstvo vrlo graciozno razgrađuje. Svaki preglednik podržava znakove kartice. Nedostatak podrške za ovo svojstvo ništa ne narušava, umjesto toga preglednik samo prikazuje široke kartice s osam znakova.