Velikost záložky - Triky CSS

Anonim

tab-sizeNemovitost v CSS slouží k nastavení množství mezer, které zobrazovaný znak tabulátoru.

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

Zahrajte si s těmito posuvníky rozsahu, abyste viděli, jak různé hodnoty ovlivňují způsob vykreslování karet (když karty skutečně vidíte):

Podívejte se na Pen
rNBLYaP od Chris Coyier (@chriscoyier)
na CodePen.

Znak tabulátoru (unicode U + 0009) se obvykle převede na mezery (unicode U + 0020) podle pravidel pro zpracování mezer a poté se sbalí, takže se v prohlížeči zobrazí pouze jedna mezera v řádku. Proto je tab-sizevlastnost je užitečná pouze tehdy, když se nevztahují bílý prostor zpracování pravidla, a to uvnitř

tag a když je white-spacevlastnost prvku nastavena na pre-wrap.

Výchozí hodnota tab-sizevlastnosti je 8 mezerových znaků a může přijmout jakoukoli kladnou celočíselnou hodnotu.


On je několik příkladů různých způsobů, jak tab-sizelze použít:


Podívejte se na Pen
rNBLYjg od Chris Coyier (@chriscoyier)
na CodePen.





Jak vidíte v příkladech výše, tab-sizevlastnost upravuje velikost prostoru přiděleného znaku tabulátoru. Ve druhém příkladu je


Aby bylo možné převést znaky tabulátoru na běžné mezery a sbalit, musí být její white-spacevlastnost upravena na pre-wrap.


V CSS si také všimnete, že předpony -moz-a -o-jsou vyžadovány pro Firefox a Opera, ale Chrome přijímá bez předpony.


Polyfill


Výchozí nastavení pro osm míst je strašně velké. Pokud potřebujete podporovat nepodporovaný prohlížeč, můžete použít tuto polyfill (JavaScript v tomto peru):


Podívejte se na
polyfill o velikosti pera od CSS-Tricks (@ css-tricks)
na CodePen.


Podpora prohlížeče


Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.


plocha počítače


 

 

 Chrome Firefox TJ Okraj Safari 


 

 

 

 42 53 * Ne 79 13.1 


 

 



Mobilní / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Tato vlastnost se degraduje velmi elegantně. Každý prohlížeč podporuje znaky tabulátoru. Nedostatek podpory pro tuto vlastnost nic nezlomí, prohlížeč místo toho zobrazí pouze karty se širokými osmi znaky.