Использование медиавыражений для учета пропорций окна браузера

Перевод статьи Practical uses for the aspect-ratio media query с сайта chenhuijing.com для CSS-live.ru, автор — Чэнь Хуэй Цзин

Применение медиавыражений для пропорций окна браузера

В 2016 году, во время моего первого выступления (очень короткого!) на CSSConf.Asia 2016, я упомянула, что «мне просто нравится работать с CSS». Я не кривила душой. CSS действительно — моё хобби. В течение 2017 года, встречая интересную раскладку, я добавляла её себе в «коллекцию» и пыталась воссоздать как веб-страницу.

За годы работы у меня сформировался подход (методология? система? концепция? Английский язык такой сложный…) к построению раскладок в вебе. Отзывчивый дизайн уже стал нормой к тому моменту, когда я всерьез погрузилась в мир веб-разработки. Этим я отличаюсь от большинства моих кумиров — на самом деле, за всю карьеру я лишь однажды сверстала раскладку фиксированной. В результате, я вообще не вижу её статичной.

Когда я вижу интересную раскладку (обычно в печатном виде), я сразу начинаю воображать, как она трансформируется при изменении размера «холста». Я сажусь и пытаюсь её построить. Весьма занятное упражнение! Правда, кроме удовольствия оно иногда приносит боль и разочарования. Но в нашей работе это вполне нормально.

Веб-страницы ДОЛЖНЫ трансформироваться

При создании веб-страницы необходимо учитывать все возможные варианты: её раскладка может и, считаю, должна трансформироваться вместе с изменением размеров окна браузера. Наша работа — сделать так, чтобы она максимально эффективно использовала доступное пространство.

Для выступлений в рамках моего CSS-тура по Юго-Восточной Азии я подготовила несколько примеров раскладки. Одна из моих любимых основана на дизайне из книги «Желтый вопрос» автора Киёши Штельзнер:

Книга Желтый вопрос

В вебе она выглядит здорово при альбомной (landscape) ориентации, но при сужении окна браузера разваливается. Но для борьбы с этим и нужны медиавыражения, не так ли? Однако, в этот раз я отказалась от привычных медиавыражений для ширины окна браузера. Вместо этого я выбрала медиавыражения с aspect-ratio, основанные на пропорциях окна. Поскольку я задала размеры сетки в гибких единицах измерения, вопрос с относительными пропорциями был крайне важен.

Эта конкретная раскладка с перекрытием элементами друг друга, пустым пространством по вертикали и трансформациями сработала бы только при альбомной ориентации. Поэтому я просто выбрала в качестве отправной точки значение aspect-ratio равное 1/1, и получилось довольно хорошо. Обратите внимание, что нужно использовать значение именно соотношения (число/число), иначе медиавыражение не сработает.

See the Pen Grid layout with overlaps by Chen Hui Jing (@huijing) on CodePen.

Этот пример выглядит гораздо лучше в виде простой отдельной страницы, нежели в песочнице. Поэтому вот ссылка на нее.

Единицы измерения вьюпорта (имеются ввиду vh, vw, vmin, vmax — прим. переводчика) сложны в использовании, поскольку всё рассчитывается относительно размеров вьюпорта, а не контейнеров раскладки. Так что могут быть трудности с правильной работой раскладки при масштабировании. Поскольку это гибкие единицы измерения, они отлично будут работать в связке с медиавыражениями для пропорций окон там, где нужно сохранить соотношения.

Немецкая сетка

Может, это просто совпадение, что классные раскладки мне встречаются именно в немецких изданиях. Но Швейцарский стиль, основанный на сетках, действительно образовался в Германии, Нидерландах и России в 1920-ых. И, насколько мне известно, Йозеф Мюллер-Брокманн и Карл Герстнер публиковались в Германии.

Но Дитер Рамс — уж точно самый настоящий немец! Его работа в Braun уже стала классикой, на мой взгляд. А когда я встретила два постера Braun HiFi, созданные Вольфгангом Шмиттелем, я просто не могла не воспроизвести их в вебе.

Постер «Braun HiFi studio Anlagen regie 501»

Постер Braun HiFi studio Anlagen regie 501

See the Pen Braun HiFi studio Anlagen by Chen Hui Jing (@huijing) on CodePen.

Постер «Braun HiFi Steuergerät audio 300»

Постер Braun HiFi Steuergerät audio 300

See the Pen Braun HiFi Steuergerät audio 300 by Chen Hui Jing (@huijing) on CodePen.

Я горячо рекомендую посмотреть их полноразмерные (Full Page) версии на CodePen. Признаюсь, в моем коде есть недоработки, которые хорошо бы исправить. Но основной посыл этих примеров заключается вот в чём. Когда окно браузера достигает определенных пропорций, сетка сама себя перестраивает при помощи изменения значений свойства grid-template-areas.

Элементам сетки заданы соответствующие значения grid-area, которые применяются вне зависимости от текущей раскладки. Я считаю такой подход очень удобным и требующим гораздо меньше кода, чем если бы мы вручную размещали элементы сетки через их свойства grid-row и grid-column для каждого медиавыражения.

Ух ты, object-fit!

Мне не терпится скорей рассказать о том, как классно это «вспомогательное» CSS-свойство работает с раскладками на CSS-гридах. Оно дает все возможности фоновых картинок, но для картинок в контенте. Как мы уже поняли, у Internet Explorer никогда не появится поддержка новых возможностей, поэтому для браузеров IE мы просто используем фолбэк для всей раскладки (перевод статьи Чэнь о фолбэках — прим. переводчика). На такой компромисс, я думаю, мы можем пойти.

Но посмотрите-ка, Opera Mini поддерживает object-fit!

Поддержка object-fit

С object-fit мы можем заставить изображения заполнять все соответствующие им грид-области. Так что раскладка не рассыплется и будет хорошо выровнена, вне зависимости от того, как будет меняться окно браузера. Не будет странных белых дыр, где изображения не смогли заполнить пространство.

CSS — командный спорт

Это моя новейшая цитата о CSS. Я пришла к выводу, что, в конце концов, CSS — это комплексная технология, где, хотя вы и можете использовать свойства точечно, изолированно друг от друга, но ее полная мощь проявляется через грамотное использование их комбинаций.

Свойства для раскладки

Разумеется, создание раскладок веб-страниц обычно начинается с использования CSS-свойства display. Но вообще мы используем целый набор свойств. Их даже больше, чем игроков в баскетбольной команде! То, что я перечислила на иллюстрации, я называю «Командой Раскладки». Но это даже не исчерпывающий список свойств, относящихся к ней.

В завершение

В общем, это было небольшое CSS-развлечение, которым я себя заняла, чтобы временно забыть о всяких нудных обязательствах и вообще о жизни. Может, сделать это сериалом? Типа, представляем «А давайте перенесем это в веб!» Почему бы и нет… Поделитесь со мной своими мыслями. Или, может, не стоит. Как вам будет угодно, дорогие читатели :)

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.