С развитием технологий, мониторы становятся всё шире и шире, а вместе с ними и блоки текста на сайтах. Известно, что человеку наиболее комфортно читать около 67-75 символов в строке, но некоторое время браузеры не позволяли реализовывать верстку в несколько колонок с помощью встроенного функционала. Благо технологии не стоят на месте и всё больше браузеров внедряют поддержу многоколоночного текста, о которой и пойдет речь в этой статье.
Кроссбраузерность
На данный момент описываемый далее метод поддерживается во всех популярнейших браузерах (включая IE 10+).
Демонстрацию данного способа можно встретить в тексте этой статьи.
(Если ваш браузер не поддерживает многоколоночный текст, то пожалуйста, обновите его в конце концов 🙂 И выглядеть это будет примерно так, как на картинке ниже).
Реализация
.three { column-count: 2; column-gap: 20px; column-rule: 1px dotted #ccc; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px dotted #ccc; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px dotted #ccc; text-align:justify; } |
Как вы уже догадались, свойство column-count
определяет количество столбцов, а column-gap
— расстояние между столбцами. Также существуют дополнительные свойства: column-width
, позволяющее строго задавать ширину столбцов, и column-rule
, определяющее разделитель между столбцами (например, 1px dotted #ccc
, чтобы разделить столбцы точечной линией). Кроме того, можно использовать префиксы -webkit-
и -moz-
для поддержки более старых версий браузеров. Таким образом, можно управлять столбцами, просто изменяя числовые значения свойств.
Адаптивный многоколоночный текст
А что делать, если у нашего сайта «резиновая» верстка и его ширина может варьироваться, например от 320px до 1200px? В данном случае нам на помощь приходит такая фишка CSS, как media queries (позволяющие изменять css-свойства различных объектов в зависимости от ширины экрана пользователя).
Добавим после представленного выше класса следующий фрагмент:
@media screen and (min-width: 1024px) { .three { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; } |
Этот фрагмент работает следующим образом: если ширина экрана больше или равна 1024px, то применить свойства, содержащиеся в данном блоке. В нашем случае мы перезаписываем некоторые свойства класса .three число колонок с двух увеличится до трёх. Хорошо, большие мониторы мы учли, осталось позаботиться о мобильных девайсах — там вообще не нужны колонки, поэтому пойдем еще дальше и добавим такой кусок кода:
@media screen and (max-width: 480px) { .three { column-count: 1; -moz-column-count: 1; -webkit-column-count: 1; } |
Этот кусок кода сработает при ширине экрана 480px и менее и отобразит весь текст в одну колонку.
Таким образом, мы имеем следующую схему:
- Ширина экрана <= 480px — одна колонка текста.
- Ширина экрана от 480px до 1024px — две колонки
- Ширина экрана >= 1024px — три колонки.
Демонстрацию того, что мы только что сделали, можно посмотреть здесь. Или можете скачать исходники.
На этом всё. Подписывайтесь, чтобы не пропустить новые статьи, а свои вопросы задавайте в комментариях.