Секретна зброя №1 в розмітці — CSS властивість table

16

Від автора: зараз модуль Flexbox є, можливо, САМИМ новим і модним інструментом для побудови розмітки макетів. Майже неймовірні можливості Flexbox адаптуватися під доступне простір викликали у багатьох з нас сильне здивування. Однак є й інші рішення. У багатьох випадках я знаходив більш прості рішення, використовуючи часто ігноровані CSS властивості для відображення таблиць.

Модуль Flexbox не може вирішити всіх проблем з розміткою макетів і, більш того, при його використанні виникають проблеми сумісності зі старими браузерами. На даний момент просто немає стовідсоткового «полифилла» (фолбэка (запасного варіанту) для старих браузерів) для Flexbox — я знаю тільки про існування одного полифилла для IE (версії 2009 року): Flexie.

У багатьох випадках я знаходив більш прості рішення, використовуючи часто ігноровані CSS властивості для відображення таблиць. Дані CSS властивості мають хорошу підтримку у всіх значущих браузерах (за винятком IE6 і 7) і можуть елегантно позбавити вас від головного болю при вирішенні кількох великих, а також деяких невеликих проблем при створенні розмітки макетів.

У випадку якщо ви знайомі з цією технікою не на всі 100%, скажу, що, змінюючи значення властивості display у блоків DIV, можна змусити їх вести себе, як таблиці або елементів таблиці.

Хвилинку… Що?! Таблиці для створення розмітки? Хіба це добре?

Мабуть, що на початку 2000х років найбільш «гарячою» темою для обговорення у світі веб-дизайну було використання HTML таблиць для створення розмітки макетів. Це був хак, який досі є поганою практикою.

Замість цього ми використовуємо абсолютно осмислений HTML (тобто теги DIV, SECTION, HEADER і т. д.) і просто запозичуємо в CSS деякі корисні можливості відображення таблиць. Це як раз те, навіщо були придумані CSS-стилі, так що не треба думати, що це якийсь хак або «милиця». Це не так.

Использвание ‘display:table cell’

У наведеному нижче прикладі ви можете змінити значення властивості display (з block на table cell) у трьох кольорових блоків DIV, клікнувши по кнопці вгорі:

Бачите, як можна легко вибудувати блоки DIV по горизонталі, не застосовуючи властивість float, а також вам стануть доступні деякі (звичайні для таблиць) правила поведінки (наприклад, властивість vertical-align для вертикального вирівнювання).

Якщо вам буде потрібно трохи простору між блоками, то пам’ятайте, що звичайне CSS властивість margin ніяк не вплине на комірки таблиці: натомість використовуйте властивість border-spacing (його потрібно застосувати до елемента table). У демо-прикладі є кілька закомментированных рядків, якщо ви хочете трохи пограти з даними правилами.

Дана техніка може бути дуже корисною для вирішення багатьох проблем, які важко вирішити іншими способами.

Я вибрав три простих випадку, коли табличні властивості відображення можуть бути справді цінними. Давайте подивимося на них:

Секретна зброя №1 в розмітці — CSS властивість table

По-справжньому докладне керівництво по таблиць CSS ви можете знайти на сайті CSS Tricks.

Випадок 1. Колонки однакової висоти

Я думаю, що це один з найбільш частих випадків, з якими мені доводилося стикатися: є кілька «плаваючих» блоків з невідомим за обсягом контентом, а вам потрібно, щоб всі блоки були однакової висоти. Знаю, що флексбокс може легко вирішити цю проблему, але і табличні правила на це здатні.

Просто призначте властивість display: table (або table-row) для контейнера і властивість display: table cell для внутрішніх блоків. Подбайте про те, щоб прибрати властивість float (інакше значення table cell не спрацює).

HTML

CSS

#wrapper {
display: table;
}
#wrapper div {
display:table cell;
}

Випадок 2. Простий «старомодний» варіант розмітки

Є застарілий приклад розмітки, але я думаю, що, можливо, вам доведеться зіткнутися з ним, як це нещодавно сталося зі мною.

Кілька місяців тому я отримав графічний макет, який дуже був схожий на представлену в прикладі розмітку. При цьому була потрібна сумісність з IE8, тому я вирішив, що найкраще використовувати CSS правила для відображення таблиць:

Випадок 3. Чуйна розмітка макета і управління контентом

Попередній приклад наводить нас на нову тему: чи можливо створити чуйний макет, використовуючи CSS правила для відображення таблиць?

Не тільки можливо, але ви також можете виконувати деякі завдання з управління контентом. Ми вже бачили, як зміна значення властивості display (з block на table cell) у двох блоків div, здатне змінити їх розташування (з вертикального на горизонтальне).

Сюди можна додати і той момент, що елемент, для якого встановлено властивість display зі значенням table-header-group, переміщається на самий верх таблиці. За таким же принципом, завдяки значенню table-footer-group, всі елементи переміщуються в самий низ таблиці і т. д. Це може бути несподівано корисним, коли потрібно реорганізувати елементи в чуйну макеті.

У нижчеподаному демо-прикладі елемент header міняється місцями з елементом nav при зміні розмірів вікна, шляхом простої зміни значення властивості display (table-header-group).

HTML

CSS

#wrapper, header {
display: block; /* насправді нам не дуже потрібно дане правило, т. к. це значення за замовчуванням */
}
@media (min-width: 48em) {
#wrapper {
display: table;
}
header {
display: table-header-group;
}
}

Схожим чином ведуть себе елементи footer і #banner2. Ось схематичний план розмітки: зліва – відображення за замовчуванням, мобільна версія, праворуч – версія для десктопів:

Секретна зброя №1 в розмітці — CSS властивість table

А ось і «живий» демо-приклад:

Висновок

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