Изменения синтаксиса позиционирования привязки

Уна Кравец
Мейсон Фрид
Mason Freed
X GitHub

Позиционирование привязки CSS было выпущено в Chrome 125 . Эта первая общедоступная версия API вызвала дополнительные дискуссии о синтаксисе. В результате этого обсуждения с момента запуска функции произошли некоторые небольшие изменения. Если вы уже пробовали позиционирование привязки CSS, в этом посте объясняются изменения, которые необходимо внести в ваш код, или информация о позиционировании привязки.

Существует два основных переименования свойств, о которых вам следует знать:

  1. inset-area переименована в position-area . Рабочая группа CSS отдала предпочтение этому переименованию, поскольку формулировка position- помогает вам запомнить, что это свойство применяется к позиционированному элементу, а не к элементу привязки. Это изменение начнется в Chrome 129 , а inset-area будет поддерживаться до Chrome 131 , чтобы у вас было время обновить все имеющиеся у вас демоверсии или статьи.
  2. position-try-options переименован в position-try-fallbacks . Это переименование поможет вам запомнить, что это всего лишь возврат к основной позиции, которая определяется базовыми стилями. Это изменение включено в Chrome 128 , а с версии 128 position-try-options больше не работает. Мы рекомендуем вам использовать сокращение (заменив его на position-try ), которое работает с Chrome 125 и не изменилось.

Есть также еще одно поведенческое изменение:

  • Функциональный синтаксис inset-area() удаляется из position-try . Поэтому используйте position-try-fallbacks: top вместо position-try-fallbacks: inset-area(top) . Это изменение также начнется в Chrome 129 .

Узнайте больше об использовании позиционирования привязки здесь: