kichik May 2 2012 at 11:11

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

8 min

66K

Microsoft corporate blogWebsite development*CSS*

Tutorial

+115

Comments 29

ash_kgd May 2 2012 at 12:11

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

Shedal May 2 2012 at 12:42

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

norlin May 2 2012 at 12:56

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

kichik May 2 2012 at 13:00

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

Shedal May 2 2012 at 13:02

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

kichik May 2 2012 at 13:04

Grid Layout, FlexBox.

XimikS May 2 2012 at 13:10

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

Metaller May 2 2012 at 12:54

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

+10

elky May 3 2012 at 11:28

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

JohnnyD May 3 2012 at 11:33

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

bolk May 2 2012 at 13:00

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

UFO just landed and posted this here

kichik May 2 2012 at 14:09

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

-1

UFO just landed and posted this here

BOLTIKUS May 2 2012 at 13:15

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

kichik May 2 2012 at 13:26

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

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

leMar May 2 2012 at 15:24

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

qrazydraqon May 2 2012 at 13:35

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

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

danSamara May 2 2012 at 13:52

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

qmax May 2 2012 at 19:02

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

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

qmax May 2 2012 at 19:10

Ага.
В css3 есть свойства

hyphenate-after 

hyphenate-before 

hyphenate-characters 

hyphenate-lines 

hyphenate-resource 

hyphens

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

kichik May 2 2012 at 19:42

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

qmax May 2 2012 at 19:49

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

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

xrays72 May 2 2012 at 19:19

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

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

LEON4ik May 3 2012 at 14:02

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

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

kichik May 3 2012 at 15:24

В текущей версии так сделать нельзя. Тут есть важный момент: элемент со 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 May 3 2012 at 16:06

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

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

kichik May 3 2012 at 16:38

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

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

Arilas May 5 2012 at 07:24

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