Керівництво по створенню зручних та чуйних CSS-колонок

17

Від автора: За допомогою CSS-колонок ви можете створити макет, додавши трохи розмітки, зразок сторінки друкованого видання, який зможе адаптуватися поза фіксованих розмірів робочої області. Браузер, що підтримує дану технологію, зробить необхідні обчислення, щоб розбити вміст на складові частини і акуратно розподілити його по колонках. Якщо ви вже працюєте над створенням гумового макета, тоді колонки будуть перебудовуватися автоматично. У процесі створення макета, при грамотному підборі властивостей, CSS-колонки можуть стати цікавим рішенням, яке буде зручним і чуйним, а також не буде порушувати принципу відмовостійкості (graceful degradation).

Де оголошувати колонки

Ви можете оголосити колонки на рівні будь-якого блокового елемента. Колонки можуть бути застосовані до одиночного елемента або кількох елементів, що знаходяться всередині батьківського елемента.

З лівого боку, на зображенні внизу, показано застосування правил щодо створення CSS-колонки для другого абзацу, щоб розбити вміст цього абзацу на колонки. А з правого боку показано застосування правил для цілого контейнера з кількома елементами, що дозволяє створити многоколоночный макет.

Керівництво по створенню зручних та чуйних CSS-колонок

Як оголошувати колонки

Існує три різних способи оголошення колонок:

Оголосити властивість column-count.

Оголосити властивість column-width.

Оголосити обидва властивості (рекомендується).

Давайте розглянемо ці способи оголошення колонок.

1. Оголошення властивості column-count

Використовуйте властивість column-count, щоб вказати кількість колонок.

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

Демо-приклад

Кількість колонок залишається незмінною, навіть коли ширина вікна браузера змінюється (див. нижче gif-зображення)

Керівництво по створенню зручних та чуйних CSS-колонок

2. Оголошення властивості column-width

Використовуйте властивість column-width, щоб вказати ширину колонок.

Зазначене вами значення не буде абсолютною величиною, а швидше буде означати мінімальну ширину. Якщо значення властивості column-width буде вказано, то браузер визначить, яку мінімальну кількість колонок із заданою шириною може поміститися в доступному просторі. Браузер, виробляючи обчислення, буде також враховувати межстолбцовый промежуток, тобто порожній простір між колонками (про це трохи пізніше). Потім браузер розтягне колонки таким чином, щоб вони рівномірно поміщалися в заданій ширині контейнера.

Наприклад, якщо ви уважно подивитеся на абзац з нижчеподаного демо-приклад, то виявите, що ширина колонки насправді більше 150px (а саме таке значення було зазначено властивості column-width).

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

Демо-приклад

Як тільки браузер не зможе вмістити хоча б дві колонки із вказаним значенням властивості column-width, ні одна колонка більше не буде відображатися, і макет знову стане одноколоночным.

На наступному gif-зображення показано, що відбувається з колонками, коли вікно браузера звужується. На відміну від властивості column-count це властивість вже за замовчуванням є чуйним.

Керівництво по створенню зручних та чуйних CSS-колонок

3. Оголошення двох властивостей (рекомендується)

Використовуйте разом властивості column-count та column-width, щоб краще керувати CSS-колонками. Ви можете оголошувати кожну властивість окремо або використовувати скорочену запис columns.

Коли оголошуються обидва властивості, column-count означає максимальне число колонок, а column-width – мінімальну ширину цих колонок.

article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
}
/* або */
article {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}

Демо-приклад

На наступному gif-зображення показано, який результат виходить при спільному використанні властивостей column-count та column-width, якщо вікно браузера звужується.

Керівництво по створенню зручних та чуйних CSS-колонок

Налаштування колонок

Є ще кілька властивостей для здійснення подальшої настройки CSS-колонок.

column-gap

Щоб відрегулювати межстолбцовый промежуток або відстань між колонками, оголосіть властивість column-gap. Для більшості браузерів, значенням за замовчуванням для властивості column-gap є 1em. Ви можете вказати будь-яке інше значення за умови, що воно більше або дорівнює 0.

article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
}

Демо-приклад

Браузер виконає необхідні обчислення, щоб рівномірно розташувати і відрегулювати колонки, незважаючи на більшу відстань між ними.

На наступному gif-зображенні показано, як браузер створює колонки і скидає відстань між ними, коли вікно браузера звужується.

Керівництво по створенню зручних та чуйних CSS-колонок

column-rule

Для того, щоб додати вертикальну лінію між кожною колонкою, потрібно оголосити властивість column-rule. Це властивість є скороченим записом властивостей column-rule-width, column-rule-style, column-rule-color. В даній скороченою записи використовується такий же порядок проходження властивостей, як і для скороченого запису border.

article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
-webkit-column-rule: 1px dotted #ddd;
-moz-column-rule: 1px dotted #ddd;
column-rule: 1px dotted #ddd;
}

Демо-приклад

Як і у випадку з властивістю column-gap, вертикальна лінія зникне, як тільки вікно браузера стане занадто вузьким (див. нижче gif-зображення).

Керівництво по створенню зручних та чуйних CSS-колонок

column-span

Для того щоб тимчасово перервати потік тексту, розбитого на колонки, потрібно застосувати до дочірнього елемента властивість column-span. В даний час, браузер Firefox не підтримує цю властивість (але ви можете проголосувати за його підтримку на сайті Bugzilla).

На рисунку показаний заголовок, який вказує на початок нової глави в оповіданні, але він розташований всередині потоку тексту, розбитого на колонки.

