CSS-свойство `anchor-scope`

Свойство anchor-scope CSS можно использовать, чтобы ограничить область, в которой позиционируемый элемент может быть связан с элементами-якорями, определённым поддеревом.

Синтаксис

/* Single values */
anchor-scope: none;
anchor-scope: all;
anchor-scope: --anchor-name;

/* Multiple <dashed-ident> values */
anchor-scope: --anchor-name, --another-name;

/* Global values */
anchor-scope: inherit;
anchor-scope: initial;
anchor-scope: revert;
anchor-scope: revert-layer;
anchor-scope: unset;

Значения

Это свойство задаётся ключевым словом none или all либо разделённым запятыми списком значений <dashed-ident>:

none

Область видимости якоря для элемента не ограничивается. Это значение по умолчанию.

all

Задаёт область видимости так, чтобы с элементами, которым назначены значения anchor-name внутри поддерева, могли связываться только позиционируемые элементы из того же поддерева.

<dashed-ident>#

Одно или несколько разделённых запятыми значений <dashed-ident>, представляющих имена якорей. Задаёт область видимости так, чтобы с элементами, которым внутри поддерева назначены указанные значения anchor-name, могли связываться только позиционируемые элементы из того же поддерева.

Описание

Если нескольким элементам-якорям на странице задано одинаковое значение anchor-name, а позиционируемый элемент связан с этим именем якоря (имя указано в качестве значения свойства position-anchor), позиционируемый элемент будет связан с последним в порядке исходного кода элементом-якорем с таким именем.

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

Свойство anchor-scope решает эту проблему, ограничивая видимость, или «область видимости», значения anchor-name определённым поддеревом. В результате каждый позиционируемый элемент можно привязать только к элементу внутри того же поддерева, что и элемент, для которого задана область видимости.

• anchor-scope: all задаёт область видимости так, чтобы с элементами, которым назначены значения anchor-name внутри поддерева, могли связываться только позиционируемые элементы из того же поддерева. Предположим, мы добавим в документ несколько якорей, каждому из которых задано anchor-name: --my-anchor, и поместим их в отдельные контейнеры. Затем мы зададим anchor-scope: all каждому контейнеру. Если после этого добавить позиционируемый элемент внутрь одного из контейнеров и указать --my-anchor в качестве значения его свойства position-anchor, он будет позиционирован относительно якоря внутри того же контейнера.

  Кроме того, если создать ещё один позиционируемый элемент вне контейнеров и указать для него то же имя якоря или другое имя, он не будет позиционирован относительно якоря — независимо от того, включены ли эти имена якорей в значения anchor-name самих якорей. Свойство anchor-scope: all ограничивает область видимости якорей для контейнеров, которым оно задано, для любых якорей, независимо от anchor-name, оставляя в ней только позиционируемые элементы внутри тех же контейнеров.

• anchor-scope: <dashed-ident># задаёт область видимости так, чтобы с элементами, которым внутри поддерева назначены указанные значения anchor-name, могли связываться только позиционируемые элементы из того же поддерева. Вернёмся к тому же примеру, что и в предыдущем пункте, но изменим значение anchor-scope, заданное контейнерам, на --my-anchor:
  • Для позиционируемых элементов, которым задано position-anchor: --my-anchor, будет действовать область видимости, установленная значением anchor-scope. Они будут позиционироваться относительно якорей, только если находятся внутри контейнеров.

  • Однако позиционируемые элементы с другими именами position-anchor — например, --another-anchor — могут позиционироваться относительно одного из якорей независимо от того, находятся ли они внутри контейнеров, если добавить имя якоря --another-anchor в свойство anchor-name якоря. Свойство anchor-scope ограничивает область видимости только для имени якоря --my-anchor, поэтому на другие имена якорей оно не влияет.

    Если нескольким якорям задано имя --another-anchor, позиционируемые элементы со значением position-anchor будут позиционироваться относительно последнего в порядке исходного кода якоря с этим именем.

• anchor-scope: none — значение по умолчанию, указывающее, что область видимости якоря не задана. Если в документе есть несколько якорей с одинаковым anchor-name и позиционируемому элементу задано это имя в качестве значения свойства position-anchor, элемент будет позиционироваться относительно последнего в порядке исходного кода элемента-якоря независимо от его положения в иерархии DOM.

