Многоколоночность на CSS подробнее

http://www.hongkiat.com/blog/css3-multi-columns/
  • Перевод
  • Tutorial
В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.



Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div'ов. Но все может стать намного проще с CSS3 Multi Column Module.

Официальная спецификация, Поддержка браузерами.

Создание контента, разбитого на несколько колонок


Используем 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.  
  
    //и т.д.
</article>  


Разбиваем текст на две колонки:



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


При помощи свойства column-width можно задать колонкам необходимую ширину:



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


Интервал между колонками


Интервал задается свойством column-gap в px или em, и не может быть отрицательным:



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


Разделитель колонок


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



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


Объединение колонок


Свойство column-span работает аналогично с colspan в table, объединяя нужные колонки.



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


Демо всех примеров


+ исходники.

Итог


Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную javascript-библиотеку.
Поделиться публикацией
Комментарии 46
    0
    В Firefox 15.0.1 в последнем демо заголовок теснится в первой колонке.
    Похоже забыли одну строчку дописать :)
      –2
      Для устаревших браузеров можно применять специальную javascript-библиотеку.

      Которая не работает в Opera, так что для наших широт неприменима.
      +3
      Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще.

      Это очень спорное утверждение. Многоколоночность на бумаге имеет скорее прикладной смысл, чем удобство чтения (примерно как в истории с раскладкой QWERTY), на компьютерном экране многоколонная верстка текста имеет больше недостатков, чем достоинств, и ее используют скорее как «имитацию бумаги», из ностальгическихи стилизационных мотивов.
      • НЛО прилетело и опубликовало эту надпись здесь
          –3
          Обладателям широких мониторов незачем распахивать окно браузера на всю дурь ширину.

          У бумажной верстки не было потенциально бесконечного вертикального скролла и колеса мышки, она была ограничена размером буажного листа по вертикали, что и заставляло извращаться (плюс всякие уже редакторские заморочки с размером и объемом авторской колонки). У веб-верстки все это есть, поэтому многоколонность не имеет особого смысла, и создает только неудобства, переходящие в извращения.
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Чтоб у вас помещалось полноценное окно браузера, консоль, чат и ещё что-нибудь.

              Я как-то у друга пытался почитать форум один с распахнутым браузером на мониторе дюймов за 25.
              Шея устала.
                +2
                Чтобы несколько окон рядом располагать. Вы когда за стол садитесь, тоже газету раскладываете на весь стол?
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Чтобы не тыкать в панель задач (или в док там...) лишний раз
              0
              У меня два 21.5" монитора. Текст в две колонки воспринимается нормально только в PDF в альбомной ориентации. На веб-странице, где есть скроллинг, 2 колонки не нужны. Или надо разбивать на страницы (есть шанс не угадать с высотой), либо в одну узкую колонку, которая со скроллингом читается лучше, чем 2 колонки. Многие сайты так и сверстаны — узкая колоная по центру.
              • НЛО прилетело и опубликовало эту надпись здесь
              +2
              Да уж кучу времени, как НЕ спорное.
              Оптимальная ширина колонки — 35-50 символов (полтора алфавита).
              Очень важен ровный левый край (чтобы при переносе взгляда с конца одной строки на другую было, за что зацепиться).
              При таких условиях даже обычный читатель получает некоторые преимущества скорочтения, а уж владеющий последним вообще будет в своей стихии.

              Естественно, при многоколонке важно, чтобы вся колонка целиком по высоте помещалась в поле зрения (по этой причине, например, вертикально свёрстанную книгу в PDF гораздо комфортнее читать на вертикальном экране, либо распечатать).
              +4
              Колоночная вёрстка хороша, когда низ первой колонки и верх второй помещаются на одном экране. Если же текст большой, тогда либо нужно делать горизонтальную прокрутку (которая обычно работает из рук вон плохо), либо отслеживать размер экрана и динамически разбивать текст на страницы.
                +5
                На всякий случай оставлю это здесь: habrahabr.ru/company/microsoft/blog/143158/
                  +2
                  Если честно, меня бесит мультиколоночная верстка (именно длинный текст) на сайтах… С вероятностью 99% я закрою этот сайт и пойду искать этот же текст в нормальной верстке… пусть лучше это будет длинная простыня в фиксированной верстке на 1024, но читается намного проще и мотать туда сюда меньше и после отвода глаз намного проще найти место где читал…

                  Лучше бы сделали мультиколонночность в плане layout, чтобы без всяких флоатов и тд делать быстро верстку, чтобы не колдовать с помощью триксов над выравниванием колонок по вертикали и тд и тп…
                    +1
                    Небольшой трабл

                      +1
                      Блин, как же сейчас просто решается задача… а когда-то давно мы прям измучились, делая такие колонки, но так и не создали идеального кроссбраузерного решения.
                        +3
                        Мультиколоночность — это замечательно! Для читалок электрокнижек. В вебе как обычно, мы не знаем, где нижний край экрана и не можем обеспечить правильный постраничный скроллинг. Так что многоколоночность оказывается полезна только для текстов, которые гарантированно влезают в экран.

                        Иначе — никто не лазал по листу газеты перекинутому в нераспознанный PDF значительно больший ширины экрана? Вот там полный скроллокошмар.
                          –1
                          Электрокнижки обычно по размерам меньше обычного книжного листа. Многоколонник при таких размерах не улучшает читабельность, а ухудшает.
                            –1
                            Обычно может и да, а у меня электрокнижки распахиваются на 37"
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              100% высоты — это общая высота, а не нижний край, увы. Пользователь проскроллил шапку — и что дальше?
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  В том и беда, что рассчитывать на пользователя проскроллившего шапку — значит не рассчитывать на пользователя сразу перешедшего к чтению.

                                  И можно придумать over 9000k вариантов, я согласен… на выходе мы получим к сожалению охват 1/9000 пользователей.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      +1
                                      Да, и я об этом написал три поста назад :)
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        Мне тоже нравится этот вариант, но увы, до него браузерам ещё расти и менять версии.
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            Скрипты для колонок?! Бррр, сделайте меня развидеть это. Если можно обойтись без скриптов — стоит без них обойтись.
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                  0
                                                  Это да, но лучше до такого не доводить.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                +2
                                Один минус — если указано количество колонок — их полюбому будет столько, сколько указано. У меня была задача где вторая колонка появлялась по мере заполнения контентом (иначе — одна), так хотелось использовать эту новинку, но увы!
                                  +1
                                  1) IMHO, многоколоночность НУЖНА только для оформления стихов
                                  2) Во всех остальных случаев — ПО ВЫБОРУ пользователя
                                  3) А есть всё-таки корректное решение для «старых» браузеров?
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      +5
                                      1) Для стихотворений? Многоколоночность? Как раз именно-то и стихотворения никогда не печатаются в несколько колонок. Во всех книгах стихотворения напечатаны в один столбец посередине страницы.
                                      2) По-выбору? Давайте у пользователя перед заходом на сайт спрашивать: «Вам как, в одну колонку или несколько? Хорошо, вам адаптивную верстку или нет? Окей, вам картинки отключить или показать?»

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое