Від автора: медіа запити – невід’ємна частина веб-дизайну, проте вони далеко не завжди добре працюють. У цій статті ми розглянемо ідею «елементних запитів», навколо якого ходить багато суперечок. Багато хто вважає, що елементні запити – це майбутнє адаптивного веб-дизайну.
З самого початку
Стаття Ітона «адаптивний веб-дизайн» назавжди змінила наш підхід до сайтостроению. Його стаття була швидко прийнята спільнотою веб-дизайнерів і розробників, які надихнулися його ідеєю. З’явилися такі методи, як “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. Цим ми і займемося в наступному уроці. Слідкуйте за оновленнями!
