Кратко

  • Первый публичный черновик Cascade Level 6, опубликованный в декабре 2021 года, предложил @scope и учёт близости корня; тогда специфичность селектора корня добавлялась к внутренним правилам.
  • Тексты 2023 и 2024 годов развели эти функции: корень задаёт границу, его специфичность не передаётся внутрь автоматически, а расстояние участвует в каскаде на своём этапе.

Чтобы покрасить внутреннюю кнопку в коралловый цвет, можно перечислить всех её предков в селекторе. Перенесите карточку — и адрес станет неверным. Инструменты для компонентов иногда ставят особую метку на каждый элемент и приписывают её каждому селектору. Краска остаётся в нужной комнате, зато даже горшок с цветком вынужден носить пропуск. Браузер уже видит дерево элементов; естественно было дать ему возможность распознавать границу комнаты по её входу.

Первый публичный черновик W3C от 21 декабря 2021 года показал именно такую систему с повторяющимися data-scope и предложил @scope как другой путь. Автор указывает корень, при необходимости нижнюю границу и пишет обычные правила внутри блока. Документ обсуждал и близость: если два ограниченных правила достигают одного элемента, браузер может сосчитать шаги от него до каждого корня. Длину дороги не требуется превращать в длину строки селектора.

Первоначальный забор, однако, имел привилегии. Селектор корня прибавлял свою специфичность внутренним правилам. У @scope (#hero) простое правило для img получало вес идентификатора. Табличка у двери повышала в чине всю мебель. Рабочая группа ещё обсуждала, как близость должна соотноситься с другими критериями каскада. Поэтому при чтении старых черновиков стоит смотреть на их арифметику: знакомая форма записи не гарантирует знакомый результат.

Черновик от 21 марта 2023 года убрал эту прибавку. В нём @scope (#hero) { img { ... } } и :where(#hero) img { ... } получают одну и ту же специфичность (0,0,1). #hero обозначает начало области, а очко даёт внутренний img. Граница может быть точной, не превращая каждое правило в начальника соседей. Автор маленькой карточки получает нормальную возможность выбрать для своей кнопки коралловый цвет.

С помощью to (...) область внешней карточки можно закончить перед вложенным участком. Синий валик останавливается у порога. Если области пересекаются и правила всё-таки встречаются на одном элементе, близость корня играет роль в предусмотренном каскадом месте. Речь о шагах по дереву элементов, а не о сантиметрах на экране. Близкая комната не получает права нарушать все остальные уровни приоритета.

Черновик от 6 сентября 2024 года уточнил, что элемент нижней границы сам остаётся за пределами области, а близость измеряется один раз от одного корня до элемента, к которому относится правило. История изменений фиксирует отказ от сильной близости и от прежней прибавки специфичности корня. Кроме того, правила, определяющие имена, такие как @keyframes, @font-face и @layer, сохраняют глобальный смысл даже внутри @scope; ограничиваться областью могут содержащиеся в них правила стилей. Это ограда для применения стилей, а не суверенное государство всех имён CSS.

Хронология W3C датирует выпуски 2021, 2023 и 2024 годов, а заметка рабочей группы CSS за 2024 год называет @scope новой темой этого уровня. Интересен не сам факт постройки забора, а то, как из него убрали лишнюю власть и объяснили расстояние между соседями. Внешние кнопки остаются синими, внутренняя карточка красит свою в коралловый. Пропуск нужен у входа, а не на каждом стуле.