Елементні запити: майбутнє адаптивного веб-дизайну

22

Від автора: медіа запити – невід’ємна частина веб-дизайну, проте вони далеко не завжди добре працюють. У цій статті ми розглянемо ідею «елементних запитів», навколо якого ходить багато суперечок. Багато хто вважає, що елементні запити – це майбутнє адаптивного веб-дизайну.

З самого початку

Стаття Ітона «адаптивний веб-дизайн» назавжди змінила наш підхід до сайтостроению. Його стаття була швидко прийнята спільнотою веб-дизайнерів Ñ– розробників, які надихнулися його ідеєю. З’явилися такі методи, як «Mobile First», «Desktop First» Ñ– «Device Agnostic». Були розроблені шаблони дизайну Ñ– нові стандарти. Наприклад, з’явився тег picture. Зараз у нашому розпорядженні незліченну кількість фреймворків, що полегшують розробку Ñ– створення адаптивних сайтів.

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

Медіа запити

Медіа запити дозволяють нам формувати стилі під певні пристрої. Один з найпоширеніших прикладів використання медіа запитів – це зміна стилю для якогось діапазону ширини екрана. Наприклад, код нижче ховає сайдбар при перегляді сайту на екранах до 720px в ширину.

.site-sidebar { display: flex; flex: 1 1 320px; } @media ( max-width: 720px ) { .site-sidebar { display: none; } }

Медіа запити Ñ– пристрої стали краще. З’явилися такі функції як orientation та resolution. Приклад нижче показує, як можна використовувати одну з цих функцій для вставки зображення більшого розміру на екранах з високою роздільною здатністю.

.site-logo a { display: inline-block; background: url( images/logo.png ) no-repeat; } @media screen and ( min-resolution: 2dppx ) { background: url( images/[email protected] ); }

Медіа запити стали основним компонентом при проектуванні адаптивного дизайну.

Але все ж

Медіа запити – не панацея для вирішення всіх проблем в адаптивному веб-дизайні. Насправді, вони і не повинні вирішувати всіх задач.

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

Елементні запити: майбутнє адаптивного веб-дизайну

А якщо ще додати рекламу, таблиці і старий контент, все може стати ще гірше. Дуже скоро ви зіткнетеся з не найкращими сторонами медіа запитів.

Медіа запити: все не так добре

Розглянемо наступний приклад. У нас є компонент інтерфейсу, за допомогою якого ми хочемо показати профілі команди сайту. Даний компонент ми будемо використовувати в декількох місцях сайту. Приклад нижче показує, як наш UI компонент виглядатиме на екранах шириною 780px.

Елементні запити: майбутнє адаптивного веб-дизайну

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

Елементні запити: майбутнє адаптивного веб-дизайну

Дану проблему можна пофіксити з допомогою медіа запитів. Можна, наприклад, написати наступний код CSS:

/** * Профіль */ .team-profile { text-align: center; } .team-profile .bio { margin-top: 20px; font-size: 14px; } @media ( min-width: 480px ) { .team-profile { text-align: left; display: flex; } .team-profile .avatar { flex: 0 0 120px; } .team-profile .bio { font-size: 16px; flex: 0 1 580x; } } /** * Картка профілю. */ .team-profile-card { text-align: center; } .team-profile-card .bio { margin-top: 20px; font-size: 14px; } /** * Якісь стилі для перезапису значень */ .page .team-profile-card { … }

Поки ми використовуємо пару додаткових класів .user-profile .user-profile-card, ми можемо це пофіксити. Однак такий підхід йде врозріз з ідеєю про повторному використанні нашого UI компонента. UI елемент, який можна помістити у будь-якому місці сайту, і він адаптується до оточення.

У прикладі необхідно, щоб макет нашого компонента адаптувався, коли він знаходиться всередині маленького контейнера, а не коли стискається вікно браузера. Щоб не покладатися на розмір вікна браузера при зміні макета, чому б не зробити це на елементному рівні?

Елементні запити

Ідея елементних запитів з’явилася на початку 2012 року. Парою років пізніше адаптивний веб-дизайн став найпопулярнішою методологією. На жаль, на той момент розробники не бачили якихось істотних причин, щоб записати методологію у вигляді веб-стандарту. Світ тоді ще користувався старими методами.

Веб-спільноти розвивали ідею лише на власному ентузіазмі. RICG (Група спільнот за рішенням проблем адаптивного дизайну) – група, яка придумала тег picture, додала елементні запити в свій список проблем, поки інші розробники створювали JS бібліотеки типу EQCSS для емуляції даного функціоналу.

Елементні запити працюють точно так само, як медіа запити. Відмінність у тому, що вони слідкують за розміром елемента, а не розміром вікна браузера. Це дозволяє створювати по-справжньому модульні системи інтерфейсів з більш чистим кодом. Стилі нашого UI компонента можна переписати з допомогу EQCSS:

.team-profile { text-align: center; } .team-profile .bio { margin-top: 20px; font-size: 14px; } @element «.team-profile» and ( min-width: 480px ) { .team-profile { display: flex; } .team-profile .avatar { flex: 1 1 120px; } .team-profile .bio { text-align: left; font-size: 16px; flex: 1 1 580x; } }

Нас не цікавить ширина вікна браузера. За кодом вище видно, що поки UI елемент розтягнутий до 480px і ширше .avatar і .bio відображаються поруч. Коли ширина елемента нижче 480px, ми дозволяємо .avatar і .bio розташуватися стовпчиком, а вміст вирівнюється по центру.

Висновок

Просто уточнимо, я не кажу, що використовувати медіа запити – це погано. Медіа запити – чудовий інструмент, який ми зустрічаємо на безлічі сайтів. Медіа запити і елементні запити можуть співіснувати. Однак існує безліч сценаріїв в дизайні, коли набагато краще підійдуть елементні запити.

На жаль, елементним запитам належить ще пройти довгий шлях, перш ніж вони стануть веб-стандартом. Покладаємо наші надії на добрих людей з RICG.

А поки ми чекаємо, можна вивчати потенціал елементних запитів за допомогою JS бібліотеки EQCSS. Цим ми і займемося в наступному уроці. Слідкуйте за оновленнями!