Если, например, внутри поддерева заданы три значения anchor-name (допустим, --anchor1, --anchor2 и --anchor3), установка anchor-scope: --anchor1, --anchor2, --anchor3 для элемента верхнего уровня этого поддерева будет равнозначна установке anchor-scope: all.

Области видимости якорей влияют только на явные связи с якорями, то есть на связи между элементом-якорем, которому задано anchor-name, и позиционируемым элементом, в значении position-anchor которого указано имя якоря этого элемента. Области видимости якорей не влияют на неявные связи с якорями.

Подробнее о функциях якорей и их использовании см. в модуле позиционирование с помощью якорей CSS и руководстве Использование позиционирования с помощью якорей CSS.

Формальное определение

Формальный синтаксис

anchor-scope = 
  none |
  all |
  <dashed-ident>#

Примеры

Основное использование

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

HTML

Мы указываем элемент <section>, которому зададим область видимости якоря. Внутри него находятся два элемента <div>: один станет якорем, а другой — элементом, позиционируемым относительно якоря.

Также мы добавляем третий элемент <div> вне элемента <section> и тоже превращаем его в элемент, позиционируемый относительно якоря.

<section class="scoped">
  <div class="anchor">⚓︎</div>
  <div class="positioned">Positioned 1</div>
</section>

<div class="positioned">Positioned 2</div>

CSS

Сначала мы задаём anchor-scope: --my-anchor элементу <section>. Это ограничивает область видимости: потомки <section>, являющиеся элементами-якорями с именем --my-anchor, могут быть связаны только с позиционируемыми элементами, которые также являются потомками <section>.

Чтобы проверить это, мы объявляем anchor <div> элементом-якорем, задав ему anchor-name со значением --my-anchor. Затем мы абсолютно позиционируем элементы .positioned, привязываем их к якорю, задав значения position-anchor равными --my-anchor, и размещаем их справа от якоря, задав значения position-area равными right:

.scoped {
  padding: 20px;
  background: #eeeeee;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: blue;
  width: fit-content;
  padding: 3px;
}

.positioned {
  background: orange;
  width: fit-content;
  padding: 3px;
}

.scoped {
  anchor-scope: --my-anchor;
}

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: right;
}

Результат

Пример отображается следующим образом:

Обратите внимание, что первый позиционируемый элемент расположен справа от якоря. Он находится в области видимости для позиционирования относительно якоря --my-anchor, поскольку расположен внутри элемента <section>, которому задано свойство anchor-scope: --my-anchor.

Однако второй позиционируемый элемент не расположен относительно якоря. Он не является потомком элемента <section>, поэтому находится за пределами области видимости якоря.

Сравнение разных значений anchor-scope

В этом примере показано, как действуют разные значения anchor-scope: для нескольких контейнеров, каждый из которых содержит якоря с одинаковым значением anchor-name, можно задавать разные значения anchor-scope.

HTML

Мы указываем три элемента <section>, которым зададим область видимости якоря. Каждый элемент <section> содержит два элемента <div>: один станет якорем, а другой — элементом, позиционируемым относительно якоря.

Также мы добавляем ещё один элемент <div> вне элементов <section> и тоже превращаем его в элемент, позиционируемый относительно якоря. Для него будут заданы отличающиеся от остальных настройки позиционирования относительно якоря.

Наконец, мы добавляем элемент <form> с тремя разными элементами <input type="radio">, чтобы задавать разные значения anchor-scope для элементов <section>.

<section class="scoped">
  <div class="anchor">⚓︎</div>
  <div class="positioned">Positioned 1</div>
</section>

<section class="scoped">
  <div class="anchor">⚓︎</div>
  <div class="positioned">Positioned 2</div>
</section>

<section class="scoped">
  <div class="anchor">⚓︎</div>
  <div class="positioned">Positioned 3</div>
</section>

<div class="positioned2">Positioned 4</div>

