Полосатая заливка строк текста

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

Проблема

Когда несколько лет назад мы впервые получили псевдоклассы  :nth-child()/:nth-of-type() , одним из наиболее распространенных вариантов их применения стали таблицы с полосатой заливкой «зеброй». То, что раньше требовало написания кода на серверной стороне, сценариев на клиентской стороне или утомительного ручного кодирования, теперь может быть реализовано всего лишь несколькими строками кода:
tr:nth-child(even) {
background: rgba(0,0,0,.2);
}
Однако когда дело касается применения того же эффекта к строкам текста, а не к строкам таблицы, мы все так же бессильны. Этот прием особенно удобен для оформления фрагментов кода, так как позволяет делать код более читабельным. Многие разработчики прибегают к помощи JavaScript, оборачивая каждую строку в собственный  <div> , для того чтобы все так же иметь возможность использовать технику с  :nth-child(), часто абстрагируясь от этого безобразия с помощью функций подсветки синтаксиса. Но это не только субоптимально с точки зрения чистоты кода. JS не должен быть связан со стилизацией); слишком большое количество DOM-элементов может замедлить работу страницы, кроме того, это в любом случае хрупкое решение (что произойдет, если вы увеличите размер шрифта и потребуется дать текст с обтеканием?). Существует ли лучший способ?

Таблицы с полосатой заливкой -зеброй» всегда были популярны как в дизайне пользовательских интерфейсов (так оформлен список файлов в Mac OS X), так и в печатном дизайне, поскольку чередование фонового цвета помогает отслеживать взглядом содержимое длинной строки

 

 

Решение

Вместо того чтобы зацикливаться на добавлении темного фона к элементам, представляющим строки, давайте взглянем на проблему под другим углом. Почему бы не применить свойство, создающее фоновое изображение, ко всему элементу и не определить  чередующиеся цвета на этом фоновом изображении? На первый взгляд идея кажется ужасной, но вспомните, что мы можем генерировать фоны непосредственно с помощью CSS-кода, используя градиенты CSS, а размеры указывать в единицах  em, заставляя их автоматически адаптироваться к изменениям значения  font-size. Давайте попробуем развить эту идею, чтобы поместить фрагмент кода  на фон с чередующимися цветными полосами. Для начала нам нужно создать горизонтальные полосы, применив технику из рецепта «Фон в полоску». Значение background-size должно в два раза превышать значение  line-height , так как каждая плитка градиента охватывает две строки.

Первая попытка создать нужный код выглядит примерно так:
padding: .5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(rgba(0,0,0,.2)
50%, transparent 0);
background-size: auto 3em;


Как видно на рисунке, результат очень близок к тому, чего мы хотим добиться. Мы можем даже менять размер шрифта, и полосы будут соответствующим образом сжиматься и расширяться! Однако в глаза сразу бросается серьезная проблема: полосы не выровнены по строкам кода, что вроде как сводит на нет все наши усилия. Почему же так происходит? Если вы внимательно посмотрите на рисунок выше, то заметите, что первая полоса начинается вверху контейнера — ожидаемое поведение фонового изображения. Но наш код начинается ниже, так как он смотрелся бы уродливо, будучи прижатым к верхней кромке контейнера. Как вы видите, мы добавили забивку шириной  .5em , и это как раз то смещение, которое отделяет наши полосы от желаемой позиции. Одним из вариантов решения данной проблемы было бы использование  background-position , чтобы подвинуть полосы на  .5em вниз. Однако если позднее мы решим изменить величину забивки, то нам такжепотребуется скорректировать позицию фона, что не соответствует принципам DRY. Можно ли сделать так, чтобы фон автоматически подстраивался под величину забивки?
Помните свойство  background-origin из секрета «Гибкое позиционирование фона»? Это как раз то, что нам нужно: способ приказать браузеру использовать в качестве точки отсчета для вычисления значения  background-position кромку поля содержимого, а не кромку поля забивки, которая используется по умолчанию. Давайте добавим это в наш рецепт:
padding: .5em;
line-height: 1.5;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);


Как видно на рисунка, это именно то, чего мы ожидали от полосатой заливки строк! Так как для полос мы использовали полупрозрачные цвета, мы можем даже изменить цвет основного фона, и полосы все так же будут видны. По сути, это решение настолько гибкое, что единственный способ сломать его изменить значение  line-height , не скорректировав соответствующим образом background-size.

ПОПРОБУЙТЕ САМИ!

http://play.csssecrets.io/zebra-lines

Десерт на сегодня - видео о настоящей дружбе между лебедями и карпами:

 

Прочитано 187 раз Последнее изменение Воскресенье, 02 апреля 2017 12:00
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

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

Google+