Как стать автором
Обновить

Комментарии 29

Отличная статья! Надеюсь в скором будущем растягивание элементов будет поддерживаться и в Firefox, а также и column-fill в Chrome.
Скажите, такие колонки предназначены только для текста? Или с их помощью можно и layout страницы верстать?
Учитывая, на какие извращения способна CSS-разметка сейчас, уверен, что эти свойства можно будет использовать и для текста, и для layout, и для еще кучи разных крутых штук.
Технически в сочетании с управлением разрывами можно, однако, основное предназначение — это все же многоколоночная верстка контента.
А планируется ли введение каких-то новых свойств, направленных именно на вёрстку страницы? Или считается, что существующие float, position, отступы и т.п. работают достаточно хорошо?
Grid Layout, FlexBox.
habrahabr.ru/post/125802/
ну, с чистой совестью юзать сейчас это можно разве что в метро-приложениях для win8 =(
Когда же наступят эти благодатные времена, когда всем, описанным в статье можно просто взять и пользоваться, а не пролистывать в качестве развлекательного чтива.
А вы возьмите и пользуйтесь. Чем дольше все ждут, тем медленнее прогресс.
Когда наступит судный день, и все старые браузеры умрут.
Это перевод что ли? Непонятно почему надписи на картинках английские, а Хокон Виум Ли остался как «Håkon Wium Lie».
НЛО прилетело и опубликовало эту надпись здесь
Самописная ;) Хокона перевел, над картинками подумаю — я их сразу готовил под английскую версию, которой пока нет :) То есть тут скорее обратный процесс: на русском появляется раньше.
НЛО прилетело и опубликовало эту надпись здесь
Есть ли js библиотека для поддержки мульти-колоночности для всех броузеров?
можно использовать плагин для jQuery Columnizer (http://welcome.totheinter.net/columnizer-jquery-plugin/).


Правда, она около года не обновлялась.
А еще она тормозная и глючная. Проще самому написать. Это не так сложно.
на сегодня поддерживают только Internet Explorer и Opera

Никто не ожидал, а этот день настал.
Не хватаем, имхо, автоматической разбивки по высоте. То есть чтобы величина контейнера была не выше, допустим, 2/3 экрана. Единицы измерения под это дело уже есть, а поддержки в колонках — нет.
Что-то мне кажется, что многоколоночность будет выглядеть весьма убого без выравнивания по ширине (text-align: justify), а оно, в свою очередь, выглядит весьма убого без авто-переносов в словах.

Многие ли браузеры умеют авто-расстановку переносов?
/* да, я знаю, что жаваскриптом можно расставить в тексте ­ */
Ага.
В css3 есть свойстваhyphenate-after
hyphenate-before
hyphenate-characters
hyphenate-lines
hyphenate-resource
hyphens


Не поддержиаются никем.
IE10 поддерживает ;)
ну да, по данным mdn:
chrome-13, safari-5.1: -webkit-hyphens
firefox-6: -moz-hyphens
ie-10: -ms-hyphens

Латынь, правда не все поддерживают, поэтому лорем ипсум не проходит :))
...column-gap. Чтобы изуально обозначить раздел...

Добавьте букву в перед изуально.
Спасибо, интересная статья, было приятно почитать.

Интересно, почему column-span может принимать только значения none или all, а не число. Например, если текст разбит на пять колонок, а какой-то фрагмент (цитату) хочется выделить и поместить на ширину двух колонок, то так сделать не получится?
В текущей версии так сделать нельзя. Тут есть важный момент: элемент со 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/)
Спасибо за пояснение!
Стал абсолютно понятен механизм разделения потока на части. В принципе это можно увидеть и в примере из статьи, но я сначала не обратил внимания.

CSS Exclusions — очень мощный инструмент. Правда, насколько я понимаю, браузерами он пока не поддерживается.
Предварительная версия под названием Positioned Floats есть в IE10. На работу можно посмотреть здесь: ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html

Можно также посмотреть на прогресс со стороны Adobe — html.adobe.com/webstandards/cssexclusions/ — они готовят реализацию для Webkit.
Интересно, есть ли возможность как-то реализовать Разрывы в браузерах, так как реализованы они только в WebKit(криво и используя column-break-inside) и Opera). Если такое возможно реализовать, то перестану использовать Masonry в проектах, так как он достаточно тяжелый, и на старых компьютерах чуть подлагивает, а если еще прикручивать другие плагины для jQuery, то может вообще зависнуть.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий