Saki suurus - CSS-trikid

Anonim

tab-sizeVara CSS kasutatakse korrigeerida ruumide et ekraan vahelehe iseloomu.

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

Mängige nende vahemiku liuguritega, et näha, kuidas erinevad väärtused mõjutavad vahekaartide renderdamist (kui vahekaarte tegelikult näete):

Vaadake
Code Cenil Chris Coyieri (@chriscoyier)
pliiatsi rNBLYaP.

Vahekaardi märk (unicode U + 0009) teisendatakse tavaliselt tühimike töötlemise reeglite järgi tühikuteks (unicode U + 0020) ja seejärel ahendatakse, nii et brauseris kuvatakse ainult üks tühik järjest. Seetõttu on tab-sizeatribuut kasulik ainult siis, kui tühimiku töötlemise reeglid ei kehti, nimelt a sees

silt ja kui white-spaceelemendi atribuudiks on määratud pre-wrap.

Atribuudi vaikeväärtus tab-sizeon 8 tühimärki ja see võib aktsepteerida mis tahes positiivset täisarvu.


Ta on mõned näited erinevatest viisidest, tab-sizemida saab kasutada:


Vaadake
Code Cenil Chris Coyieri (@chriscoyier)
pliiatsi rNBLYjg.





Nagu ülaltoodud näidetest näha, tab-sizekohandab atribuut vahekaartmärgi jaoks eraldatud ruumi hulka. Teises näites


märgendi white-spaceomadus peab olema kohandatud pre-wrap, et vahelehemärke ei saaks tavalisteks tühikuteks teisendada ja need ei ahendaks.


Samuti märkate CSS-is, et Firefoxi ja Opera jaoks on vaja -moz-ja -o-eesliiteid, kuid Chrome aktsepteerib eesliiteta versiooni.


Polüfill


Kaheksa ruumi vaikimisi on kohutavalt suur. Kui teil on vaja toetamata brauserit toetada, võite kasutada seda polüfilli (selle pliiatsi JavaScripti):


Vaadake CodeSeni
kaardil CSS-Tricks vahekaardisuurust
polüfillitäit (@ css-tricks) .


Brauseri tugi


Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.


Töölaud


 

 

 Chrome Firefox IE Edge Safari 


 

 

 

 42 53 * Ei 79 13.1 


 

 



Mobiil / tahvelarvuti


 

 

 Android Chrome Android Firefox Android iOS-i Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



See vara laguneb väga graatsiliselt. Iga brauser toetab vahelehemärke. Selle atribuudi puudumine ei riku midagi, brauser kuvab selle asemel ainult kaheksa tähemärki laiud vahelehed.