diff --git a/css/anchor-function/demos/anchor-function-inside-outside/index.html b/css/anchor-function/demos/anchor-function-inside-outside/index.html new file mode 100644 index 0000000000..421d46a0dc --- /dev/null +++ b/css/anchor-function/demos/anchor-function-inside-outside/index.html @@ -0,0 +1,424 @@ + + + + Задаём top с помощью функции anchor() и значений inside, outside — anchor() — Дока + + + + + + + + + +
+
+
+

+.target {
+    top:
+
+
+ top: anchor(...); +
+
+ + +
+
+
}
+
+ +
+
Anchor
+ +
top
+
bottom
+
right
+
left
+ +
Target
+ +
+ +
+
+
+
+ +
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/anchor-function/demos/anchor-function-top-left/index.html b/css/anchor-function/demos/anchor-function-top-left/index.html new file mode 100644 index 0000000000..95e6726202 --- /dev/null +++ b/css/anchor-function/demos/anchor-function-top-left/index.html @@ -0,0 +1,515 @@ + + + + Задаём значение для top, left с помощью функции anchor() — anchor() — Дока + + + + + + + + + +
+
+
+

+.target {
+    top:
+
+
+ top: anchor(...); +
+
+ + + +
+
+
+

+  left:
+
+
+ left: anchor(...); +
+
+ + + +
+
}
+
+
+ +
+
Anchor
+ +
top
+
bottom
+
right
+
left
+ +
Target
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/anchor-function/index.md b/css/anchor-function/index.md new file mode 100644 index 0000000000..b06f6c2816 --- /dev/null +++ b/css/anchor-function/index.md @@ -0,0 +1,144 @@ +--- +title: "`anchor()`" +description: "Позиционируем элемент относительно одной из сторон якоря." +baseline: + - group: anchor-positioning + features: + - css.properties.top.anchor + - css.properties.right.anchor + - css.properties.bottom.anchor + - css.properties.left.anchor + - css.properties.left.anchor + - css.properties.inset-block-end.anchor + - css.properties.inset-block-start.anchor + - css.properties.inset-block.anchor + - css.properties.inset-inline-end.anchor + - css.properties.inset-inline-start.anchor + - css.properties.inset-inline.anchor + - css.properties.inset.anchor +authors: + - akhmadullin +related: + - css/position + - css/anchor-name + - css/position-anchor +tags: + - doka +--- + +## Кратко + +Функция `anchor()` привязывает таргет элемент к одной из сторон якорного элемента. + +## Пример + +```css +.target { + top: anchor(bottom); +} +``` + +## Как пишется + +Функция `anchor()` принимает три аргумента: + +- `` — имя якоря, относительно которого нужно спозиционировать текущий таргет элемент. Необязятальный аргумент, если его опустить, то функция будет ссылаться на значение указаное в свойстве [`position-anchor`](/css/position-anchor/); +- `` — сторона якорного элемента, относительно которой нужно спозиционировать текущий таргет элемент; +- `` – фолбэк-значение, применится, если функция не нашла якорный элемент, на который мы пытаемся сослаться, или если передали некорректное значение для ``. Необязятальный аргумент. + +```css +.anchor { + anchor-name: --my-anchor; +} + +.target { + /* + Функция anchor() будет использовать якорь --my-anchor, + указанный в свойстве anchor-name, + поскольку в неё явно не передан никакой другой якорь. + */ + top: anchor(bottom); + /* + В данном случае функция anchor() будет ссылаться на якорь --custom-anchor. + Якорь --my-anchor из свойства anchor-name будет проигнорирован. + */ + top: anchor(--custom-anchor bottom); + /* + В этом примере target элемент будет иметь top: 50%, + если по каким-то причинам функция anchor() не сможет привязаться + к указанной стороне переданного якоря. + */ + top: anchor(--custom-anchor bottom, 50%); +} +``` + +## Как понять + +Функция `anchor()` ссылается на параметры позиционирования якорного элемента. Её можно использовать, чтобы расположить таргет элемент в нужном месте относительно якоря. Может быть применена только в [inset-свойствах](/css/inset/). + +Чтобы лучше понять, как функция работает, давайте рассмотрим её работу на примере демки: + +```css +.anchor { + anchor-name: --my-anchor; +} + +.target { + position: absolute; + position-anchor: --my-anchor; + top: anchor(bottom); + left: anchor(right); +} +``` + + + +Стоит отметить, что в качестве аргумента `` в функцию можно передавать только значения, соответствующие оси inset-свойства, для которого функция применяется. + +```css +.target { + /* + top и bottom находятся в одной оси (вертикальной), + поэтому следующие две строки будут работать. + */ + top: anchor(top); + top: anchor(bottom); + /* + top находится в вертикальной оси, left и right в горизонтальной. + Оси разные, поэтому строчки ниже работать не будут. + */ + top: anchor(left); + top: anchor(right); +} +``` + +Также при работе с функцией `anchor()` можно использовать процентные значения + +```css +.target { + top: anchor(50%); +} +``` + +использовать её значение в вычислениях + +```css +.target { + top: calc(anchor(bottom) + 10px); +} +``` + +и взаимодействовать с [логическими свойствами](/css/logical-properties/) + +```css +.target { + inset-block-end: anchor(start); +} +``` + +Помимо этого в качестве `` можно ещё использовать значения `inside`, `outside`: + +- `inside` – соответствует той же самой стороне, для которой применяется функция `anchor()`; +- `outside` – соответствует противоположной. + + diff --git a/css/anchor-name/index.md b/css/anchor-name/index.md new file mode 100644 index 0000000000..a554b0d813 --- /dev/null +++ b/css/anchor-name/index.md @@ -0,0 +1,40 @@ +--- +title: "`anchor-name`" +description: "Объявляет элемент якорным." +baseline: + - group: anchor-positioning + features: + - css.properties.anchor-name + - css.properties.anchor-name.none +authors: + - akhmadullin +related: + - css/position + - css/position-anchor + # - css/anchor-scope +tags: + - doka +--- + +## Кратко + +Свойство `anchor-name` задаёт якорное имя для элемента. + +## Пример + +```css +.anchor { + anchor-name: --my-anchor; +} +``` + +## Как пишется + +Возможные значения `anchor-name`: + +- `none` — значение по умолчанию, якорное имя не задаётся; +- `` — якорное имя, должно начинаться с двух дефисов. + +## Как понять + +Свойство `anchor-name` объявляет элемент якорным. Оно задаёт имя, с помощью которого другие элементы могут сослаться на текущий, чтобы спозиционироваться относительно него. diff --git a/css/index.md b/css/index.md index eb0891339e..52bd8041c7 100644 --- a/css/index.md +++ b/css/index.md @@ -246,6 +246,10 @@ groups: - stacking-context - z-index - inset + - anchor-name + - position-anchor + - anchor-function + - position-area - name: 'Списки' items: - list-style diff --git a/css/position-anchor/index.md b/css/position-anchor/index.md new file mode 100644 index 0000000000..ee5a4d2b99 --- /dev/null +++ b/css/position-anchor/index.md @@ -0,0 +1,55 @@ +--- +title: "`position-anchor`" +description: "Задаёт дефолтный якорный элемент." +baseline: + - group: anchor-positioning + features: + - css.properties.position-anchor + - css.properties.position-anchor.auto +authors: + - akhmadullin +related: + - css/position + - css/anchor-name + - css/anchor-function +tags: + - doka +--- + +## Кратко + +Свойство `position-anchor` определяет якорный элемент, к которому должен быть привязан текущий. + +## Пример + +```css +.target { + position-anchor: --my-anchor; +} +``` + +## Как пишется + +Возможные значения `position-anchor`: + +- `auto` — значение по умолчанию, дефолтное якорное имя не задаётся; +- `` — имя, заданное в свойстве [`anchor-name`](/css/anchor-name/) якорного элемента, должно начинаться с двух дефисов. + +```css +.anchor { + anchor-name: --my-anchor; +} + +.target { + position: absolute; + position-anchor: --my-anchor; +} +``` + +## Как понять + +Свойство `position-anchor` указывает дефолтный якорный элемент, относительно которого будет позиционироваться текущий. Функции [`anchor()`](/css/anchor-function/) и [`anchor-size()`](/css/anchor-size-function/), отвечающие за расположение и размер текущего элемента, будут использовать значение `position-anchor`, чтобы привязаться к нужному якорному элементу, если в них явно не передать имя другого якоря. + +## Подсказки + +💡 Не забудьте указать `position: absolute` или `position: fixed` для таргет элемента, так как [Anchor Positioning](/css/anchor-positioning-guide) работает только с этими видами позиционирования. diff --git a/css/position-area/demos/position-area-interactive/index.html b/css/position-area/demos/position-area-interactive/index.html new file mode 100644 index 0000000000..866b4716e1 --- /dev/null +++ b/css/position-area/demos/position-area-interactive/index.html @@ -0,0 +1,535 @@ + + + + Интерактивная демка, показывающася работу position-area — position-area — Дока + + + + + + + + + +
+ position-area: top center; +
+ +
+
Anchor
+ +
+
+
+
+ +
Target
+ +
+ + + + + + + + + + + +
+ +
top
+
center
+
bottom
+ +
left
+
center
+
right
+
+ +
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/position-area/demos/position-area-top-center/index.html b/css/position-area/demos/position-area-top-center/index.html new file mode 100644 index 0000000000..4a958bda2c --- /dev/null +++ b/css/position-area/demos/position-area-top-center/index.html @@ -0,0 +1,256 @@ + + + + Располагаем элемент сверху по центру — position-area — Дока + + + + + + + + + +
+
Anchor
+ +
+
+
+
+ +
Target
+ +
top
+
center
+
bottom
+ +
left
+
center
+
right
+
+
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/position-area/demos/position-area-top-span-all/index.html b/css/position-area/demos/position-area-top-span-all/index.html new file mode 100644 index 0000000000..4ceee1d215 --- /dev/null +++ b/css/position-area/demos/position-area-top-span-all/index.html @@ -0,0 +1,256 @@ + + + + Располагаем элемент сверху и тянем на три ячейки — position-area — Дока + + + + + + + + + +
+
Anchor
+ +
+
+
+
+ +
Target
+ +
top
+
center
+
bottom
+ +
left
+
center
+
right
+
+
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/position-area/demos/position-area-top-span-left/index.html b/css/position-area/demos/position-area-top-span-left/index.html new file mode 100644 index 0000000000..fb59f8673c --- /dev/null +++ b/css/position-area/demos/position-area-top-span-left/index.html @@ -0,0 +1,256 @@ + + + + Располагаем элемент сверху и тянем на две ячейки — position-area — Дока + + + + + + + + + +
+
Anchor
+ +
+
+
+
+ +
Target
+ +
top
+
center
+
bottom
+ +
left
+
center
+
right
+
+
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/position-area/demos/position-area-top/index.html b/css/position-area/demos/position-area-top/index.html new file mode 100644 index 0000000000..ef221b111b --- /dev/null +++ b/css/position-area/demos/position-area-top/index.html @@ -0,0 +1,256 @@ + + + + Располагаем элемент сверху и тянем на три ячейки — position-area — Дока + + + + + + + + + +
+
Anchor
+ +
+
+
+
+ +
Target
+ +
top
+
center
+
bottom
+ +
left
+
center
+
right
+
+
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/position-area/demos/top-center-without-position-area/index.html b/css/position-area/demos/top-center-without-position-area/index.html new file mode 100644 index 0000000000..80086de3d7 --- /dev/null +++ b/css/position-area/demos/top-center-without-position-area/index.html @@ -0,0 +1,123 @@ + + + + Размещаем таргет элемент сверху по центру без position-area — position-area — Дока + + + + + + + + + +
Anchor
+
Target
+
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/position-area/demos/top-left-without-position-area/index.html b/css/position-area/demos/top-left-without-position-area/index.html new file mode 100644 index 0000000000..5866ab4594 --- /dev/null +++ b/css/position-area/demos/top-left-without-position-area/index.html @@ -0,0 +1,123 @@ + + + + Размещаем таргет элемент сверху слева без position-area — position-area — Дока + + + + + + + + + +
Anchor
+
Target
+
+
+

