Введение в CSS3 Multicolumn. Работаем с колонками

[ash_kgd]

Отличная статья! Надеюсь в скором будущем растягивание элементов будет поддерживаться и в Firefox, а также и column-fill в Chrome.

[Shedal]

Скажите, такие колонки предназначены только для текста? Или с их помощью можно и layout страницы верстать?

[norlin]

Учитывая, на какие извращения способна CSS-разметка сейчас, уверен, что эти свойства можно будет использовать и для текста, и для layout, и для еще кучи разных крутых штук.

[kichik]

Технически в сочетании с управлением разрывами можно, однако, основное предназначение — это все же многоколоночная верстка контента.

[Shedal]

А планируется ли введение каких-то новых свойств, направленных именно на вёрстку страницы? Или считается, что существующие float, position, отступы и т.п. работают достаточно хорошо?

[kichik]

Grid Layout, FlexBox.

[XimikS]

habrahabr.ru/post/125802/
ну, с чистой совестью юзать сейчас это можно разве что в метро-приложениях для win8 =(

[Metaller]

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

[elky]

А вы возьмите и пользуйтесь. Чем дольше все ждут, тем медленнее прогресс.

[JohnnyD]

Когда наступит судный день, и все старые браузеры умрут.

[bolk]

Это перевод что ли? Непонятно почему надписи на картинках английские, а Хокон Виум Ли остался как «Håkon Wium Lie».

[kichik]

Самописная ;) Хокона перевел, над картинками подумаю — я их сразу готовил под английскую версию, которой пока нет :) То есть тут скорее обратный процесс: на русском появляется раньше.

[BOLTIKUS]

Есть ли js библиотека для поддержки мульти-колоночности для всех броузеров?

[kichik]

можно использовать плагин для jQuery Columnizer (http://welcome.totheinter.net/columnizer-jquery-plugin/).

Правда, она около года не обновлялась.

[leMar]

А еще она тормозная и глючная. Проще самому написать. Это не так сложно.

[qrazydraqon]

на сегодня поддерживают только Internet Explorer и Opera

Никто не ожидал, а этот день настал.

[danSamara]

Не хватаем, имхо, автоматической разбивки по высоте. То есть чтобы величина контейнера была не выше, допустим, 2/3 экрана. Единицы измерения под это дело уже есть, а поддержки в колонках — нет.

[qmax]

Что-то мне кажется, что многоколоночность будет выглядеть весьма убого без выравнивания по ширине (text-align: justify), а оно, в свою очередь, выглядит весьма убого без авто-переносов в словах.

Многие ли браузеры умеют авто-расстановку переносов?
/* да, я знаю, что жаваскриптом можно расставить в тексте ­ */

[qmax]

Ага.
В css3 есть свойстваhyphenate-after
hyphenate-before
hyphenate-characters
hyphenate-lines
hyphenate-resource
hyphens

Не поддержиаются никем.

[kichik]

IE10 поддерживает ;)

[qmax]

ну да, по данным mdn:
chrome-13, safari-5.1: -webkit-hyphens
firefox-6: -moz-hyphens
ie-10: -ms-hyphens

Латынь, правда не все поддерживают, поэтому лорем ипсум не проходит :))

[xrays72]

...column-gap. Чтобы изуально обозначить раздел...

Добавьте букву в перед изуально.

[LEON4ik]

Спасибо, интересная статья, было приятно почитать.

Интересно, почему column-span может принимать только значения none или all, а не число. Например, если текст разбит на пять колонок, а какой-то фрагмент (цитату) хочется выделить и поместить на ширину двух колонок, то так сделать не получится?

[kichik]

В текущей версии так сделать нельзя. Тут есть важный момент: элемент со span-all разбивает поток контекста на две части: до и после, каждая из которых самостоятельно делится на колонки.

То есть это работает не так:
A D G
S S S
B E H
C F I

а так:
A B C
S S S
D F H
E G I

Для вашей задачи больше подходит CSS Exclusions (http://www.w3.org/TR/css3-exclusions/)

[LEON4ik]

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

CSS Exclusions — очень мощный инструмент. Правда, насколько я понимаю, браузерами он пока не поддерживается.

[kichik]

Предварительная версия под названием Positioned Floats есть в IE10. На работу можно посмотреть здесь: ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html

Можно также посмотреть на прогресс со стороны Adobe — html.adobe.com/webstandards/cssexclusions/ — они готовят реализацию для Webkit.

[Arilas]

Интересно, есть ли возможность как-то реализовать Разрывы в браузерах, так как реализованы они только в WebKit(криво и используя column-break-inside) и Opera). Если такое возможно реализовать, то перестану использовать Masonry в проектах, так как он достаточно тяжелый, и на старых компьютерах чуть подлагивает, а если еще прикручивать другие плагины для jQuery, то может вообще зависнуть.