Skirtuko dydis - CSS-gudrybės

Anonim

tab-sizeCSS turtas naudojamas reguliuoti tarpus sumą, kuri parodoma skirtuko simbolį.

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

Pažaiskite su šiais diapazono slankikliais, kad sužinotumėte, kaip skirtingos vertės veikia skirtukų atvaizdavimą (kai skirtukus iš tikrųjų galite pamatyti):

Žiūrėkite
Chriso Coyierio (@chriscoyier) „ Pen rNBLYaP“ rašiklį
„CodePen“.

Skirtuko simbolis (unicode U + 0009) paprastai pakeičiamas į tarpus (unicode U + 0020) pagal baltosios erdvės apdorojimo taisykles ir tada sutraukiamas, kad naršyklėje būtų rodomas tik vienas tarpas iš eilės. Todėl tab-sizeypatybė yra naudinga tik tada, kai netaikomos baltosios erdvės apdorojimo taisyklės, būtent a viduje

žymą ir kai white-spacenustatoma elemento ypatybė pre-wrap.

Numatytoji tab-sizeypatybės vertė yra 8 tarpo ženklai, ir ji gali priimti bet kurią teigiamą sveikojo skaičiaus vertę.


Tai keletas pavyzdžių, kaip tab-sizegalima naudoti įvairius būdus :


Žr
. Chriso Coyier (@chriscoyier) „ Pen rNBLYjg“, esantį
„CodePen“.





Kaip matote aukščiau pateiktuose pavyzdžiuose, tab-sizeypatybė koreguoja skirtuko simboliui skirtą vietos kiekį. Antrame pavyzdyje


Žymos white-spaceypatybė turi būti pritaikyta pre-wraptam, kad skirtuko simboliai nebūtų konvertuojami į įprastas tarpus ir nebūtų sutraukti.


CSS taip pat pastebėsite, kad „ Firefox“ ir „Opera“ reikalingi priešdėliai -moz-ir -o-prefiksai, tačiau „Chrome“ priima nepripažintą versiją.


Polyfill


Aštuonių vietų numatytasis yra baisiai didelis. Jei reikia palaikyti nepalaikomą naršyklę, galite naudoti šį užpildymą („JavaScript“ šiame rašiklyje):


„CodePen“ ieškokite „
CSS-Tricks“ skirtuko „Pen“ skirtuko dydžio
užpildymo (@ css-tricks) .


Naršyklės palaikymas


Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.


Darbalaukis


 

 

 „Chrome“ „Firefox“ T.Y Briauna „Safari“ 


 

 

 

 42 53 * Ne 79 13.1 


 

 



Mobilusis / planšetinis kompiuteris


 

 

 „Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“ 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Ši savybė labai grakščiai degraduoja. Kiekviena naršyklė palaiko skirtukų simbolius. Šios savybės palaikymo trūkumas nieko nesulaužo, naršyklė tik parodo aštuonių simbolių pločio skirtukus.