Как корректировать величину табуляции на css

Оцените материал
(0 голосов)

Проблема

С веб-страницами, содержащими большое количество кода, такими как страницы документации или учебников, связаны собственные уникальные сложности стилизации. К элементам  <pre> и  <code>, с помощью которых мы оформляем код, применяется стилизация по умолчанию, определяемая пользовательским агентом, например такая:
pre, code {
font-family: monospace;
}
pre {
display: block;
margin: 1em 0;
white-space: pre;
}
Однако этого определенно недостаточно для того, чтобы учесть все уникальные трудности отображения кода. Одна из самых серьезных проблем заключается в том, что хотя табуляция идеально подходит для создания отступов в коде, очень часто ее стараются избегать, так как место, выделяемое браузером для отображения табуляции, по ширине равно целым восьми (!) символам. Посмотрите на рисунок — как плохо выглядят такие большие отступы и как бездарно расходуется место на экране:
наш код даже не поместился в свой контейнер!

Решение

К счастью, в CSS Text Level 3 у нас появилось новое свойство CSS для управления этой величиной: tab-size . В качестве значения оно принимает число (количество символов) или длину (что редко бывает полезным). Чаще всего мы задаем значение  4 (то есть ширина четырех символов) или  2 — последняя тенденция в оформлении отступов строк кода:
pre {
tab-size: 2;
}
Как видно на рисунке ниже  код теперь читать намного проще. Вы могли бы даже установить значение  tab-size, равное  0, для того чтобы полностью отключить табуляцию, но это редко (или вообще никогда) дает хорошие результаты.

Если свойство не поддерживается, то ничего не ломается — мы просто получаем ужасно широкую табуляцию, с которой нам и так приходилось мириться все эти годы.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/tab-size
Десерт на сегодня - видео о пареньке, который ради селфи слишком близко подбежал к торнадо и потом еле унес ноги:

Прочитано 196 раз
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Wix.com INT

TemplateMonster

Поиск по сайту

Kwork

Google+