From fd2547e394af36c0983656bc7ec652d6601d288d Mon Sep 17 00:00:00 2001 From: Kazakov Alexey Date: Sun, 3 Nov 2024 20:45:13 +0300 Subject: [PATCH 1/4] feat: add article container queries --- css/container-queries/index.md | 137 +++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 css/container-queries/index.md diff --git a/css/container-queries/index.md b/css/container-queries/index.md new file mode 100644 index 0000000000..37572f88e3 --- /dev/null +++ b/css/container-queries/index.md @@ -0,0 +1,137 @@ +--- +title: Руководство по выражениям от контейнера +description: +cover: + author: kazakov-al + desktop: + mobile: + alt: +authors: + - kazakov-al +contributors: + - +editors: + - +keywords: + - +related: + - +tags: + - article +--- + +Долгое время медиазапросы были основой адаптивной вёрстки. Если для элемента дизайна не хватало места и разработчик решал его скрыть, скорее всего писалось что-то подобное: + +```css +.input__icon { + display: none; +} + +@media (min-width: 580px) { + .input__icon { + display: block; + width: 32px; + height: 32px; + } +} +``` + +Такой код работает, но с нюансом. Если доступного пространства под элемент станет больше, а ширина области просмотра останется прежней — иконка останется скрытой. Было бы круто отвязаться от области просмотра и получить поведение, при котором компонент будет меняться в зависимости от доступного для него пространства. + +Здесь и приходят на помощь выражения от контейнера. Они позволяют автоматически менять внешний вид компонента в зависимости от стилей его контейнера. Чтобы начать их использовать надо сперва объявить обёртку компонента контейнером. Делается это с помощью свойства `container-type`: + +```css +.form__item { + container-type: inline-size; +} +``` + +У `container-type` есть три значения: +- `normal` — значение по умолчанию. Создаёт контейнер, который не позволяет запрашивать размеры, но разрешает запрос стилей. +- `inline-size` — создаёт контейнер, который позволяет запрашивать размер по строчному направлению оси. +- `size` — создаёт контейнер, который позволяет запрашивать размер по любой оси: и строчной, и блочной. + +**Пометить как важную ремарку** +К сожалению, не существует способа создать контейнер, позволяющий запрашивать размер только по блочной оси, вместо этого придется использовать значение `size`. + +При объявлении контейнера с помощью `container-type` под капотом автоматически создаётся контекст, при котором дочерний компонент перестаёт влиять на элементы за пределами своего контейнера. + +Рекомендуется давать контейнерам имена с помощью свойства `container-name`: + +```css +.form__item { + container-type: inline-size; + container-name: form-item; +} +``` + +Так вы сможете обращаться к конкретному контейнеру, если их будет несколько. Для объявления контейнера с именем можно использовать и сокращённую запись: + +```css +.form__item { + container: form-item / inline-size; +} +``` + +**Пометить как важную ремарку** +Имя обязательно должно идти первым. + +Когда контейнер объявлен, появляется возможность обращаться к его стилям и использовать новые единицы измерений зависящие от размеров контейнера: +- `cqw` — 1% от ширины контейнера. +- `cqh` — 1% от высоты контейнера. +- `cqi` — 1% от `inline-size` контейнера. +- `cqb` — 1% от `block-size` контейнера. +- `cqmin` — меньшее из `cqi` и `cqb`. +- `cqmax` — большее из `cqi` и `cqb`. + +Синтаксис запроса к контейнеру во многом похож на медиавыражения, но вместо директивы `@media` используется `@container`: + +```css +@container (inline-size >= 300px) { + .input__icon { + /* Изменение стилей компонента */ + } +} +``` + +Можно запрашивать не только размеры контейнера, а любые его вычисленные стили. Для этого используется функция `style()`. + +```css +@container style([свойство]: [значение свойства]) { + /* Новые стили */ +} +``` + +Как и в случае с медиавыражениями, можно комбинировать запросы с помощью логических операторов: + +```css +@container (inline-size >= 300px) and style(--bg-color: #fff) { + /* Новые стили */ +} +``` + +Или даже вкладывать контейнеры друг в друга и обращаться к стилям контейнера, находящегося на несколько уровней выше. Для этого нужно дать контейнерам имена и обратиться к контейнеру по имени: + +```css +.form__item { + container-type: inline-size; + container-name: form-item; +} + +.input { + container-type: inline-size; + container-name: input; +} + +.input__icon { + /* стили иконки поля ввода */ +} + +@container form-item (inline-size >= 300px) { + .input__icon { + /* изменение стилей */ + } +} +``` + +При запросе к конкретному контейнеру — стили применятся, если компонент находится именно в нём. Если не указывать имя контейнера, возьмётся ближайший, а если такового нет, выражение от контейнера не будет работать. From 9b685d95f745a9f57ac29aedf73bf0f8e82050b2 Mon Sep 17 00:00:00 2001 From: Kazakov Alexey Date: Sun, 3 Nov 2024 20:54:30 +0300 Subject: [PATCH 2/4] fix: lint --- css/container-queries/index.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/css/container-queries/index.md b/css/container-queries/index.md index 37572f88e3..400abf46e8 100644 --- a/css/container-queries/index.md +++ b/css/container-queries/index.md @@ -24,12 +24,12 @@ tags: ```css .input__icon { - display: none; + display: none; } @media (min-width: 580px) { .input__icon { - display: block; + display: block; width: 32px; height: 32px; } @@ -42,7 +42,7 @@ tags: ```css .form__item { - container-type: inline-size; + container-type: inline-size; } ``` @@ -60,8 +60,8 @@ tags: ```css .form__item { - container-type: inline-size; - container-name: form-item; + container-type: inline-size; + container-name: form-item; } ``` @@ -69,7 +69,7 @@ tags: ```css .form__item { - container: form-item / inline-size; + container: form-item / inline-size; } ``` @@ -89,7 +89,7 @@ tags: ```css @container (inline-size >= 300px) { .input__icon { - /* Изменение стилей компонента */ + /* Изменение стилей компонента */ } } ``` @@ -98,7 +98,7 @@ tags: ```css @container style([свойство]: [значение свойства]) { - /* Новые стили */ + /* Новые стили */ } ``` @@ -114,22 +114,22 @@ tags: ```css .form__item { - container-type: inline-size; - container-name: form-item; + container-type: inline-size; + container-name: form-item; } .input { - container-type: inline-size; - container-name: input; + container-type: inline-size; + container-name: input; } .input__icon { - /* стили иконки поля ввода */ + /* стили иконки поля ввода */ } @container form-item (inline-size >= 300px) { .input__icon { - /* изменение стилей */ + /* изменение стилей */ } } ``` From 68a4a1564ff184af8b43811a1ec4b781975d04f6 Mon Sep 17 00:00:00 2001 From: Kazakov Alexey Date: Sun, 3 Nov 2024 21:18:03 +0300 Subject: [PATCH 3/4] some change --- css/container-queries/index.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/css/container-queries/index.md b/css/container-queries/index.md index 400abf46e8..fd9643c6ac 100644 --- a/css/container-queries/index.md +++ b/css/container-queries/index.md @@ -20,7 +20,7 @@ tags: - article --- -Долгое время медиазапросы были основой адаптивной вёрстки. Если для элемента дизайна не хватало места и разработчик решал его скрыть, скорее всего писалось что-то подобное: +Долгое время медиазапросы были основой адаптивной вёрстки. Если для элемента дизайна не хватало места и разработчику надо было его скрыть, скорее всего писалось что-то подобное: ```css .input__icon { @@ -36,9 +36,9 @@ tags: } ``` -Такой код работает, но с нюансом. Если доступного пространства под элемент станет больше, а ширина области просмотра останется прежней — иконка останется скрытой. Было бы круто отвязаться от области просмотра и получить поведение, при котором компонент будет меняться в зависимости от доступного для него пространства. +Такой код работает, но с нюансом. Если доступного пространства под элемент станет больше, а ширина области просмотра останется прежней — иконка по-прежнему будет скрыта. Было бы круто отвязаться от области просмотра и получить поведение, при котором внешний вид компонента будет меняться в зависимости от доступного для него пространства. -Здесь и приходят на помощь выражения от контейнера. Они позволяют автоматически менять внешний вид компонента в зависимости от стилей его контейнера. Чтобы начать их использовать надо сперва объявить обёртку компонента контейнером. Делается это с помощью свойства `container-type`: +Здесь и приходят на помощь выражения от контейнера. Они позволяют автоматически менять внешний вид компонента в зависимости от стилей родителя. Чтобы начать использовать выражения от контейнер надо сначала объявить родитель компонента контейнером с помощью свойства `container-type`: ```css .form__item { @@ -51,8 +51,12 @@ tags: - `inline-size` — создаёт контейнер, который позволяет запрашивать размер по строчному направлению оси. - `size` — создаёт контейнер, который позволяет запрашивать размер по любой оси: и строчной, и блочной. -**Пометить как важную ремарку** -К сожалению, не существует способа создать контейнер, позволяющий запрашивать размер только по блочной оси, вместо этого придется использовать значение `size`. + + При объявлении контейнера с помощью `container-type` под капотом автоматически создаётся контекст, при котором дочерний компонент перестаёт влиять на элементы за пределами своего контейнера. @@ -73,8 +77,11 @@ tags: } ``` -**Пометить как важную ремарку** -Имя обязательно должно идти первым. + Когда контейнер объявлен, появляется возможность обращаться к его стилям и использовать новые единицы измерений зависящие от размеров контейнера: - `cqw` — 1% от ширины контейнера. From 9af9be087b646e9f32f16eca6feb19afe8c43dfb Mon Sep 17 00:00:00 2001 From: Kazakov Aleksey Date: Sun, 17 Nov 2024 01:50:29 +0300 Subject: [PATCH 4/4] Update css/container-queries/index.md Co-authored-by: Alena Batitskaia --- css/container-queries/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/container-queries/index.md b/css/container-queries/index.md index fd9643c6ac..f308c7cd65 100644 --- a/css/container-queries/index.md +++ b/css/container-queries/index.md @@ -20,7 +20,7 @@ tags: - article --- -Долгое время медиазапросы были основой адаптивной вёрстки. Если для элемента дизайна не хватало места и разработчику надо было его скрыть, скорее всего писалось что-то подобное: +Долгое время [медиазапросы](/css/media/) были основой адаптивной вёрстки. Если для элемента дизайна не хватало места и разработчику надо было его скрыть, скорее всего писалось что-то подобное: ```css .input__icon {