Адаптивні рішення таблиць для порівняння особливостей

12

Від автора: адаптивний веб-дизайн і таблиці далеко не найкращі друзі. Багато хто стикався з різними ситуаціями, і внаслідок чого були вироблені певні підходи. Тим не менш, ми все ще далекі від ідеальних рішень, і пошуки тривають.

У той час як деякі проблеми досить складні, окремі конкретні ситуації можна розібрати, приділивши їм трохи більше уваги. Я кажу про таблиці порівняння особливостей. Ми стикаємося з ними скрізь – при виборі авто ми вирішуємо які додаткові функції включити в комплектацію; під час вибору тарифів веб-хостингу; на будь-якому порталі з особистим кабінетом, де ви вирішуєте, яку інформацію ви хочете отримувати. За все це ви платите гроші.

Так як такий вигляд таблиць має досить стабільну і послідовну архітектуру, то цілком можна добитися кращого поведінки даних таблиць на маленьких екранах.

Анатомія таблиць порівняння особливостей

У класичній таблиці порівняння представлено, як мінімум, три продукту (в колонках), а їх особливості розташовані в рядках нижче. В такій структурі зазвичай перша комірка кожного рядка носить назву об’єкта, а в клітинах під продуктами є галочки, показують, чи є дана функція у цього товару. Приклади класичної структури можна знайти тут і тут. Ґрунтуючись на цих прикладах, ми можемо узагальнити структуру таблиць порівняння, нижче представлений код:

  Продукт 1 Продукт 2 Продукт 3
Функція 1
Функція 2
Функція 3
Функція 4

Досить легко помітити згадані вище елементи: назва продукту, функції та позначка, що показує приналежність до товару. Зверніть увагу, що код ✔відображає символ галочки. А тепер повернемося до кореня проблеми. Повинні бути дотримані кілька умов, щоб таблиці вели себе адекватно на маленьких екранах:

Користувач повинен з легкістю розрізняти товари;

Функції повинні бути легко пізнавані;

І повинно бути зрозуміло, коли функція належить товару, а коли ні.

Краще рішення – змістити комірки з назвою функцій над іншими трьома осередками, що позначають наявність або відсутність функції.

Перший спосіб: Flexbox

І як же досягти цього? Одним з рішень стане flexbox. Якщо ж ви не знаєте, що це таке, чи забули, ви можете почитати недавню статтю від NickSalloum по даній темі. А всі інші можуть сміливо читати далі.

Насамперед, необхідно переконатися, що зміни вступають в силу тільки на маленьких екранах. Для цього застосуємо медіа запит, використовуючи класичне значення ширини екрану в 768px.

@media screenand (max-width: 768px) {
tr {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
td, th {
display: block;
width: 33%;
}
th:first-child,
td:first-child {
text-align: center;
background: #efefef;
width: 100%;
}
th:first-child {
display: none;
}
}

Щоб наша магія спрацювала, необхідно знати кілька важливих правил:

Ми міняємо значення властивості display для рядків таблиці на flex, тим самим наказуючи дочірнім елементів вишикуватися в ряд з однаковими інтервалами.

Далі ми присвоюємо клітинок таблиці значення display: block, щоб зробити їх звичайними контейнерами (якщо залишити значення за умовчанням, то будуть застосовані властивості таблиць, особливо це стосується розмірів).

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

І на завершення ми ховаємо перший th, щоб не відображалося порожніх блоків над назвами продуктів.

Демо можна подивитися за посиланням.

Природно, дане рішення справедливе, поки воно працює. За даними сайту caniuse.com flexbox під держивается у більш ніж 80% сучасних браузерів, і в 93%, якщо врахувати браузери, які підтримують вендорные префікси або використовують старі версії flexbox. IE підтримується з 10 версії (тільки синтаксис 2012 року), IE11 має повну підтримку. Так як нас цікавить підтримка тільки на маленьких екранах, то ми можемо нехтувати підтримкою IE. На мобільних пристроях підтримка починається з Android 4.4 і iOS 7.1. Для попередніх версій потрібні вендорные префікси, а також у них не підтримуються функції обгортки.

Також необхідно робити фоллбэки, як, наприклад, div для скролінгу Bootstrap.

Другий спосіб: Екстра розмітка + ARIA ролі

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

Функція 1

Функція 2

Функція 3

  Продукт 1 Продукт 2 Продукт 3
Функція 1
Функція 2
Функція 3
Функція 4

СЅЅкод також досить простий:

.visible-xs {
display: none;
}
@media screenand (max-width: 768px) {
.visible-xs {
display: table-row;
}
td:first-child,
th:first-child {
display: none;
}
}

Заради доступності можна піти на такий додатковий крок і приховати екстра розмітку за допомогою aria-hidden=»true». Таким чином, браузери, поважають специфікацію aria-hidden, не будуть зчитувати дублюючий контент двічі.

Демо другого методу

Висновок

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