Единицы измерения контейнерных запросов CSS
Я постараюсь объяснить, как работает каждая из единиц, и где мы можем их использовать, чтобы улучшить реакцию компонента на ширину его родительского элемента.
Напоминание: контейнерные запросы CSS поддерживаются только в Chrome Canary. Чтобы поэкспериментировать с ним, перейдите в поисковой строке по адресу chrome://flags и включите функцию «Включить контейнерные запросы CSS».
Вступление
Содержание статьи:
В CSS у нас есть много единиц измерения, которые можно использовать для разных целей. Наиболее используемые из них px, rem и em. Если есть что-то близкое к тому, как работают единицы контейнерных запросов CSS, я бы назвал единицы на основе области просмотра.
Единицы на основе области просмотра CSS работают таким образом, чтобы соответствовать размеру области просмотра браузера (ширине и / или высоте). Это здорово, но мы не всегда хотим использовать единицы измерения, связанные с размером области просмотра. Что, если мы хотим запросить ширину контейнера? Вот для чего нужны единицы запросов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Чтобы было понятнее, я хочу выделить разницу между единицами области просмотра и единицами запроса. Рассмотрим следующий рисунок:
Слева, значение font-size изменяется rem и vw и будет относиться к ширине области просмотра. В некоторых случаях это может сработать, но может вызвать непредвиденные проблемы, поскольку оно зависит от размера области просмотра.
Единицы запросов могут сэкономить наши усилия и время , когда мы имеем дело с такими вещами, как font-size, padding и margin в компоненте. Вместо того, чтобы вручную увеличивать размер шрифта, мы можем использовать единицы запроса. Рассмотрим следующий пример.
У нас есть карточный компонент, который изначально имеет сложенный стиль, но когда контейнер большой – приобретает hero-стиль. Для такого компонента нам может потребоваться изменить следующие вещи:
Размер эскиза
Размер шрифта
Расстояние между элементами
Без единиц запроса CSS нам нужно вручную изменить вышеуказанное.
CSS .card { /* The stacked, base style */ } .card__title { font-size: 1rem; } /* The horizontal style, v1 */ @container (min-width: 400px) { .card__title { font-size: 1.15rem; } } /* The horizontal style, v2 */ @container (min-width: 600px) { .card__title { font-size: 1.25rem; } } /* The hero style */ @container (min-width: 800px) { .card__title { font-size: 2rem; } }
12345678910111213141516171819202122232425262728 | .card { /* The stacked, base style */} .card__title { font-size: 1rem;} /* The horizontal style, v1 */@container (min-width: 400px) { .card__title { font-size: 1.15rem; }} /* The horizontal style, v2 */@container (min-width: 600px) { .card__title { font-size: 1.25rem; }} /* The hero style */@container (min-width: 800px) { .card__title { font-size: 2rem; }} |
Обратите внимание, как размер шрифта .card__title изменяется с различными контейнерными запросами. Мы можем улучшить это и избежать дублирования font-size, используя единицы запроса вместе с функцией CSS clamp().
CSS .card__title { font-size: clamp(1rem, 3qw, 2rem); }
123 | .card__title { font-size: clamp(1rem, 3qw, 2rem);} |
При этом нам нужно определить font-size только один раз. Если мы хотим сравнить это визуально, вот как это выглядит:
Если вы знакомы с единицами просмотра CSS, это не будет для вас новостью. Похоже на запрос к контейнеру, а не к области просмотра браузера. Демо.
Единицы Запроса
Теперь, когда у нас есть представление о задачах, которые должны решать единицы запросов, давайте рассмотрим их. Согласно спецификации CSS:
Запрос ширины (qw): 1% ширины контейнера. Например, 5qw равно 5% ширины контейнера.
Запрос высоты (qh): 1% от высоты контейнера. Например, 5qh равно 5% высоты контейнера.
Запрос минимума (qmin): меньшее значение запроса ширины qw или запроса высоты qh.
Запрос максимума (qmax): большее значение qw или qh.
У нас также есть две друге единицы: qi и qb, они означают, соответственно, встроенный запрос и блок запроса.
Варианты использования и примеры
Компонент Карты
В дополнение к ранее объясненному примеру о карточках мы можем использовать единицы запроса для сложенной карточки, где мы хотим, чтобы размер шрифта был немного больше в зависимости от ширины контейнера.
Обратите внимание, что размер шрифта становится меньше, в зависимости от размера контейнера. Это может быть полезно для создания составного компонента карты, который работает независимо от того, где он размещен. Демо.
Изменение font-size в зависимости от важности
Когда один элемент больше другого, это, скорее, показатель его важности. Хороший пример этого — aside и main. Размер заголовка в разделе <aside> должен быть меньше, чем размер заголовка в разделе <main>.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Обратите внимание на то, что заголовок в теге aside меньше, чем заголовок в main. Мы легко можем сделать это благодаря единицам запросов. Во-первых, нам нужно определить aside и main как внутренние контейнеры.
CSS aside, main { container: inline-size; }
1234 | aside,main { container: inline-size;} |
Затем мы будем использовать единицы запроса для заголовка раздела. Мы также можем использовать еденицы запроса для нижнего поля.
CSS .section-title { font-size: clamp(1.25rem, 3qw, 2rem); margin-bottom: clamp(0.5rem, 1.5qw, 1rem); }
1234 | .section-title { font-size: clamp(1.25rem, 3qw, 2rem); margin-bottom: clamp(0.5rem, 1.5qw, 1rem);} |
Демо
Компонент bio
Компонент bio может находиться в меньшем контейнере (например, на боковой панели), отображаться в мобильном окне просмотра или в большом контейнере, таком как заголовок страницы.
Мы можем создать компонент, который может адаптироваться к ширине своего контейнера. В этом примере размер аватара и шрифта пользователя изменяется в зависимости от ширины контейнера.
CSS .bio { container: inline-size; } .c-avatar { –size: calc(60px + 10qw); width: var(–size, 100px); height: var(–size, 100px); margin-bottom: clamp(0.5rem, 3qmin, 2rem); }
12345678910 | .bio { container: inline-size;} .c-avatar { –size: calc(60px + 10qw); width: var(–size, 100px); height: var(–size, 100px); margin-bottom: clamp(0.5rem, 3qmin, 2rem);} |
Демо
Заголовки cо cчетчиками
В некоторых случаях нам нужно показывать счетчик рядом с заголовком с телом статьи. Это идеальный вариант использования единиц запроса.
CSS .article-body { counter-reset: heading; } h2 { container: inline-size; font-size: clamp(1.25rem, 3qw, 2rem); margin-bottom: clamp(0.5rem, 1.5qw, 1rem); } h2:before { –size: calc(1.25rem + 3qw); content: counter(heading); counter-increment: heading; width: var(–size); height: var(–size); font-size: calc(0.85rem + 1qw); margin-right: calc(var(–size) / 4); }
12345678910111213141516171819 | .article-body { counter-reset: heading;} h2 { container: inline-size; font-size: clamp(1.25rem, 3qw, 2rem); margin-bottom: clamp(0.5rem, 1.5qw, 1rem);} h2:before { –size: calc(1.25rem + 3qw); content: counter(heading); counter-increment: heading; width: var(–size); height: var(–size); font-size: calc(0.85rem + 1qw); margin-right: calc(var(–size) / 4);} |
Демо
Динамические зазоры
Мы можем использовать единицы просмотра для создания динамических зазоров с помощью сетки CSS. Что-то вроде:
CSS .wrapper { gap: calc(1rem + 2vw); }
123 | .wrapper { gap: calc(1rem + 2vw);} |
Это круто, но как насчет компонентов в определенных оболочках? Использование единиц просмотра не сработает. Вот почему использование единиц запросов — хорошее решение в таком случае.
CSS .card { display: flex; flex-direction: column; gap: calc(0.5rem + 1qmin); }
12345 | .card { display: flex; flex-direction: column; gap: calc(0.5rem + 1qmin);} |
Зазор будет немного больше, когда компонент переключится на горизонтальный стиль. Что произойдет, если мы будем использовать блоки запроса без определения контейнера?
Согласно спецификации: .
Браузер будет обрабатывать единицы запроса, как если бы они были единицами просмотра. Рассмотрим следующий пример:
CSS h2 { font-size: clamp(1.25rem, 3qw, 2rem); }
123 | h2 { font-size: clamp(1.25rem, 3qw, 2rem);} |
Если для элемента не определен контейнер h2, браузер будет считать, что 3qw — это 3% ширины области просмотра. Это значит, что использование единиц запроса без определения контейнера может привести к неожиданным результатам. Надеюсь, вам понравилась статья. Спасибо за чтение!
Автор: Ahmad Shadeed
Источник: webformyself.com