Fülméret - CSS-trükkök

Anonim

A tab-sizeCSS tulajdonság segítségével módosíthatja a tabulátor karakter számára megjelenő szóközök számát.

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

Játsszon ezekkel a tartomány csúszkákkal, és nézze meg, hogy a különböző értékek hogyan befolyásolják a lapok megjelenítését (amikor a füleket valóban láthatja):

Lásd
Chris Coyier (@chriscoyier) toll rNBLYaP-jét
a CodePen-en.

A tabulátor karaktert (unicode U + 0009) a szóköz feldolgozási szabályai általában szóközökké alakítják (unicode U + 0020), majd összeesik, így a böngészőben csak egy szóköz jelenik meg egy sorban. Ezért a tab-sizetulajdonság csak akkor hasznos, ha a térköz-feldolgozási szabályok nem érvényesek, mégpedig az a-n belül

címkét, és ha white-spaceegy elem tulajdonságára állítjuk pre-wrap.

A tab-sizetulajdonság alapértelmezett értéke 8 szóköz, és bármilyen pozitív egész értéket képes elfogadni.


Néhány példa a különféle felhasználási módokra tab-size:


Lásd
Chris Coyier (@chriscoyier) Pen rNBLYjg-jét
a CodePen-en.





Amint az a fenti példákból kiderül, a tab-sizetulajdonság módosítja a tab karakter számára lefoglalt hely nagyságát. A második példában a


A címkének a white-spacetulajdonságait hozzá kell igazítani ahhoz pre-wrap, hogy a tabulátor karakterei ne legyenek átalakítva szokásos szóközökké és ne essenek össze.


A CSS-ben azt is észreveszi, hogy a -moz-és az -o-előtagok szükségesek a Firefoxhoz és az Opera-hoz, de a Chrome elfogadja az előtag nélküli verziót.


Polyfill


A nyolc szóköz alapértelmezett értéke iszonyatosan nagy. Ha támogatnia kell egy nem támogatott böngészőt, használhatja ezt a többszörös kitöltést (a JavaScript ebben a tollban):


Lásd a
CSS-Tricks Toll lapméretû
polifill kitöltését (@ css-tricks) a CodePen-en.


Böngésző támogatás


Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.


Asztal


 

 

 Króm Firefox AZAZ Él Szafari 


 

 

 

 42 53 * Nem 79 13.1 


 

 



Mobil / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81. 13,4-13,7 


 

 



Ez a tulajdonság nagyon kecsesen romlik. Minden böngésző támogatja a tabulátor karaktereket. A tulajdonság támogatásának hiánya nem tör meg semmit, a böngésző csupán nyolc karakter széles füleket jelenít meg helyettük.