<form>
  <fieldset>
    <legend>Select an <code>anchor-scope</code> value</legend>

    <input type="radio" id="all" name="scope" value="all" checked />
    <label for="all"><code>all</code></label>
    <input type="radio" id="my-anchor" name="scope" value="--my-anchor" />
    <label for="my-anchor"><code>--my-anchor</code></label>
    <input type="radio" id="none" name="scope" value="none" />
    <label for="none"><code>none</code></label>
  </fieldset>
</form>

CSS

Сначала мы задаём элементам-якорям два значения anchor-name, объявляя их якорями: --my-anchor и --another-anchor.

body {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 5px;
}

.scoped {
  padding: 20px;
  background: #eeeeee;
  border: 2px solid #dddddd;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: blue;
  width: fit-content;
  padding: 3px;
}

.positioned,
.positioned2 {
  border: 1px solid black;
  border-radius: 3px;
  width: fit-content;
  padding: 3px 6px;
  box-shadow: 3px 3px 3px rgb(0 0 0 / 0.2);
}

form {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.anchor {
  anchor-name: --my-anchor, --another-anchor;
}

Далее мы позиционируем элементы .positioned относительно элемента-якоря. Мы абсолютно позиционируем их, задаём значение --my-anchor для свойства position-anchor, чтобы связать их с якорем, и задаём значение right для свойства position-area, чтобы расположить их относительно якоря.

Элемент .positioned2 позиционируется аналогичным образом, но для его свойства position-anchor указывается другое доступное имя якоря — --another-anchor, — а сам элемент размещается bottom от якоря. Мы также задаём ему значение 5px для свойства bottom, чтобы при неработающем позиционировании относительно якоря он располагался внизу элемента <body>. Этот элемент не находится внутри элемента с заданной областью видимости, поэтому он будет позиционироваться относительно якоря только при определённых значениях anchor-scope, заданных для элементов с областью видимости, как объясняется далее.

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: right;
}

.positioned2 {
  position: absolute;
  bottom: 5px;
  position-anchor: --another-anchor;
  position-area: bottom;
}

Чтобы задавать anchor-scope элементам <section> при нажатии разных переключателей, мы используем JavaScript. Для краткости этот код скрыт.

const sections = document.querySelectorAll("section");
const form = document.querySelector("form");

function updateScope(val) {
  sections.forEach((section) => (section.style.anchorScope = val));
}

form.addEventListener("input", (e) => {
  updateScope(e.target.value);
});

updateScope("all");

Результат

Пример отображается следующим образом:

Посмотрите на первоначальное расположение позиционируемых элементов, когда элементам <section> задано anchor-scope: all, а затем выберите другие доступные значения anchor-scope, чтобы увидеть их действие. Вы должны заметить следующее:

• all: область видимости для позиционирования элементов относительно элементов-якорей, являющихся потомками элементов <section>, ограничена позиционируемыми элементами, которые сами являются потомками элементов <section>, независимо от значения anchor-name, используемого для их связывания. В результате позиционируемые элементы внутри элементов <section> («Positioned 1–3») ожидаемо позиционируются относительно якорей, но позиционируемый элемент вне элементов <section> («Positioned 4») не позиционируется относительно якоря. Он находится за пределами области видимости.
• --my-anchor: область видимости для позиционирования элементов относительно элементов-якорей, являющихся потомками элементов <section>, ограничена позиционируемыми элементами, которые сами являются потомками элементов <section>, только если для их связывания используется --my-anchor anchor-name. В результате позиционируемые элементы внутри элементов <section> («Positioned 1–3») ожидаемо позиционируются относительно якорей, а позиционируемый элемент вне элементов <section> («Positioned 4») также ожидаемо позиционируется относительно якоря. В первом случае позиционируемые элементы находятся внутри заданной области видимости, а во втором на позиционируемый элемент заданная область видимости не влияет, поскольку он использует имя якоря за пределами этой области (--another-anchor). Элемент «Positioned 4» позиционируется относительно последнего в исходном коде элемента-якоря с соответствующим именем.
• none: поскольку для элементов <section> область видимости якоря не задана, все позиционируемые элементы располагаются относительно последнего элемента-якоря в порядке исходного кода.

Спецификации

Совместимость с браузерами

См. также

• anchor-name
• position-anchor
• Модуль позиционирование с помощью якорей CSS
• Руководство Использование позиционирования с помощью якорей CSS