Ваш браузер не поддерживает Anchor Positioning 😢

+

+ Откройте демо в браузере, имеющем поддержку. +

+
+
+ + diff --git a/css/position-area/images/scheme-position-area-grid.png b/css/position-area/images/scheme-position-area-grid.png new file mode 100644 index 0000000000..cd849b651c Binary files /dev/null and b/css/position-area/images/scheme-position-area-grid.png differ diff --git a/css/position-area/index.md b/css/position-area/index.md new file mode 100644 index 0000000000..d26f4bed09 --- /dev/null +++ b/css/position-area/index.md @@ -0,0 +1,165 @@ +--- +title: "`position-area`" +description: "Позиционируем элемент с помощью концепции сетки." +baseline: + - group: anchor-positioning + features: + - css.properties.position-area + - css.properties.position-area.block-end + - css.properties.position-area.block-start + - css.properties.position-area.bottom + - css.properties.position-area.center + - css.properties.position-area.end + - css.properties.position-area.inline-end + - css.properties.position-area.inline-start + - css.properties.position-area.left + - css.properties.position-area.none + - css.properties.position-area.right + - css.properties.position-area.self-block-end + - css.properties.position-area.self-block-start + - css.properties.position-area.self-end + - css.properties.position-area.self-inline-end + - css.properties.position-area.self-inline-start + - css.properties.position-area.self-start + - css.properties.position-area.span-all + - css.properties.position-area.span-block-end + - css.properties.position-area.span-block-start + - css.properties.position-area.span-bottom + - css.properties.position-area.span-end + - css.properties.position-area.span-inline-end + - css.properties.position-area.span-inline-start + - css.properties.position-area.span-self-block-end + - css.properties.position-area.span-self-block-start + - css.properties.position-area.span-self-end + - css.properties.position-area.span-self-inline-end + - css.properties.position-area.span-self-inline-start + - css.properties.position-area.span-self-start + - css.properties.position-area.span-start + - css.properties.position-area.span-top + - css.properties.position-area.span-x-end + - css.properties.position-area.span-self-x-end + - css.properties.position-area.span-self-x-start + - css.properties.position-area.span-x-start + - css.properties.position-area.span-y-end + - css.properties.position-area.span-self-y-end + - css.properties.position-area.span-self-y-start + - css.properties.position-area.span-y-start + - css.properties.position-area.start + - css.properties.position-area.top + - css.properties.position-area.x-end + - css.properties.position-area.self-x-end + - css.properties.position-area.self-x-start + - css.properties.position-area.x-start + - css.properties.position-area.y-end + - css.properties.position-area.self-y-end + - css.properties.position-area.self-y-start + - css.properties.position-area.y-start +authors: + - akhmadullin +related: + - css/position-anchor + - css/anchor-function + - css/position-try +tags: + - doka +--- + +## Кратко + +Свойство `position-area` предоставляет удобную концепцию на основе сетки для позиционирования относительного якорного элемента. + +## Пример + +```css +.target { + position-area: top; +} +``` + +## Как пишется + +Свойство `position-anchor` принимает в себя значение из двух ключевых слов: одно для расположения по горизонтальной оси, второе по вертикальной. + +Например, запись + +```css +.target { + position-area: top center; +} +``` + +расположит элемент сверху по центру: + + + +Если нужно чтобы элемент мог занимать площадь двух ячеек нужно использовать `span` значение. Например, `span-left`. + +```css +.target { + position-area: top span-left; +} +``` + + + +А если хочется растянуть элемент на все три ячейки – в этом поможет значение `span-all`. + +```css +.target { + position-area: top span-all; +} +``` + + + +При этом `span-all` можно опустить, так как оно применяется по умолчанию. + +```css +.target { + position-area: top; +} +``` + + + +Важно помнить, что элемент растянется на все три ячейки, только если у него будет достаточно для этого ширины. Значение `span-all` само по себе не увеличит ширину таргет элемента. + +## Как понять + +Обычно нам нужно разместить таргет элемент относительно якоря в "стандартных" позициях: сверху по центру, сверху слева и т.д. + +Для этого можно использовать функцию [`anchor()`](/css/anchor-function/). + +Например, вот так можем расположить элемент сверху слева относительно якоря: + +```css +.target { + /* располагаем элемент сверху слева относительно якоря */ + bottom: anchor(top); + left: anchor(right); +} +``` + + + +Если нам нужно расположить элемент по центру одной из осей, можем использовать связку из функции [`anchor()`](/css/anchor-function/) и значения `anchor-center` для свойств [`justify-self`](/css/justify-self/), [`align-self`](/css/align-self/): + +```css +.target { + /* располагаем элемент сверху по центру относительно якоря */ + bottom: anchor(top); + justify-self: anchor-center; +} +``` + + + +В обоих случаях нам потребовалось использовать два свойства, чтобы расположить элемент в нужном месте. Не очень удобно. Чтобы решить эту проблему было создано свойство `position-area`. С помощью него можно расположить таргет элемент относительно якоря используя концепцию сетки. + +![Визуализация сетки на основе которой работает свойство position-area.](images/scheme-position-area-grid.png) + +Если визуально отобразить границы вьюпорта синим бордером, а затем провести воображаемые линии сверху, снизу, справа и слева от якорного элемента, получим сетку размера 3x3. Чтобы расположить элемент в определенной ячейке, нужно к ней обратиться с помощью ключевых слов top, bottom, right, left, center или их логических эквивалентов (start, center, end). + +Лучше понять, какое значение прописать для свойства, чтобы расположить его в нужной месте поможет интерективная демка ниже. В ней можно кликать на любую из ячеек, чтобы выбрать одну ячейку. Также зажать и тянуть, чтобы выбрать несколько ячеек. + +