Добавляет доки про CSS Anchor Positioning, часть 1

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()` принимает три аргумента:
+
+- `<anchor-name>` — имя якоря, относительно которого нужно спозиционировать текущий таргет элемент. Необязятальный аргумент, если его опустить, то функция будет ссылаться на значение указаное в свойстве [`position-anchor`](/css/position-anchor/);
+- `<anchor-side>` — сторона якорного элемента, относительно которой нужно спозиционировать текущий таргет элемент;
+- `<length-percentage>` – фолбэк-значение, применится, если функция не нашла якорный элемент, на который мы пытаемся сослаться, или если передали некорректное значение для `<anchor-side>`. Необязятальный аргумент.
+
+```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);
+}
+```
+
+<iframe title="Позиционируем элемент с помощью функции anchor()" src="demos/anchor-function-top-left/" height="490"></iframe>
+
+Стоит отметить, что в качестве аргумента `<anchor-side>` в функцию можно передавать только значения, соответствующие оси 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);
+}
+```
+
+Помимо этого в качестве `<anchor-side>` можно ещё использовать значения `inside`, `outside`:
+
+- `inside` – соответствует той же самой стороне, для которой применяется функция `anchor()`;
+- `outside` – соответствует противоположной.
+
+<iframe title="Позиционируем элемент с помощью функции anchor() и значений inside, outside" src="demos/anchor-function-inside-outside/" height="440"></iframe>

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>` — якорное имя, должно начинаться с двух дефисов.
+
+## Как понять
+
+Свойство `anchor-name` объявляет элемент якорным. Оно задаёт имя, с помощью которого другие элементы могут сослаться на текущий, чтобы спозиционироваться относительно него.

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

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>` — имя, заданное в свойстве [`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) работает только с этими видами позиционирования.