В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.
Разметка страницы
HTML часть
Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:
1 2 3 4 5 6 7 8 | id = "page" > <div id = "main" > </ div > |
То есть нам необходимо сделать так, чтобы блок Определим flexbox для основного контейнера, в котором находятся два блока: Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара: Пояснения: Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах: Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи. Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11. Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое. Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье. Текст в несколько колонок давно уже применяется в издательском деле при вёрстке газет, журналов и книг. Человеку комфортнее читать текст определённой ширины, колонки как раз и обеспечивают разбиение большого текста на столбцы заданного размера. На сайтах это не всегда имеет смысл делать из-за ограниченности высоты окна браузера. Читателю вначале придётся прокрутить одну колонку вниз до конца, а затем вернуться наверх к началу следующей колонки, что довольно неудобно. Тем не менее, для некоторых текстов имеет смысл использовать именно многоколоночный текст из-за эффекивного использования свободного пространства по ширине. CSS3 предлагает сразу четыре свойства для создания и управления колонками: column-count
, column-gap
, column-width
и column-rule
. Для наглядности значения некоторых свойств показаны на рис. 1. Рис. 1. Стилевые свойства для колонок Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count
задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width
указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок. Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1). Пример 1. Три колонки HTML5
CSS 3
IE 9
IE 10
Cr
Op
Sa
Fx
Дистинкция дискредитирует непредвиденный интеллект, учитывая опасность,
которую представляли собой писания Дюринга для не окрепшего еще немецкого
рабочего движения. Аподейктика порождена временем. Платоновская академия
методологически преобразует трансцендентальный предмет деятельности, хотя в
официозе принято обратное. Отношение к современности реально создает позитивизм,
однако Зигварт считал критерием истинности необходимость и общезначимость,
для которых нет никакой опоры в объективном мире. Культ джайнизма включает
в себя поклонение Махавире и другим тиртханкарам, поэтому гетерономная этика
преобразует типичный принцип восприятия, при этом буквы А, В, I, О символизируют
соответственно общеутвердительное, общеотрицательное, частноутвердительное и
частноотрицательное суждения. Катарсис, по определению, непредвзято оспособляет
онтологический даосизм, при этом буквы А, В, I, О символизируют соответственно
общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное
суждения. Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому
принцип восприятия неоднозначен. Платоновская академия раскладывает на элементы
смысл жизни, учитывая опасность, которую представляли собой писания Дюринга для
не окрепшего еще немецкого рабочего движения. Ощущение мира, как следует из
вышесказанного, подчеркивает язык образов, учитывая опасность, которую представляли
собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Освобождение,
следовательно, философски оспособляет закон исключённого третьего, изменяя привычную
реальность. Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной. Рис. 2. Многоколоночный текст Чтобы урезать набор применяемых стилевых свойств, можно воспользоваться универсальным свойством columns
, оно одновременно устанавливает ширину колонок и их число (пример 2). Пример 2. Использование columns Column {
-webkit-columns: 200px 3;
-moz-columns: 200px 3;
columns: 200px 3;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
-webkit-column-rule: 1px solid #ccc;
-moz-column-rule: 1px solid #ccc;
column-rule: 1px solid #ccc;
}
Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap
и column-rule
не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется. Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания. Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript. Существенным в спецификации является то, что у колоночного элемента должны быть явно указано значение количества колонок и/или ширина колонок. Браузеры должны отображать колоночные элементы образом схожим с отображением таблиц, но содержимое будет распределяться по колонкам динамически. На настоящий момент, нет возможности определять свойства отдельных колонок (например, цвет отдельной колонки). Будем надеяться, что после того, как все текущие предложенные в реализацию свойства будут реализованы, появятся и свойства управления колонками. Webkit-column-width
:15em
; Интервал колонки – это именно то, что написано, размер пустого свободного пространства между колонками, указанный в единицах CSS. Как вы уже наверно догадались, могут использоваться все обычные единицы измерения, стили и цвета: Как вы уже заметили, в коде используются модификаторы движков. Если не указать модификатор, то даже поддерживающие браузеры проигнорируют свойства column-xxx. Первое задумано как указатель того, что необходимо начать следующую колонку. Например перед тегами h2. Второй позволяет отобразить элемент через все колонки, наподобие газетной врезки. 1.
ширина всех ячеек задана в процентах;
2.
сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других - в пикселах.
В
первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 4.22). Причём в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства
веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом. Пример 4.22. Ширина колонок в процентах
XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
Колонки одинаковой высоты
CSS часть
Вывод
Колоночная модель
Спецификации W3C определяют несколько новых свойств, позволяющих задавать колонки в HTML-верстке. Теперь как и в полиграфии можно задать ширину колонок, их количество и даже некоторые правила поведения. Количество и ширина колонок
Для создания колоночного элемента необходимо задать свойства сolumn-count
и/или column-width
. column-count
По-умолчанию, column-count
имеет значение auto
. Т.е. если задать column-width
, браузер самостоятельно вычислит количество колонок необходимое для отображения многоколоночного элемента. Такое поведение не всегда удобно, потому зададим количество колонок, в которых находится контент..column
{
-webkit-column-count
:2
;
-moz-column-count
:2
;
}column-width
Как сказано выше, можно задать ширину колонок не указывая количество колонок, а браузер вычислит его динамически. Ширину колонок можно указывать любыми единицами измерения доступными в CSS: em, px, %..column
{
-webkit-column-width
:15em
;
-moz-column-count
:15em
;
}
Конечно же можно комбинировать column-width
и column-height
:.column
{
-webkit-column-count
:2
;
-moz-column-count
:2
;
-moz-column-width
:15em
;
}Интервалы и линейки
Если полиграфические дизайнеры привыкли думать в терминах колонок и интервалов, то веб-дизайнеры были вынуждены работать с границами и отступами.colomn-gap
Спецификация W3C определяет значение интервала по-умолчанию в 1em, в примере мы и будем его использовать:.column
{
-webkit-column-gap
:1em
;
-moz-column-gap
:1em
;
}column-rule
Линейка тоже пришла из полиграфии. Изначально, линейки – это тонки линии между колонками, облегчающие чтение или разделяющие отдельные рассказы. CSS3 предоставляет три различных свойства настройки линейки: column-rule-size
, column-rule-style
и column-rule-color
, а можно использовать column-rule для
указания всех трёх свойств..column
{
-webkit-column-rule
:1em solid #000
;
-moz-column-rule
:1em solid Black
;
}Приколы использования
На текущий момент семейство свойств column поддерживаются браузерами на основе WebKit или Mozilla. Что будет если колонки ограничить по высоте
Браузер добавит колонок, чтобы уместить текст.
Спасает overflow
:hidden
.Отображение линейки в одной колонке
Если текст умещается в одной колонке, Mozilla не рисует линейку, а WebKit рисует.
WebKit:
Mozilla:Свойства, которые есть в спецификации, но не поддерживаются
Это свойства column-break
и column-span
. .column h2
{
column-break-before
:always
;
}.column h1
{
column-span
:all
;
}Заключение
Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.