За допомогою колонок CSS ви можете створювати макети в стилі журнальної верстки з невеликим додаванням розмітки, яка буде адаптуватися до будь-якої, навіть до не фіксували ширині. Браузери, які підтримують CSS-columns, зроблять необхідні розрахунки, щоб вписати і розподілити вміст по акуратним колонок. Якщо ви вже працюєте з гумовим макетом, то колонки в цьому випадку будуть підлаштовуватися автоматично. З правильною комбінацією властивостей, колонки CSS є цікавим варіантом для створення макета, який може бути чуйним і підтримує витончену деградацію.
Де оголошувати стилі колонок
На зображенні нижче, на лівій стороні зображені правила CSS-columns, застосовані до другого абзацу, перетворюючи його вміст в колонки. На правій стороні зображені правила, додані до елементу-контейнера, такого як
або . щоб перетворити його в Багатоколоночних макет.
Оголосити колонки можна трьома різними способами:
- За допомогою властивості column-count.
- Через column-width.
- За допомогою обох властивостей (рекомендується).
живий приклад
Число колонок залишається незмінним навіть тоді, коли змінюється ширина браузера, як продемонстровано на гіф-зображенні нижче.
Використовуйте властивість column-width. щоб виставити ширину колонок.
Наприклад, якщо ви уважно подивитеся на абзац в живому прикладі нижче, ви виявите, що ширина кожної колонки насправді більше ніж 150пк, виставлених у властивості column-width.
живий приклад
Якщо браузер не зможе вмістити щонайменше дві колонки з такою ж шириною як в column-width. тоді браузер переформує колонки таким чином, щоб в результаті макет став один стовпчик.
Гіф-зображення нижче демонструє як поводяться колонки, коли звужується ширина браузера. До речі, на відміну від властивості column-count. column-width поводиться цілком чуйне.
Використовуйте column-count та column-width разом для кращого контролю над колонками CSS. Ви можете оголошувати кожне властивість окремо або використовувати скорочену властивість columns.
Коли обидва властивості оголошені, column-count визначає максимальне число колонок, а column-width - мінімальну ширину кожної з них.
На гіф-зображенні нижче демонструється, як використання column-count та column-width разом поводиться при звуженні ширини браузера.
Налаштування колонок
Для настройки CSS-колонок існує кілька наступних властивостей.
column-gap
Щоб регулювати інтервал між колонками використовуйте column-gap.
Для більшості браузерів дефолтний значення властивості column-gap одно 1em. Ви ж можете виставити своє значення за умови, що воно буде не менше нуля.
Браузер зробить необхідні обчислення і розподілить колонки рівномірно, незважаючи на великий проміжок.
На гіф-зображенні нижче демонструється, як браузер прибирає розбивку на колонки при зменшенні ширини, і проміжок при цьому зникає.
column-rule
Щоб додати вертикальні лінії між колонками, використовуйте властивість column-rule.
Ця властивість є скороченням для column-rule-width. column-rule-style і column-rule-color. Воно будується по тій же структурі, що і властивість border.
Як і в разі сcolumn-gap. вертикальні лінії зникнуть, якщо ширина браузера буде занадто вузька. Це можна побачити на зображенні нижче.
column-span
Щоб перервати поточний потік колонки, використовуйте, застосовуйте властивість column-span для дочірніх елементів. На час написання статті Firefox не підтримував це властивість (але ви можете піти і проголосувати за цей баг на Bugzilla).
Зображенні нижче містить заголовок, який вказує початок нового розділу в оповіданні, але він як і раніше знаходиться в потоці колонки.
column-fill
Щоб змінити механізм заповнення колонок вмістом, використовуйте column-fill. На даний момент це властивість підтримується тільки в Firefox.
Коли ми встановлюємо висоту елементу-контейнера колонок, поведінку Firefox відрізняється від поведінки інших браузерів. Firefox буде автоматично підтримувати баланс вмісту, в той час як інші браузери будуть заповнювати колонки послідовно.
На зображенні нижче порівнюється поведінка Firefox з іншими браузерами, коли ми встановлюємо висоту елементу-контейнера колонок.
У Firefox ви можете змінити цю поведінку, встановивши column-fill: auto. Завдяки цьому правилу вміст колонок в Firefox буде заповнюватися послідовно. Це можна побачити в живому прикладі нижче.
Оскільки для роботи column-fill в Firefox обов'язково повинна бути встановлена висота, то остання буде змушена зіпсувати гумовий дизайн. Вмісту доведеться збільшуватися по горизонталі, тому що воно не може "розтікатися" вертикально через обмеження висоти. Це поведінка продемонстровано на гіф-зображенні нижче. У цьому випадку на допомогу можуть прийти медіа-вирази, додані для управління висотою (про це трохи пізніше)
Браузери, які не підтримують властивість column-fill. при установці висоти для елемента-контейнера колонок, будуть заповнювати колонки вмістом послідовно. Але варто зазначити, що коли будь-якого елементу-контейнера колонок встановлена примусова висота, то незалежно від браузера або від використання column-fill. ця висота все одно зіпсує гумовий дизайн.
обмеження
Переповнення вмісту по горизонталі
Як показано в розділі column-fill. якщо ми додамо висоту до колоночному елементу, то останній буде розтягуватися по горизонталі, щоб вмістити свій вміст. Переповнення вмісту поламає макет і користувачам доведеться дивитися в іншу сторону.
Можливе рішення: створити медіа-запит з з функцією min-width і написати в ньому правило для висоти.
У демо-прикладі нижче, я звужувала вікно браузера, щоб зрозуміти, коли колонки починають переповнюватися і записала це число. Потім я написала медіа-запит з функцією min-width. прописавши їй значення, отримане в момент переповнення колонок, і змінила значення самої висоти всередині медіа-запиту.
Як показано на гіф-зображенні нижче, коли колонкам починає не вистачати місця, значення висоти стає більше висоти екрану, і колонки розміщуються вертикально.
Можливе рішення: створити медіа-запит з функцією min-height, щоб активізувати колонки.
У прикладі нижче, колонки будуть активізовані, тільки якщо стовпчик елемент перевищує висоту 400 пікселів. Я прийшла до цього числа звужуючи ширину браузера до моменту, коли колонки починають перебудовуватися. Потім я скоригувала висоту браузера, відштовхуючись від тієї точки, коли колонки почали провалюватися під вьюпорте. Я використовувала це число для значення функції min-height в медіа-запиті.
На гіф-зображенні нижче видно, що стовпчик елемент повинен бути щонайменше 400 пікселів у висоту, щоб його контент відображався в колонках.
підтримка браузерами
CSS-колонки мають пристойну підтримку браузерами (IE10 +), але все ще вимагають префікси для всіх властивостей. Дізнатися більше подробиць про відповідні властивості можна на Can I Use.
Навіть якщо ваш улюблений браузер не підтримує мульти-стовпчик макет, враховуйте, що він легко може перетворитися в одне-стовпчик макет за допомогою витонченої деградації. CSS-колонки схожі на ескалатор доставки контенту (як красномовно висловився Мітч Хедберг)
Багатоколоночних макет не може зламатися, він може тільки стати одне-стовпчик.
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...