Размер табуляции - 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 */ )

Поиграйте с этими ползунками диапазона, чтобы увидеть, как разные значения влияют на отображение вкладок (когда вы действительно видите вкладки):

См. Pen
rNBLYaP Криса Койера (@chriscoyier)
на CodePen.

Символ табуляции (unicode U + 0009) обычно преобразуется в пробелы (unicode U + 0020) правилами обработки пробелов, а затем сворачивается, так что в браузере отображается только один пробел в строке. Следовательно, это tab-sizeсвойство полезно только тогда, когда правила обработки пробелов не применяются, а именно внутри

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

Значение по умолчанию для tab-sizeсвойства - 8 пробелов, и оно может принимать любое положительное целочисленное значение.


Вот несколько примеров того, как tab-sizeможно использовать:


См. Pen
rNBLYjg Криса Койера (@chriscoyier)
на CodePen.





Как вы можете видеть в примерах выше, tab-sizeсвойство регулирует количество места, отведенного для символа табуляции. Во втором примере


white-spaceСвойство тега должно быть настроено таким образом, чтобы pre-wrapсимволы табуляции не преобразовывались в обычные пробелы и не сворачивались.


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


Полифилл


По умолчанию восемь пробелов ужасно велики. Если вам нужно поддерживать неподдерживаемый браузер, вы можете использовать этот полифилл (JavaScript в этом Pen):


См.
Полифил с размером вкладки Pen от CSS-Tricks (@ css-tricks)
на CodePen.


Поддержка браузера


Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.


Рабочий стол


 

 

 Хром Fire Fox IE Край Сафари 


 

 

 

 42 53 * Нет 79 13,1 


 

 



Мобильный / планшет


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 год 13,4-13,7 


 

 



Это свойство ухудшается очень изящно. Каждый браузер поддерживает символы табуляции. Отсутствие поддержки этого свойства ничего не ломает, вместо этого браузер просто отображает восьмисимвольные вкладки.