—»     —»   Разметка в несколько столбцов (журнальная разметка) на CSS3
  Раздел: CSS/Style Sheets   Комментариев: 2  

Разметка в несколько столбцов (журнальная разметка) на CSS3

Обычно люди теряют мысль при чтении длинных полотен текста. Именно поэтому печатные СМИ вроде журналов или газет, делят контент на несколько колонок, чтобы текст легче воспринимался и читался.

Разметка в несколько столбцов (журнальная разметка) на CSS3
Разметка журнала от Ronel van Heerden

Создание колонки в веб – это совсем иная история. Это очень сложно. На самом деле, не так давно, нам приходилось вручную разделять контент при помощи div-элементов, а затем выравнивать тексты по левому или правому краям, затем указывать ширину, отступы, поля, границы и так далее.

Но, с приходом CSS3 и модулем для создания нескольких колонок, задача сильно упростилась. Как видно по названию, данный модуль позволяет нам разделять контент на несколько колонок, примерно таким образом, как мы это видим в журналах и газетах.

Браузерная поддержка

Множественные колонки сегодня поддерживаются во всех браузерах – Firefox 2+, Chrome 4+, Safari 3.1+ и Opera 11.1, за исключением, конечно же, IE, но следующая версия, IE10, также должна поддерживать этот модуль.

Что касается остальных браузеров, для того, чтобы этот модуль заработал, для Firefox понадобится прописать префикс –moz-, а для Chrome и Safari нужен будет префикс –webkit-. Для Opera не нужно ничего дополнительного.

Создание нескольких колонок

Перед созданием колонок нам нужно подготовить несколько абзацев текста для демонстрации, обернутых в HTML5-тег «article».

<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
amet tincidunt orci placerat in. Integer vitae consequat augue.

//and so on
</article>

…а затем указать ширину 600 пикселей при помощи каскадной таблицы стилей.

Теперь давайте приступим к созданию колонок.

Журнальная разметка с использованием column-count

В нижеприведенном примере мы разделим контент на две колонки посредством параметра column-count. Этот параметр будет сообщать браузеру, что контент нужно генерировать в указанном количестве колонок, и браузер должен выставлять ширину каждой колонке.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {  
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}

* Демо column-count

Кроме создания посредством указания количества, колонки можно создавать, указывая ширину при помощи параметра column-width и позволяя браузеру определить, сколько колонок должно быть создано.

Журнальная разметка с использованием column-width

В данном примере мы указываем ширину колонки 150 пикселей, что в результате приводит к сортировке контента в три колонки.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}

Как указано в спецификации, текущая ширина колонки может быть шире или уже, чем указанная ширина колонки, в зависимости от доступного свободного пространства. Также, если значение ширины не указано, то в качестве исходного значения будет выставлено auto, которое также означает «отсутствие колонки».

* Демо с column-width

Журнальная разметка с использованием column-gap

Column Gap определяет пространство, которое отделяет каждую колонку. Значение расстояния может быть указано в em или px, но как указано в спецификации, значение не может быть отрицательным. В нижеприведенном примере мы указываем 30 пикселей расстояния, и поэтому пространство между колонками выглядит немного шире.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {	
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}

* Демо column-gap

Журнальная разметка с использованием column-rule

Если вам захочется добавить границы между колонками, вы можете использовать параметр column-rule, который работает примерно так же, как и параметр border. Так что, предположим, если нам нужно добавить точечную границу между колонками, мы можем использовать код:

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {
-moz-column-rule: 1px dotted #ccc;
-webkit-column-rule: 1px dotted #ccc;
column-rule: 1px dotted #ccc;
}

* Демо column-rule

Журнальная разметка с использованием column-span

Данный параметр работает примерно так же, как и colspan в теге table. Основное назначение данного параметра заключается в создании сносок для заголовка, который бы распространялся на все колонки. Давайте посмотрим на следующий пример.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article h1 {
-webkit-column-span: all;
column-span:all;
}

В вышеприведенном примере мы сделали так, чтобы h1 распространялся на всех колонках, и если span колонок будет определен, 1 будет взят как умолчание. К сожалению, этот параметр, на данный момент будет работать только в Opera и Chrome.

* Демо column-span

В завершение

На сегодня всё! Мы рассказали вам о нескольких самых распространенных методах создания нескольких колонок на сайте при помощи CSS3 и, как мы упоминали в самом начале, данный модуль работает практически во всех современных браузерах, но пока что не будет работать в Internet Explorer, но эта проблема решается при помощи javascript-библиотеки.

Надеемся, что теперь у вас есть четкое представление того, как создавать колонки при помощи CSS3, и если у вас есть время на эксперименты, то не стесняйтесь делиться результатами проделанной вами работы здесь с другими читателями. Спасибо за чтение и за то, что были с нами!

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, верстка сайта
Опубликовал Design FactoRy   Прочитано (раз): 14123   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 30 октября 2012 @ 09:59
Написал: trance — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
article Очень сырой, много багов, ох и намучился я с ним.

Например если в тексте который обрамлен артиклом есть картинка, то в мозилле картинка обрезается ровно по ширине столбца, в хроме текст налазит на картинку. В баг трекере w3c это висит еще с 2010 года.

Второй интересный баг, в хроме некоторые столбцы (обычно третий) вообще не реагирует на попытки изменить общий стиль артикла.

Третий баг, опять таки хром - если содержимое артикла обрамить в какой-нибудь враппер то стиль к нему не применяется совсем никак, блок становится шириной в 1(!) колонку и высотой в 100% по высоте страницы.

Не рекомендую использовать артиклы пока не пофиксят баги.


Но задумка весьма интересная, и если посидеть с бубном час другой, то баги эти можно обойти
Комментарий #2: 7 ноября 2012 @ 06:37
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Похоже скоро наступит эпоха он-лайн журналов wink


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031