Керівництво по створенню зручних та чуйних CSS-колонок

Щоб вирвати заголовок з даного потоку, потрібно призначити йому властивість column-span: all. Дана запис дозволить тимчасово перервати потік тексту, який розбивається на колонки. Це дасть можливість створити відступ у заголовка і перенести його на новий рядок, після чого, починаючи з наступного елемента, текст продовжить розбиватися на колонки.

h3 {
-webkit-column-span: all;
column-span: all;
}

Демо-приклад

column-fill

Щоб змінити те, як колонки наповнюються контентом, потрібно оголосити властивість column-fill. В даний момент ця властивість підтримується тільки браузером Firefox.

Коли для елемента, який розбитий на колонки, вказується висота, браузер Firefox веде себе не так, як інші браузери. Firefox автоматично створювати однакові колонки, рівномірно розподіляючи в них контент, в той час як інші браузери будуть просто послідовно заповнювати колонки контентом.

На рисунку показано, як веде себе Firefox у порівнянні з іншими браузерами, коли для елемента, розбитого на колонки, вказана висота.

Керівництво по створенню зручних та чуйних CSS-колонок

Ви можете керувати поведінкою браузера Firefox, використовуючи запис column-fill: auto. У цьому випадку Firefox буде заповнювати колонки послідовно (див. демо-приклад).

article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-moz-column-fill: auto;
column-fill: auto;
height: 350px;
}

Демо-приклад

Оскільки необхідно вказувати висоту для використання властивості column-fill Firefox, «гумовість» макета буде порушена за фіксованої висоти. Контент буде змушений розтягуватися по горизонталі, т. к. можливості зробити це по вертикалі у нього просто немає (див. нижче gif-зображення). У цьому випадку, щоб вирішити питання з висотою, можна використовувати медіа-запит (про це трохи пізніше).

Керівництво по створенню зручних та чуйних CSS-колонок

Інші браузери не підтримують властивість column-fill і будуть послідовно заповнювати колонки контентом, коли для елемента, розбивається на колонки, буде задана висота. Варто зауважити, що коли для елемента, розбивається на колонки, задається висота, то незалежно від браузера або використання властивості column-fill, макет перестане бути гумовим з-за фіксованих обмежень по висоті.

Обмеження

Використання колонок може бути прекрасним способом подачі контенту до тих пір, поки вміст залишається читабельним. Многоколоночный макет може стати незручним для читання, якщо контент буде розтягуватися по горизонталі, викликаючи появу смуги прокрутки, або колонки будуть довше області вікна перегляду.

Контент виходить за межі області перегляду по горизонталі

Як видно з розділу, де йдеться про властивості column-fill, якщо для елемента, розбивається на колонки, задана висота, то сам елемент буде розтягуватися по горизонталі, щоб вмістити контент. Вихід контенту за межі області перегляду призведе до того, що вид макета буде зіпсований, і користувач буде переглядати вміст, рухаючись в іншому напрямку.

Можливе рішення: створити медіа-запит min-width, щоб в ньому прописати правило для параметра висоти.

В наступному демо-прикладі я зменшила вікно браузера, щоб визначити, в який момент колонки починають виходити за межі області перегляду, і записала дане значення. Далі я створила медіа-запит min-width, використовуючи записане мною значення, і вже в ньому прописала правило для параметра висоти.

article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-moz-column-fill: auto;
column-fill: auto;
}
@media (min-width: 500px) {
article {
height: 350px;
}
}

Демо-приклад

На наступному gif-зображення показано, що коли колонки з’являються, правило для параметра висоти не діє, і колонки розтягуються по вертикалі.

Керівництво по створенню зручних та чуйних CSS-колонок

Колонки стають довшими області вікна перегляду

Якщо висота вашої колонки виходить за межі області вікна перегляду, тоді користувачам потрібно використовувати скролл для перегляду вмісту колонки.

Можливе рішення: створити медіа-запит min-height, щоб активувати колонки.

У наступному прикладі колонки будуть з’являтися тільки тоді, коли буде виконуватись умова min-height: 400px;для елемента, розбивається на колонки. Я прийшла до цього значення шляхом зменшення ширини вікна браузера до того моменту, коли колонки будуть з’являтися. Далі я підстроїла висоту вікна браузера таким чином, щоб визначити, коли колонки будуть ховатися за межами області вікна перегляду. В результаті я отримала значення для медіа-запитів min-height.

@media (min-height: 400px) {
article {
-webkit-columns: 2 350px;
-moz-columns: 2 350px;
columns: 2 350px;
}
}

Демо-приклад

На наступному gif-зображення показано, що елемент, разбиваемый на колонки, повинен бути як мінімум 400px по висоті, щоб контент почав розбиватися на колонки.

Керівництво по створенню зручних та чуйних CSS-колонок

Підтримка

CSS-колонки мають досить непогану підтримку (IE10+) і як і раніше вимагають наявності вендорних префіксів для всіх властивостей. Більш детальну інформацію про властивості, які відповідають за многоколоночность, ви можете переглянути на сайті Can I Use….

Навіть якщо ваш улюблений браузер не підтримує многоколоночных макетів, пам’ятайте про те, що за принципом відмовостійкості вони зводяться до одноколоночному макету. CSS-колонки подібні ескалаторах, що приносять контент (як це виразно помітив американський комік Мітч Хедберг (Mitch Hedberg)):

Керівництво по створенню зручних та чуйних CSS-колонок

(прим. пер.: ескалатор не може зламатися, він може перетворитися на сходи)

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