tab-size

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

tab-size меняет длину символа табуляции (таба).

Пример

Секция статьи "Пример"
        
          
          pre {  tab-size: 4;}
          pre {
  tab-size: 4;
}

        
        
          
        
      

Значение 4 задаёт длину таба в 4 пробела.

Как пишется

Секция статьи "Как пишется"

У свойства tab-size есть два варианта значений:

Открыть демо в новой вкладке

Зачем нужно

Секция статьи "Зачем нужно"

Иногда в коде для отступов используются табы, иногда пробелы. В редакторе кода можно настроить, сколько места занимает один таб. Свойство tab-size — аналог такой настройки для браузера.

Исторически принятое значение 8 символов слишком велико, поэтому часто задают значение 4 или 2.

Самое интересное, что это значение можно менять в зависимости от ширины окна. В примере ниже жёлтый блок с кодом — это фрейм, в котором открыта страница adaptive/code.html.

Открыть демо в новой вкладке

При изменении ширины фрейма срабатывает медиавыражение, которое меняет ширину таба, а свойство transition позволяет делать это плавно:

        
          
          pre {  tab-size: 1;  transition: tab-size 0.2s;}@media (min-width: 450px) {  pre {    tab-size: 4;  }}
          pre {
  tab-size: 1;
  transition: tab-size 0.2s;
}

@media (min-width: 450px) {
  pre {
    tab-size: 4;
  }
}