Размер на раздела - CSS-трикове

Anonim

В tab-sizeимота в CSS се използва за регулиране на размера на пространства, които дисплей за характера на раздела.

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

Поиграйте с тези плъзгачи на диапазона, за да видите как различните стойности влияят върху изобразяването на раздели (когато всъщност можете да видите раздели):

Вижте писалката
rNBLYaP от Chris Coyier (@chriscoyier)
в CodePen.

Символът на табулатора (unicode U + 0009) обикновено се преобразува в интервали (unicode U + 0020) от правилата за обработка на празното пространство и след това се свива, така че в браузъра се показва само едно пространство в ред. Следователно tab-sizeсвойството е полезно само когато правилата за обработка на празно пространство не се прилагат, а именно вътре в a

tag и когато white-spaceсвойството на даден елемент е зададено на pre-wrap.

Стойността по подразбиране за tab-sizeсвойството е 8 интервали и може да приеме всяка положителна целочислена стойност.


Той е няколко примера за различните начини, които tab-sizeмогат да бъдат използвани:





Вижте писалката
rNBLYjg от Chris Coyier (@chriscoyier)
в CodePen.


Както можете да видите в примерите по-горе, tab-sizeсвойството коригира размера на пространството, отредено за символа на раздела. Във втория пример,


етикетът трябва да има white-spaceсвойство, коригирано, за pre-wrapда не могат символите на табулаторите да се преобразуват в редовни интервали и да се свиват.


Също така ще забележите в CSS, че префиксите -moz-и и -o-са необходими за Firefox и Opera, но Chrome приема нефиксираната версия.


Polyfill


По подразбиране осемте пространства са ужасно големи. Ако трябва да поддържате неподдържан браузър, можете да използвате това полифилиране (JavaScript в тази писалка):


Вижте
полифинирането с размер на раздела Pen от CSS-Tricks (@ css-tricks)
на CodePen.


Поддръжка на браузър


Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.





работен плот


 

 

 Chrome Firefox IE Ръб, край Сафари 


 

 

 

 42 53 * Не 79 13.1 


 

 



Мобилен / таблет


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Това свойство се разгражда много грациозно. Всеки браузър поддържа символи на раздели. Липсата на поддръжка за това свойство не нарушава нищо, вместо това браузърът просто показва раздели с осем знака.