Практичне використання CSS медіа-запитів aspect-ratio

13

Від автора: сьогодні ми поговоримо про медіа запити CSS. Ще в 2016 році, під час моєї першої прес-конференції (хоча це було більше схоже на свого роду експересс-інтерв’ю) на CSSConf.Asia 2016, я сказав, що «мені просто подобається CSS. Я не брехав, CSS — це дійсно моє захоплення. І протягом більшої частини 2017 року я «збирав» цікаві макети, з якими стикався, і намагався реалізувати їх для Веб.

Я розробив підхід (методологію? систему? концепцію? англійська такий складний мову …) для створення макетів під Веб. На відміну від багатьох інших веб-розробників, на той момент, коли я щільно зайнявся веб-розробкою, адаптивний веб-дизайн вже став нормою. Насправді, за всю свою кар’єру мені тільки одного разу довелося створювати макет з фіксованою шириною. І з-за цього я не мислю статично.

Коли я бачу цікавий макет (зазвичай друкований), мій розум відразу починає уявляти, як він зміниться, якщо змінити розмір полотна. Це досить забавне вправу, і після цього я сідаю і намагаюся відтворити цей макет. Це цікаво, проте вже з пов’язане з моментами болю і розчарування (як це часто буває в нашій роботі).

Веб-дизайн ПОВИНЕН перетворюватися

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

Під час попередніх переговорів перед моїм CSS-турне по Південно-Східній Азії я створив кілька демонстраційних макетів. Один з моїх улюблених заснований на наступному дизайні Кійоші Стелцнера з The Yellow Issue.

Практичне використання CSS медіа-запитів aspect-ratio

Цей макет прекрасно працює в альбомній орієнтації, але по мірі того, як область перегляду звужується, він ламається. Однак для цього і потрібні медіа-запити, чи не так? Але замість стандартних медіа-запитів на основі ширини вікна я спробував медіа-запити aspect-ratio. Оскільки я задавав розміри для сітки в гнучких одиницях, відносні пропорції були важливі.

Цей конкретний макет, що включає перекриття, вертикальне біле простір і перетворення, що працює тільки в альбомній орієнтації, тому я довільно встановлюю співвідношення сторін 1/1, і вийшло досить добре. Зверніть увагу, що ви повинні використовувати пропорційні значення (число / число), інакше це не буде працювати.

Це демо-версія більш цікаво виглядає в окремому вікні, тому за цим посиланням ви знайдете автономну версію.

Одиниці області перегляду можуть бути складні для використання, тому що все співвідноситься з областю перегляду, а не з конкретним контейнером в макеті. З-за цього можуть виникати складнощі при масштабуванні. Це гнучкі одиниці, і вони добре працюють з медіа-запитами aspect-ratio в ситуаціях, коли нам потрібно зберегти пропорції.

Deutsche Gitter

Швидше за все, це просто збіг, але макети, які привертають мою увагу, найчастіше я знаходжу в німецьких виданнях. А адже сітковий дизайн Swiss Style зародився в Німеччині, Нідерландах і Росії в 1920-х роках. У всякому разі, Йозеф Мюллер-Брокманн і Карл Герстнер видавалися в основному на німецькій мові (мені так здається).

Так і Дітер Рамс є споконвічним німцем, а його робота для Braun досить знакова, ІМХО. Тому, коли я побачив два рекламних постера Braun HiFi, створені Вольфгангом Шмиттелем, я зрозумів, що просто зобов’язаний переробити їх під Веб.

Практичне використання CSS медіа-запитів aspect-ratio

Практичне використання CSS медіа-запитів aspect-ratio

Я настійно рекомендую переглянути їх на окремій сторінці на CodePen. Загальновизнано, що існує декілька визначальних перехідних точок, для яких потрібно розробляти окремі структури, але я виходжу з того, що коли дизайн проглядається у вікні з конкретним співвідношенням сторін, сітка перебудовується через зміну властивості grid-template-areas.

Для елементів сітки призначається відповідна їй область сітки, яка може застосовуватися незалежно від використовуваного макета. Я вважаю, що цей підхід дійсно зручний і реалізується набагато меншою кількістю коду, ніж, якщо б ми вручну розміщували елементи за допомогою властивостей grid-row і grid-column для медіа-запитів.

OMG, object-fit

Я хочу трохи розповісти про те, наскільки добре це «додаткове» властивість CSS працює з сітковими макетами CSS? Це фонові зображення, але для контенту, який представляє собою зображення. Підтримка його цілком задовільна. І так, ми всі вже давно зрозуміли, що в Internet Explorer ніколи не будуть введені ніякі нові функції. Тому просто відкиньте все сімейство IE з макета — це компроміс, який я вважаю прийнятним. Але, як бачите, схоже, навіть Opera Mini підтримує object-fit!

З допомогою object-fit я можу змусити зображення заповнити весь простір сітки, на який вони були визначені, щоб макет вибудовувався в лінію незалежно від того, як я змінюю область перегляду. Не буде неприємних білих областей, які зображення не заповнює належним чином.

CSS — це командний спорт

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

Практичне використання CSS медіа-запитів aspect-ratio

Звичайно, побудови макета Веб звичайно починається з використання властивості display. Але ми виразно використовуємо цілий набір властивостей, яких навіть більше, ніж гравців у баскетбольній команді. Я називаю показану на малюнку вище структуру, Командний макет, і це ще не повний список властивостей, пов’язаних з побудовою макета.

Висновок

Таким чином, я розповів вам трохи про CSS і відволікся від повсякденних справ. Чи стане це серією статей? Наприклад, щось на кшталт «Давайте переробимо це під Веб»? Хто знає…