03.12.2021

Единицы измерения контейнерных запросов CSS

Единицы измерения контейнерных запросов CSS

От создателя: несколько дней назад я увидел твит Мириам Сюзанн о поддержке единиц измерения запросов CSS. Сначало это было предложено Уной Кравец на Github. Я не мог не поэкспериментировать с ними и поглядеть, как мы можем получить еще больше преимуществ от контейнерных запросов CSS.

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

Напоминание: контейнерные запросы CSS поддерживаются только в Chrome Canary. Чтоб поэкспериментировать с ним, перейдите в поисковой строке по адресу chrome://flags и включите функцию «Включить контейнерные запросы CSS».

Вступление

В CSS у нас есть много единиц измерения, которые можно использовать для различных целей. Наиболее используемые из них px, rem и em. Если есть что-то близкое к тому, как работают единицы контейнерных запросов CSS, я бы именовал единицы на основе области просмотра.

Единицы на базе области просмотра CSS работают таким образом, чтоб соответствовать размеру области просмотра браузера (ширине и / либо высоте). Это здорово, но мы не всегда желаем использовать единицы измерения, связанные с размером области просмотра. Что, если мы желаем запросить ширину контейнера? Вот для чего необходимы единицы запросов.

Чтобы было понятнее, я желаю выделить разницу между единицами области просмотра и единицами запроса. Разглядим следующий рисунок:

Единицы измерения контейнерных запросов CSS

Слева, значение font-size меняется rem и vw и будет относиться к ширине области просмотра. В неких случаях это может сработать, но может вызвать неожиданные проблемы, поскольку оно зависит от размера области просмотра.

Единицы запросов имеют возможность сэкономить наши усилия и время , когда мы имеем дело с такими вещами, как font-size, padding и margin в компоненте. Заместо того, чтобы вручную увеличивать размер шрифта, мы можем использовать единицы запроса. Разглядим следующий пример.

Единицы измерения контейнерных запросов CSS

У нас есть карточный компонент, который вначале имеет сложенный стиль, но когда контейнер большой – приобретает hero-стиль. Для такового компонента нам может потребоваться изменить последующие вещи:

Размер эскиза

Размер шрифта

Расстояние меж элементами

Без единиц запроса CSS нам необходимо вручную изменить вышеуказанное.

CSS

Обратите внимание, как размер шрифта .card__title меняется с различными контейнерными запросами. Мы можем сделать лучше это и избежать дублирования font-size, используя единицы запроса вкупе с функцией CSS clamp().

CSS

При этом нам необходимо определить font-size только один раз. Если мы желаем сравнить это визуально, вот как это смотрится:

Единицы измерения контейнерных запросов CSS

Если вы знакомы с единицами просмотра CSS, это не будет для вас новостью. Похоже на запрос к контейнеру, а не к области просмотра браузера. Демо.

Единицы Запроса

Сейчас, когда у нас есть представление о задачках, которые должны решать единицы запросов, давайте разглядим их. Согласно спецификации CSS:

Запрос ширины (qw): 1% ширины контейнера. К примеру, 5qw равно 5% ширины контейнера.

Запрос высоты (qh): 1% от высоты контейнера. К примеру, 5qh равно 5% высоты контейнера.

Запрос минимума (qmin): наименьшее значение запроса ширины qw или запроса высоты qh.

Запрос максимума (qmax): большее значение qw либо qh.

У нас также есть две друге единицы: qi и qb, они означают, соответственно, интегрированный запрос и блок запроса.

Варианты использования и примеры

Компонент Карты

В дополнение к ранее объясненному примеру о карточках мы можем использовать единицы запроса для сложенной карточки, где мы желаем, чтобы размер шрифта был немного больше в зависимости от ширины контейнера.

Единицы измерения контейнерных запросов CSS

Обратите внимание, что размер шрифта становится меньше, в зависимости от размера контейнера. Это может быть полезно для сотворения составного компонента карты, который работает независимо от того, где он расположен. Демо.

Изменение font-size в зависимости от значимости

Когда один элемент больше другого, это, быстрее, показатель его важности. Хороший пример этого — aside и main. Размер заголовка в разделе <aside> должен быть меньше, чем размер заголовка в разделе <main>.

Единицы измерения контейнерных запросов CSS

Обратите внимание на то, что заголовок в теге aside меньше, чем заголовок в main. Мы просто можем сделать это благодаря единицам запросов. Во-1-х, нам нужно определить aside и main как внутренние контейнеры.

CSS

Потом мы будем использовать единицы запроса для заголовка раздела. Мы также можем использовать еденицы запроса для нижнего поля.

CSS

Демо

Компонент bio

Единицы измерения контейнерных запросов CSS

Компонент bio может находиться в наименьшем контейнере (например, на боковой панели), отображаться в мобильном окне просмотра либо в большом контейнере, таком как заголовок странички.

Мы можем создать компонент, который может приспособиться к ширине своего контейнера. В этом примере размер аватара и шрифта юзера изменяется в зависимости от ширины контейнера.

CSS

Демо

Заглавия cо cчетчиками

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

Единицы измерения контейнерных запросов CSS

CSS

Демо

Динамические зазоры

Мы можем использовать единицы просмотра для сотворения динамических зазоров с помощью сетки CSS. Что-то вроде:

CSS

Это круто, но как насчет компонент в определенных оболочках? Использование единиц просмотра не сработает. Вот почему внедрение единиц запросов — хорошее решение в таком случае.

Единицы измерения контейнерных запросов CSS

CSS

Зазор будет мало больше, когда компонент переключится на горизонтальный стиль. Что произойдет, если мы будем использовать блоки запроса без определения контейнера?

Согласно спецификации: Если подходящий контейнер запроса недоступен, используйте незначительный размер области просмотра для этой оси.

Браузер будет обрабатывать единицы запроса, как если бы они были единицами просмотра. Разглядим следующий пример:

CSS

Если для элемента не определен контейнер h2, браузер будет считать, что 3qw — это 3% ширины области просмотра. Это означает, что использование единиц запроса без определения контейнера может привести к внезапным результатам. Надеюсь, вам понравилась статья. Спасибо за чтение!

По материалам webformyself.com

Добавить комментарий

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