Välilehden koko - CSS-temppuja

Anonim

tab-sizeOmaisuus CSS käytetään säätämään määrä tiloja, jotka näyttö välilehden luonnetta.

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

Pelaa näitä alue-liukusäätimiä nähdäksesi, kuinka erilaiset arvot vaikuttavat välilehtien renderointiin (kun näet todella välilehdet):

Katso
Chris Coyierin (@chriscoyier) kynä rNBLYaP
CodePenistä.

Sarkainmerkki (unicode U + 0009) muunnetaan tyypillisesti välilyönteiksi (unicode U + 0020) välilyönnin käsittelysääntöjen avulla ja kutistuu sitten niin, että vain yksi tila rivissä näkyy selaimessa. Siksi tab-sizeominaisuus on hyödyllinen vain, kun välilyönnin käsittelysäännöt eivät ole voimassa, nimittäin a: n sisällä

ja kun white-spaceelementin ominaisuudeksi on asetettu pre-wrap.

tab-sizeOminaisuuden oletusarvo on 8 välilyöntiä, ja se voi hyväksyä minkä tahansa positiivisen kokonaisluvun arvon.


Hän on joitain esimerkkejä erilaisista tavoista, tab-sizejoita voidaan käyttää:


Katso
Chris Coyierin (@chriscoyier) kynä rNBLYjg
CodePenistä.





Kuten yllä olevista esimerkeistä näet, tab-sizeominaisuus säätää välilehden merkille varattua tilaa. Toisessa esimerkissä


tagin ominaisuuksien on oltava white-spacemukautettuja pre-wrap, jotta sarkainmerkit eivät muutu tavallisiksi välilyönneiksi ja romahtavat.


Huomaa myös CSS: ssä, että etuliitteitä -moz-ja -o-etuliitteitä vaaditaan Firefoxille ja Operalle, mutta Chrome hyväksyy etuliitetyn version.


Polyfill


Kahdeksan välilyönti on olennaisen suuri. Jos sinun on tuettava selainta, jota ei tueta, voit käyttää tätä polyfill-täytettä (tämän kynän JavaScript):


Katso
CSS-Tricks- kynän välilehden kokoinen täyttö (@ css-tricks)
CodePenistä.


Selaimen tuki


Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.


Työpöytä


 

 

 Kromi Firefox IE Reuna Safari 


 

 

 

 42 53 * Ei 79 13.1 


 

 



Matkapuhelin / tabletti


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Tämä ominaisuus heikkenee erittäin sulavasti. Jokainen selain tukee välilehtien merkkejä. Tämän ominaisuuden tuen puute ei riko mitään, selain näyttää vain kahdeksan merkin leveät välilehdet.