Від автора: медіа запити – невід’ємна чаÑтина веб-дизайну, проте вони далеко не завжди добре працюють. У цій Ñтатті ми розглÑнемо ідею «елементних запитів», навколо Ñкого ходить багато Ñуперечок. Багато хто вважає, що елементні запити – це майбутнє адаптивного веб-дизайну.
З Ñамого початку
Ð¡Ñ‚Ð°Ñ‚Ñ‚Ñ Ð†Ñ‚Ð¾Ð½Ð° «адаптивний веб-дизайн» назавжди змінила наш підхід до ÑайтоÑтроению. Його ÑÑ‚Ð°Ñ‚Ñ‚Ñ Ð±ÑƒÐ»Ð° швидко прийнÑта Ñпільнотою веб-дизайнерів Ñ– розробників, Ñкі надихнулиÑÑ Ð¹Ð¾Ð³Ð¾ ідеєю. З’ÑвилиÑÑ Ñ‚Ð°ÐºÑ– методи, Ñк «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. Цим ми Ñ– займемоÑÑ Ð² наÑтупному уроці. Слідкуйте за оновленнÑми!
