Вёрстка колонками средствами CSS3

    Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.

    Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.

    Колоночная модель


    Спецификации 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;

      -webkit-column-width:15em;
      -moz-column-width:15em;
    }

    Интервалы и линейки


    Если полиграфические дизайнеры привыкли думать в терминах колонок и интервалов, то веб-дизайнеры были вынуждены работать с границами и отступами.

    Интервал колонки – это именно то, что написано, размер пустого свободного пространства между колонками, указанный в единицах CSS.

    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.

    Как вы уже заметили, в коде используются модификаторы движков. Если не указать модификатор, то даже поддерживающие браузеры проигнорируют свойства column-xxx.

    Что будет если колонки ограничить по высоте


    Браузер добавит колонок, чтобы уместить текст.

    Спасает overflow:hidden.

    Отображение линейки в одной колонке


    Если текст умещается в одной колонке, Mozilla не рисует линейку, а WebKit рисует.
    WebKit:

    Mozilla:


    Свойства, которые есть в спецификации, но не поддерживаются


    Это свойства column-break и column-span.

    Первое задумано как указатель того, что необходимо начать следующую колонку. Например перед тегами h2.
    .column h2
    {
      column-break-before:always;
    }


    Второй позволяет отобразить элемент через все колонки, наподобие газетной врезки.
    .column h1
    {
      column-span:all;
    }


    Заключение


    Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.



    По теме:
    Спецификация W3C: www.w3.org/TR/css3-multicol
    Статья, которую я перевел, но когда количество моих комментариев стало сопоставимо с текстом, написал свою собственную: www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts
    Хороший набор примеров: www.quirksmode.org/css/multicolumn.html
    Мой пример: unconnected.info/multicolumn.htm (мой сайт боится хабраэффектов, если не открылось, ай эм сорри)
    Снэпшот моего примера: http://www.peeep.us/a1660973 (спасибо kuzvac)
    Поделиться публикацией
    Комментарии 115
      +9
      Вот самым востребованным в css3 было бы свойство display: column. Прсто и без вопросов Если несколько блоков с display: column встречаются внутри одного блока — выстраивать их столбиками одной высоты с возможностью добавлять маргины, паддинги, и бордеры. Столько бы проблем сразу решило.
        +2
        Это можно делать уже сейчас, и работает «почти» везде, однако надо заранее знать количество колонок:

        <html>
        	<head>
        		<style>
        			.column { display: inline-block; width: 33%;}
        		</style>
        	</head>
        	<body>
        		<div>
        			<div class="column">
        				<h3>Заключение</h3>
        				<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
        			</div>
        			<div class="column">
        				<h3>Заключение</h3>
        				<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
        			</div>
        			<div class="column">
        				<h3>Заключение</h3>
        				<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
        			</div>
        		</div>
        	</body>
        </html>
        
          +5
          Да знаю я, как это делается. Кучу способов знаю. Только, например, ваш способ не даст колонки одинаковой высоты. А чтобы сделать колонки именно одинаковой высоты — нужно что-то посложнее inline-block. Кстати,
          .column { display: inline-block; *display: inline; zoom: 1; width: 33%;} — вот теперь везде будет работать, ага.
            +4
            У пэрента не забудьте сделать вертикал-алигн.
              +1
              не на много сложнее ;) + margin-bottom: -32767px; padding-bottom: 32767px; background:#eee;
                0
                Я бы поставил просто 30000px, чтобы не нарваться на 215 болезненно.
                  0
                  Так можно бэкграунд забабахать. А нижний бордер? Я повторюсь, но я все эти методы знаю.

                  Кстати, раз уж все пытаются подсказать мне — самый лучший способ делать колонки — display: table в комбинации с inline + zoom в ie. Для ие, правда, придётся заюзать expression, но у меня есть универсальный. А для одинаковой высоты в ие я написал column.htc Примерно такой стиль получается:

                  .table
                  {
                  width: 100%;
                  display: table;
                  }

                  .column
                  {
                  display: table-cell;
                  vertical-align: top;
                  }

                  .column,
                  {
                  behavior: url(/stylesheets/column.htc);
                  display: inline;
                  width: expression(function(t){
                  var sum = 0;
                  for (var i = 0; i < t.parentNode.childNodes.length; i++) {
                  if (t.parentNode.childNodes[i] != t) {
                  sum += t.parentNode.childNodes[i].offsetWidth;
                  }
                  }
                  return t.parentNode.clientWidth — sum + 'px';
                  }(this));
                  zoom: 1;
                  }

                  Не могу свой универсальный экспрешн найти, где-то был.

                  И всё, любые колоки одинаковой высоты и ни единого лишнего блока.
                +5
                гм… интересно как вы сплошной текст будете разбивать таким способом на колонки — вручную!? а если он динамический!?..
                  +3
                  Это не у меня надо спрашивать а у vorbiz :)
                  Я отвечал на вопрос vorbiz'а, как сделать 3 дива (оказывается он знает лучше меня) ;-)

                  Про выравнивание колонок по высоте я способов не знаю — не вижу альтернативы CSS3, о которой говорилось в статье.

                  Тип «display: column» — считаю бессмысленным
                  +6
                  Ох. Не поняли вы основной прелести спецификации.
                  Она в распределении контента между колонками.
                    0
                    Флекс бокс тоже отличная спецификация.
                    Но нужен малость для другого.
                    Ты сможешь с помощью него организовать распределение контента между колонками?
                    Нет, не сможешь.
                    Точно так же с помощью мультиколумна ты несможешь организовать тосование блоков, эластичное заполнение доступного пространства с разной степенью эластичности блоков. Не говоря уже о вертикальном распределении.

                    Короче все 4 спецификации нужны и прекрасны.
                      –3
                      я знаю для чего он нужен. весь интерфейс мозиллы на нём построен. его достаточно для большинства нужд. а распредление контента на колонки не нужно. у вэба своя специфика — нет ограничения на вертикальный размер страницы, но на неё смотрят через маленькое окошко. при многоколоночной вёрстке, любой достаточно объёмный текст, не влезающий в это окошко, будет вызывать неиллюзорный баттхёрт. так что невозможность в угоду дизайнерским изыскам а-ля полиграфия сделать неэргономичный интерфейс — несомненный плюс.
                        +2
                        Не надо говорите «гоп»… В 95 году «достаточно» было текста, и GIF-анимация была верхом веб-мультимедиа…
                          –1
                          вот когда будет не достаточно — тогда и поговорим. хорошо?
                            +1
                            Уже не достаточно. Собственно, давно не достаточно.
                              0
                              давно недостаточно отсутствия флексбоксов, которые необходимы для адаптивной табличной вёрстки — то что сейчас приходится релизовывать на флоатах или инлайн-блоках.

                              перенос контента по нижней границе, а не по правой — нарушает естественный порядок его восприятия ( слева-направо, потом сверху-вниз )
                              +1
                              Ниже уже отписали, но дополню: если не надо Вам, то не значит что не надо всем, Вы не один. ))
                            +3
                            Позволь не согласиться. Я довольно часто испытываю в таком распределении потребность.
                            В области веб разработки работаю больше 10 лет. Так что, надеюсь, специфику знаю неплохо.

                            1. Никакого батхерта это не вызовет, если понимать когда и где это можно и нужно применять.
                            2. Мультиколумном можно позиционировать не только текст. Про это тоже не стоит забывать.
                            3.
                            так что невозможность в угоду дизайнерским изыскам а-ля полиграфия сделать неэргономичный интерфейс — несомненный плюс..html

                            Чем то напоминает "— Нет нужды ни в каких веб-шрифтах! Все сайты заполонит comics sans!".
                            Это бред. То, что есть те, кто не умеет использовать инструмент и совершенно точно будет использовать его неверно, не повод отказываться от инструмента. Всегда найдутся те, кто сможет использовать его во благо себе и пользователям проекта.
                              –2
                              1. ложь, пиздёжь и провокация. годится только для маленьких текстов, заведомо влезающих в экран и то с оговорками.
                              2. и чо?

                              ни одного примера использования во благо я так и не увидел. всё какие-то демки для макбуков.
                                0
                                Давай разберем реальный тесткейс:
                                Есть стартовая страница соц-сети. На ней надо одновременно разместить большое количество абстрактов статей написанных пользователями. Сами по себе абстракты не большие. Но их много. Как ты будешь решать эту проблему?
                                  +1
                                  лентой. у людей линейное мышление, так что даже если ты разбросаешь по экрану облако абстрактов, им придётся мысленно выстраивать их в одну последовательность, либо хаотично выцепить взглядом из это кучи несколько и забить на остальные, что ничем не лучше, чем если бы просто вначале ленты были выведены несколько случайных.
                                    0
                                    Почему лента это плохо — читайте в следующем комментарии :)
                                      0
                                      Это абстракты. Они не связаны тематически и невелики по объему. И, читай внимательно, должны в большом количестве находится на стартовой. Так что «несколько случайных» никого не устраивают.
                                        –3
                                        не должны.
                                          +1
                                          Это уж решать не тебе.
                                          Это требование из Т.З. реального проекта.
                                          И все что ты можешь — наилучшим образом решить проблему.
                                          Колбаса это значительно худшее решение, чем то, которое можно сделать с мультиколумном.
                                            –3
                                            тот кто составлял такое тз профнепригоден. и если раньше можно было аргументировать к технической сложности реализации, то теперь остаётся только к здравому смыслу, который, как видно, у некоторых отсутствует.
                                              +2
                                              Проф-пригодность оценивать опять же не тебе.
                                              Да и мнение твое ни на что не влияет.

                                              Кстати, я и в оценке с тобой совершенно не согласен.
                                                –5
                                                как дизайнер ты тоже профнепригоден.
                                                  +1
                                                  Я вообще то не дизайнер ни разу, так что и не думаю спорить с оной сентенцией.
                                                    +1
                                                    Профнепригоден тот, кто личный кабинет интернета Билайна делал.
                                      0
                                      Стандартное решение это колбаса. Длинная-длинная. Длинная-длинная-длинная.
                                      И если ты смотрел юзабилити-репорты, то знаешь, что никто особо эти абстракты прокручивать не будет.
                                      Так что те авторы которые окажутся внизу колбасы обречены на забвение.
                                      Кроме того, мы оба знаем, что у нас либо маленький абстракт размазанный на ширину 1600px экрана в 2 не читаемых строчки. Либо пара колонок по 70 символов. Ну три. Но неизменное их количество.
                                      И пустота. Пустое неиспользованное место. Потому что на низком разрешении не влезет.
                                      В общем у нас даже с колонками получится убойная колбаса и куча пустого места на высоких разрешениях экрана.
                                        +1
                                        если пользователь не прокручивает, значит информация его не очень интересует. значит в вываленной вами горе новостей слишком малый процент интересных. и именно эту проблему надо решать, а не как упихнуть на экран ещё больше всё также не интересной ему информации.

                                        в пустоте нет ничего плохого. интерфейс должен быть простым и понятным. перегруженных интерфейсов пользователи пугаются. хаотичное расположение информации их также отпугивает.
                                          0
                                          Пользователь не будет долго прокручивать колбасу разношерстных абстрактов даже при условии, что среди них есть потрясающе интересные и он знает об этом. Ознакомьтесь с примерами юзабилити тестов. На том же www.useit.com/ посмотрите.

                                          Хорошая компановка информации (а мультиколумн позволяет именно это) даст ему возможность за меньшее время, комфортно и без лишних движений ознакомится с большим объемом информации.

                                          Колонки не делают интерфейс перегруженным, если использовать их с умом.

                                          Пустота не должна быть уродливой и бесполезной. А с вашей лентой она только такой и будет. Пустоту надо использовать. С умом. А не смирятся с ней как с неизбежностью. Как в вашем случае.
                                            –4
                                            у кого-то явные проблемы с чтением =_=" повторяю: ПОЛЬЗОВАТЕЛЬ НЕ БУДЕТ ДОЛГО ЛИСТАТЬ ЛЕНТУ, ДОЛГО ВЫИСКИВАТЬ В ГОРЕ МУСОРА ИЛИ ДЕЛАТЬ ЧТО УГОДНО ЕЩЁ ДОЛГО, НЕ ПОЛУЧАЯ ПОЛОЖИТЕЛЬНОГО ФИДБЕКА В ВИДЕ ИНТЕРЕСУЮЩЕЙ ЕГО ИНФОРМАЦИИ.

                                            ты бы ещё в гугл послал. что я должен найти на сайте с вырвиглазными цветами?

                                            ты действительно думаешь, что хаотичные скачки между колонками более комфортны, чем ритмичные в рамках одной? ты действительно веришь, что чем больше на него вывалишь информации, тем с большей он ознакомится?

                                            неперегруженному интерфейсу колонки не нужны.

                                            не может быть уродливым то, чего нет. наличие какой-то возможности вовсе не означает, что ею надо пренепременно воспользоваться. на рабочем столе у тебя всё свободное место завалено или ты всё-таки стараешься убирать не нужные постоянно вещи в ящики?
                                              +3
                                              НЕ ПОЛУЧАЯ ПОЛОЖИТЕЛЬНОГО ФИДБЕКА

                                              Угу. Вот только он не будет долго скролить ленту даже если некий положительный фидбек будет.

                                              ты бы ещё в гугл послал.

                                              Гугл кстати тоже вполне даст нужные результаты. Задайся, кстати, вопросом — чей это сайт и почему я порекомендовал именно его.
                                              www.useit.com/alertbox/scrolling-attention.html

                                              неперегруженному интерфейсу колонки не нужны.

                                              Совершенно некорректное заявление. Ты отрицаешь возможность использования колонок как части неперегруженного интерфейса?

                                              не может быть уродливым то, чего не

                                              Вот только пустота есть. И она может быть уродливой.

                                              Безусловно, наличие инструмента никак не делает обязательным его использование.
                                              Но ты, по-моему, говоришь о том что сам инструмент следует уничтожить.
                                              Я же, напротив, рекомендую использовать его с умом.

                                              Что касается моего рабочего стола… то что бы получить доступ к тому, что нужно мне не приходится ничего скролить :) Все перед глазами.

                                              Повторяю предложение найти третейского судью, мнение которого нас обоих устроит.
                                                0
                                                я знаю чей. по ссылке нет сравнения длинных и толстых страниц. могу поспорить, если в топе будет не 6 диванов, а 26, то внимательно будут рассмотрены не более 10. очень показательно, что на самолёт так и не посмотрели, хотя он находится и в топе страницы. впрочем, я не вчитывался.

                                                да. колонки приводят к уплотнению информации и к её хаотичному расположению.

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

                                                тем не менее на нём полно уродливого пустого места! :-о

                                                да выбирай любого %-) поспорим втроём.
                                                  +1
                                                  Иногда такие дискуссии радуют меня, как верстальщика полиграфии, тем, что полиграфия статична, а при смене контента надо полностью переразвёрстывать.
                                                  Меня интересует такая деталь — будет ли соблюдаться горизонтальный ритм в колонках, основанный на опорной сетке, в случае внедрения в поток элементов, не совпадающих по высоте с (икс строк на высоту строки да икс минус один межстрочников на интерльньяж)? Иначе всё применение ограничивается однокеглевым текстом (если дизайнер это понимает).
                                                    0
                                                    Если верстальщик и дизайнер не идиоты, то ритм будет соблюден.
                                                    Но дизайнер должен учитывать этот ритм при создании макета.

                                                    Но «автоматически» его никто поддерживать не будет, если это имелось в виду.
                                                      0
                                                      именно об автоматике и речь
                                                        0
                                                        Да, кстати, интересный вопрос. Мне кажется автоматическая поддержка такого ритма — это как минимум странно, и будет больше мешать, чем помогать. Но если у всех внедренных элементов высота будет кратна высоте строки+интерлиньяж, то проблема решиться сама собой, разве нет?
                                                          0
                                                          В программах вёрстки это выглядит так — задаём опорную сетку, указывая точку отсчёта и интервал между линиями на основании интерлиньяжа основного текста, далее выбираем абзацы, привязанные к сетке, свободные элементы полировочно подсдвигаем.
                                                            0
                                                            Я пораскинул мозгами: может явное задание line-height с наследованием этого атрибута всеми встроенными в колоночный блок элементами создаст опорную сетку?
                                            +2
                                            0
                                            И опять же… на некоторых мониторах уже есть выше 2.5 тыс пикселей разрешение… И, честно говоря, мне смешно смотреть как хваленная «резинка» растягивается на весь экран… Не за горами 3000 пикселей и выше… и что тогда делать? Мое лично предпочтение — фиксат до 1000 пикселов по ширине, остальное — нафиг…

                                            PS: И опять же это я говорю о применении к стандартным сайтам (компаний там и т.д.), ибо всегда найдется задача для которой и 100500 пикселей будет мало… вот для них и придуман горизонтальный троллинг )
                                              0
                                              Вообще для резинки задается максимальная и минимальная ширина обычно.
                                              Нету ничего бесконечного. В том числе — тянучки.
                                              Даже с мультиколумном не будет. Хотя жить станет легче.
                                                +1
                                                мультиколонки хорошо, а вот если бы закрыли подразделение IE жить стало бы значительно легче… и как по мне еще и Оперу тоже, но это моя личная непрязнь к ней… )
                                                0
                                                Я не сильно посвященный в данном вопросе, и мой взгляд вообще никак нельзя сравнивать с дизайнерским, а может то, что я предполагаю уже используется… Так что сугубо imho.
                                                Но приведу пример, как я вижу использование размеров таких мониторов
                                                Нормальный монитор
                                                Широкоформатный монитор
                                                  –1
                                                  Простите, но то что я вижу это полный п#%&&ц. Разорвана страница и не дай бог человек с хай-резом уменьшит размер экрана.
                                                    0
                                                    Да, я осознал всю глупость своей затеи
                                                      +1
                                                      Для меня лично большое разрешение экрана, это просто как возможность разместить в однйо плоскости 3-4 приложения… т.е. к примеру при разработке вебсайта на мониторе 27" 2560x1440px открыты: браузер на пикселей 800-850 (понимаю часто бывает горизонтальный скроллинг, но мне же для личного тестирования) + VLC плейер в небольшом экране (где-то 450х300) с любимым сериалом каким-то или фильмом который я уже пересматриваю в сотый раз (ну не прет меня музыку слушать, хоть застрелите, мне надо чтобы зрение на что-то отвлекалось и разгружался мозк) + Eclipse на всем остальном экране… Eclipse переключается с фотожопом (для дорисовки, докраски, color picking'a), а VLC подменяется при необходимости textmate…

                                                      Но это для программиста, а для обычного пользователя:
                                                      Браузер на 1280 пксл + почтовый клиент + сиськи в VLC плеере + пасьянс… И все это без отрыва от Word'a… Т.е. большой экран позволяет работать с большим удобством одновременно с разными программами, а не издеваться над веб-дизайнерами и заставлять их придумывать а как разместить базу данных из 10 полей на экране в 3000px и с ужасом смотреть в будущее…
                                                        0
                                                        Согласен, почти также организую пространство на 1920, а вот на буковских 1280 активно использую рабочие столы
                                                          0
                                                          Если не совсем ясно выразился — рабочие столы Gnome
                                                            0
                                                            Привет им передавайте от Mac OS X Spaces… )
                                              0
                                              Есть возражения?
                                              Или может быть решение, которое не противоречит Т.З. и изящно решает проблему?
                                              Нет?
                                              Если нет, то может быть стоит решить проблему так:
                                              wsd.websaints.net/multicolumn_elastic.html
                                              Или так, если дорожим количеством символов в строке:
                                              wsd.websaints.net/multicolumn.html

                                              У нас столько колонок, сколько поместится на экран пользователя.
                                              Абстракты у нас близко к началу страницы. Хотя да, прокрутка будет. Но это абстракты. Их просматривают, останавливаются только на заинтересовавших. И переходят к полной версии статьи.
                                              Так что не надо говорить про скролл вверх-вниз по количеству колонок. Его не будет.

                                              И это не единственный пример. Их множество.
                                              Конформизм хорош в разумных пределах.
                                                0
                                                конечно не будет. пользователь двигаясь сверху вниз будет скакать между колонками, а дочитав каждый абстракт подниматься глазами/скроллингом к его началу и искать начало ближайшего непрочитанного. тому кто собирается прочитать все вы создаёте дополнительные раздражающие неудобства. а тому кто собирается выхватить только часть — ничем не помогли.
                                                  0
                                                  Думаю вы не правы. Человек окинет взглядом колонки и быстро просмотрит выделенные заглавия.
                                                  Если что то заинтересует — перейдет к чтению абстракта. И затем — либо статьи. Либо вернеться к всему информационному блоку в целом. Если нет — проскролит вниз. Благо скролить ему придется гораздо меньше.

                                                  Впрочем предлагаю пригласить третейского судью.
                                                  Давай попросим разрешить спор Ярослава Бирзула?
                                                  www.uxdepot.ru
                                                  На хабре его сейчас найду.
                                                    0
                                                    DezmASter — вот!
                                                    Если ты не согласен, то буду рад выслушать твои предложения касательно третейского судьи, авторитетного в данном вопросе.

                                                    Пишем ему в личку/twitter?
                                                        0
                                                        Если Бирзул не является с твоей точки зрения достаточно профессиональным, то я охотно выслушаю встречные предложения.
                                                      0
                                                      точно также он будет действовать и в случае ленты с той лишь разницей, что ему не придется каждый раз искать что он ещё не окинул взглядом, отсекая то, что уже окинул.
                                                        0
                                                        В случае ленты он одновременно имеет доступ к значительно меньшему объему информации. Ему приходится скролить. И он этого делать не будет.

                                                        Повтояю предложение обратиться к юзабилисту.
                                                          0
                                                          а в исследовании якоба сказано, что будет :-Р
                                                            0
                                                            не соглашусь… Вот возьмем примеру хабр… есть до утра людей которые читают «простыню» комментариев… я не буду предполагать даже как бы это выглядело в колонках… Главное — это контент…
                                                              0
                                                              кстати, наличие пейджера сильно раздражает %-) особенно когда переходишь на следующую страницу и получаешь половину только что прочитанных топиков…
                                                        0
                                                        Что ты думаешь по этому поводу?
                                                      +1
                                                      Нарисовал иллюстрацию к вашему спору, пример где многоколоночность может пригодится хотя бы как инструмент. Вот такая брошюра/схема/книга, скролл мыши допустим прикручен к навигации — следующая/предыдущая страница:



                                                      Но, если высота многоколоночного текста превышает высоту экрана и нужно скролить вверх-вниз, то это конечно ужас.
                                                        +1
                                                        вертикальная лента удобнее. её также можно скроллить постранично, а можно и любыми другими способами
                                                          +1
                                                          Расскажи это создателям www.bookmate.ru
                                                          Кстати у них то, что запросто делается с помощью мультиколумна сделано совершенно адским образом. Очевидно по причине требований к кроссбраузерности проекта.
                                                      +1
                                                      Ну вот почему меня харит сейчас в ответ на этот комментарий нарисовать extension для firefox и crome который бы преобразовывал любой текст на странице исключительно в Comic Sans Serif… :)
                                                        0
                                                        Лучше не надо.
                                                        Давайте использовать web-fonts там где они нужны и по возможности выбирать гарнитуры шрифтом со вкусом и пользуясь здравым смыслом.
                                                          0
                                                          Если пользоваться здравым смыслом то можно чекнуться… Именно когда не здравый, ну или не совсем здравый смысл, в голову приходят совершенно здравые идеи… парадокс… )
                                                            0
                                                            Ну вот.
                                                            Пользуйся здравым смыслом → сойдешь с ума → в голову начнут приходить совершенно здравые идеи.

                                                            Цель достигнута. Никаких парадоксов.
                                                              0
                                                              Начнешь реализовывать здравые мысли → сойдешь с ума…
                                                  0
                                                  Точно, я совсем забыл про них, спасибо. Я их встречал давно уже, но они так и остались у меня периферии сознания. Кстати, я про них периодически вспоминаю, начинаю искать, не нахожу и снова успешно забываю )
                                                  0
                                                  Это уже почти таблицы :)
                                                  +2
                                                  Спасибо большое!
                                                  Только такие статьи лучше не в выходные, а в будни с утра постить, чтобы не прошли незамеченными, а то утонут в массе других обзоров.
                                                    +3
                                                    статьи надо постить по мере изготовления :)
                                                    если, конечно не планируешь какую-то связанную акцию
                                                    +1
                                                    чувак респект, как я долго искал подобное. спасибо
                                                      +1
                                                      Конечно же можно комбинировать column-width и column-height:
                                                      .column
                                                      {
                                                      -webkit-column-count:2;
                                                      -moz-column-count:2;

                                                      -webkit-column-width:15em;
                                                      -moz-column-count:15em; => -moz-column-width:15em;
                                                      }

                                                      Опечатка?
                                                      0
                                                      Ох как этого не хватало.
                                                        0
                                                        А вы мне замечательную мысль подали, спасибо. Уже с неделю думаю.
                                                          –1
                                                          у них есть хоть один полезный юзкейс?
                                                            0
                                                            wsd.websaints.net/contenteditable.html — просто кусочек некой демонстрашки. + использую в стартапчике, который неспешно пишу долгими осенними вечерами.
                                                            Полного юзкейса быть не может, так как ни в одном браузере спецификация пока полностью не поддерживается. Увы и ах.
                                                              0
                                                              вертикальная полоса прокрутки — это фича?
                                                                0
                                                                Делалось для демонстрации на моем макбуке.
                                                                Там нет полосы прокрутки. :)
                                                                Если смотрите не на нем — прийдется мириться с некоторыми неудобствами.
                                                                  0
                                                                  Кстати… почему вас она смущает то?
                                                                  Если контент не влазит по высоте на экран, то нормально, что появляется полоса прокрутки.
                                                              0
                                                              мне бы на прошлой работе для одного сайта колонки пригодились… ну да и прошлой она (работа) стала в том числе из-за того, что пригодились бы.
                                                                0
                                                                а по подробней?
                                                                  0
                                                                  да дизы нарисовали контент в две колонки с пейджингом, чтоб красивше было. после аргумента «газету видел? вот должно быть как в газете» я от неожиданности временно лишился дара речи :) я тогда был помесью контертера с верстаком, так что смог оценить задумку, благо проект не только мной делался.
                                                              +4
                                                              В Опере нет поддержки и приоритет низкий. Так что не скоро будет. Правда сносно деградирует в одну колонку.
                                                              В webkit если используете позиционирование отличное от static, то огребете проблемы. Тоже самое с float. Webkit норовит позиционировать элемент так, как если бы колонок не было.
                                                              Инструкции разрыва элементов для переноса из колонки в колонку не работают вообще нигде.
                                                              Хотя сама по себе спецификация отличная. Является одной из 4х свежих спеков по лаяутам.
                                                              Поищите доклад с WSD в Риге/Питере. Или с последнего РИТа. Там рассказывают про все 4 спецификации.
                                                                +1
                                                                Кстати еще очень странно переносы в вебките происходят. Попробуйте поиграться с объемом текста и увидите иногда странные отступы вверху колонок.

                                                                p.s. да, под «странным» я имею в виду через опу.

                                                                Впрочем спецификация отличная. И если вы можете смирится с деградацией в 1 колонку в опере и ie, а так же вам не надо хитрое позиционирование элементов в колонках (например там просто текст), то вполне можно использовать.
                                                                  0
                                                                  // я видел слово «если», но замечу:
                                                                  «деградация в одну колонку» очень плохо звучит для картинок без align'а с шириной, подогнанной под ширину колонки в пикселях (а среди контентных картинок таких очень много)
                                                                    0
                                                                    Эм. Ширина колонки при деградации может остаться прежней и ничего не поломается.
                                                                    Ну или я не очень понял о какой проблеме идет речь.
                                                                    «В одну колонку» не значит «оно расплывется по всему экрану».
                                                                      0
                                                                      я про column-count без ширины. а если и с шириной, то уж очень мало кому захочется видеть в фф+вебкитах нормальную страницу, а в остальных полоску с жуткой высотой. но технически согласен — можно и ширину тоже задать.
                                                                        0
                                                                        Так ведь читаемость наилучшая все равно для 65-75 символов в строке.
                                                                        Если совсем без ограничений ширины (в обе стороны), то текст рискует расплыться так, что его читать будет невозможно или, напротив, будет по паре строк в строке, что даст тот же эффект.
                                                                          0
                                                                          max-width может где-нибудь выше стоять. и вместо блока с тремя колонками 1400*400, получим блок 1400*1200, состоящий из 400px колонки и 800px пустоты — не айс.
                                                                            0
                                                                            Не понял мысли, кажется.

                                                                            Если не влазит 1 колонка… то просто будет на одну меньше.
                                                                            Можешь посмотреть в примерах, изменяя размеры окна браузера.
                                                                            Там и жесткая и эластичная версия.

                                                                            habrahabr.ru/blogs/css3/105424/#comment_3303019
                                                                  0
                                                                  угу недавно игрался с колонками, нормальная поддержка только у chrome пока, хотя вещь реально полезная. Очень странно, что другие броузеро разработчики забивают на эту полезную спецификацию.
                                                                    0
                                                                    а chrome — это разве не webkit?
                                                                    академический вопрос, мож я чего не понимаю
                                                                      +1
                                                                      webkit, он, родимый.
                                                                      0
                                                                      Вообще то, лучше всего она для FF.
                                                                      В хроме, как было написано, проблемы с распределением между колонками и элементами которые позиционированы не как static
                                                                    +1
                                                                    «состоящие из 8 до 12 слов. „
                                                                    либо “длиной от 8 до 12 слов», да хоть «состоящие из слов в количестве от 8 до 12 штук», но уж никак не «из 8 до 12».
                                                                    Sincerely yours, Grammar Nazi.
                                                                      +2
                                                                      Пожалуйста, не кормите tenshi — а то пц топику.
                                                                        +5
                                                                        Про мульти-колонки: крутая штука с т.з. основного своего механизма по перераспределению текста, но газетный или книжный текст отличается от веб-страниц гораздо сильнее, чем это кажется.

                                                                        И всё же никто не отменяет случаев, когда мульти-колонки действительно нужны: имитация газеты (электронная версия какой-нибудь Times) или книги (веб-приложение для чтения книг, например). В общем, было бы чудесно иметь в арсенале такую чудесную, уникальную в своём роде, фичу.

                                                                        Говорите, что это неюзабельно? Так и карандашом можно убить, при желании. Это же не повод запрещать карандаши.
                                                                        +3
                                                                        пример где колонки сделаны без css3:

                                                                        www.katenke.net/static/borodkin/borodkin.html
                                                                          0
                                                                          Ещё лучше.
                                                                            +1
                                                                            Ужас. При каждом ресайзе окна перебрасывает на первую страницу.
                                                                              +1
                                                                              шутейный ужас. Ресайзы редки, они меняют размер экрана и, как следствие, компоновку и количество страниц. Хотя это не оправдание — надо исправлять.

                                                                              Большей проблемой (непреодолимой) является невозможность в некоторых браузерах отображать большие тексты. Приходится бить на куски до 100 кБ текста в каждом.
                                                                            +4
                                                                            Исторический офтоп: в древних Netscape'ах (версий 3-4.х) поддерживался тэг multicol, который служил для того же самого, к сожалению тогдашние ИЕ этот тэг не поддерживали.

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

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