Вложение CSS улучшается с помощью CSSNestedDeclarations, вложение CSS улучшается с помощью CSSNestedDeclarations

Брамус

Опубликовано: 8 октября 2024 г.

Чтобы исправить некоторые странные особенности вложенности CSS, рабочая группа CSS решила добавить интерфейс CSSNestedDeclarations в Спецификацию вложенности CSS . Благодаря этому дополнению, помимо некоторых других улучшений, объявления, следующие за правилами стиля, больше не сдвигаются вверх.

Эти изменения доступны в Chrome начиная с версии 130 и готовы к тестированию в Firefox Nightly 132 и Safari Technology Preview 204.

Поддержка браузера

  • Хром: 130.
  • Край: 130.
  • Фаерфокс: 132.
  • Сафари: не поддерживается.

Проблема с вложенностью CSS без CSSNestedDeclarations

Одна из проблем с вложенностью CSS заключается в том, что изначально следующий фрагмент не работает так, как вы могли ожидать:

.foo {     width: fit-content;      @media screen {         background-color: red;     }          background-color: green; }

Глядя на код, можно предположить, что элемент <div class=foo> имеет green background-color потому что background-color: green; декларация идет последней. Но в Chrome до версии 130 это не так. В тех версиях, где отсутствует поддержка CSSNestedDeclarations , background-color элемента — red .

После анализа фактического правила Chrome до 130 использований выглядит следующим образом:

.foo {     width: fit-content;     background-color: green;      @media screen {         & {             background-color: red;         }     } }

CSS после парсинга претерпел два изменения:

  • background-color: green; был перенесен вверх, чтобы присоединиться к двум другим декларациям.
  • Вложенный CSSMediaRule был переписан, чтобы его объявления были заключены в дополнительный CSSStyleRule с использованием селектора & .

Еще одно типичное изменение, которое вы здесь увидите, — это отбрасывание парсером свойств, которые он не поддерживает.

Вы можете проверить «CSS после синтаксического анализа» самостоятельно, прочитав cssText из CSSStyleRule .

Попробуйте сами на этой интерактивной игровой площадке :

Почему этот CSS переписан?

Чтобы понять, почему произошла эта внутренняя перезапись, вам необходимо понять, как это CSSStyleRule представлено в объектной модели CSS (CSSOM).

В Chrome до версии 130 фрагмент CSS, опубликованный ранее, сериализуется в следующее:

↳ CSSStyleRule   .type = STYLE_RULE   .selectorText = ".foo"   .resolvedSelectorText = ".foo"   .specificity = "(0,1,0)"   .style (CSSStyleDeclaration, 2) =     - width: fit-content     - background-color: green   .cssRules (CSSRuleList, 1) =     ↳ CSSMediaRule     .type = MEDIA_RULE     .cssRules (CSSRuleList, 1) =       ↳ CSSStyleRule         .type = STYLE_RULE         .selectorText = "&"         .resolvedSelectorText = ":is(.foo)"         .specificity = "(0,1,0)"         .style (CSSStyleDeclaration, 1) =           - background-color: red

Из всех свойств, которыми обладает CSSStyleRule , в данном случае актуальны следующие два:

  • Свойство style , которое представляет собой экземпляр CSSStyleDeclaration представляющий объявления.
  • Свойство cssRules , представляющее собой CSSRuleList , содержащее все вложенные объекты CSSRule .

Поскольку все объявления из фрагмента CSS попадают в свойство style CSStyleRule , происходит потеря информации. При взгляде на свойство style не ясно, что background-color: green был объявлен после вложенного CSSMediaRule .

↳ CSSStyleRule   .type = STYLE_RULE   .selectorText = ".foo"   .style (CSSStyleDeclaration, 2) =     - width: fit-content     - background-color: green   .cssRules (CSSRuleList, 1) =     ↳ …

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

Что касается объявлений внутри CSSMediaRule которые внезапно оказались заключены в CSSStyleRule : это потому, что CSSMediaRule не был разработан для содержания объявлений.

Поскольку CSSMediaRule может содержать вложенные правила, доступные через свойство cssRules , объявления автоматически заключаются в CSSStyleRule .

↳ CSSMediaRule   .type = MEDIA_RULE   .cssRules (CSSRuleList, 1) =     ↳ CSSStyleRule       .type = STYLE_RULE       .selectorText = "&"       .resolvedSelectorText = ":is(.foo)"       .specificity = "(0,1,0)"       .style (CSSStyleDeclaration, 1) =         - background-color: red

Как это решить?

Рабочая группа CSS рассмотрела несколько вариантов решения этой проблемы.

Одним из предложенных решений было обернуть все пустые объявления во вложенный CSSStyleRule с помощью селектора вложенности ( & ). Эта идея была отвергнута по разным причинам, включая следующие нежелательные побочные эффекты & обессахаривания :is(…) :

  • Это влияет на специфику. Это связано с тем, что :is() перенимает специфику своего наиболее конкретного аргумента.
  • Это не очень хорошо работает с псевдоэлементами в исходном внешнем селекторе. Это связано с тем, что :is() не принимает псевдоэлементы в своем аргументе списка селекторов.

Возьмем следующий пример:

#foo, .foo, .foo::before {   width: fit-content;   background-color: red;    @media screen {     background-color: green;   } }

После анализа этого фрагмента в Chrome до 130 он становится таким:

#foo, .foo, .foo::before {   width: fit-content;   background-color: red;    @media screen {     & {       background-color: green;     }   } }

Это проблема, поскольку вложенный CSSRule с селектором & :

  • Сглаживается до :is(#foo, .foo) , попутно удаляя .foo::before из списка селектора.
  • Имеет специфичность (1,0,0) , что затрудняет последующую перезапись.

Вы можете проверить это, проверив, во что сериализуется правило:

↳ CSSStyleRule   .type = STYLE_RULE   .selectorText = "#foo, .foo, .foo::before"   .resolvedSelectorText = "#foo, .foo, .foo::before"   .specificity = (1,0,0),(0,1,0),(0,1,1)   .style (CSSStyleDeclaration, 2) =     - width: fit-content     - background-color: red   .cssRules (CSSRuleList, 1) =     ↳ CSSMediaRule       .type = MEDIA_RULE       .cssRules (CSSRuleList, 1) =         ↳ CSSStyleRule           .type = STYLE_RULE           .selectorText = "&"           .resolvedSelectorText = ":is(#foo, .foo, .foo::before)"           .specificity = (1,0,0)           .style (CSSStyleDeclaration, 1) =             - background-color: green

Визуально это также означает, что background-color .foo::before red а не green .

Другой подход, который рассматривала рабочая группа CSS, заключался в том, чтобы заключить все вложенные объявления в правило @nest . Это было отклонено из-за ухудшения опыта разработчиков, которое это могло бы вызвать.

Знакомство с интерфейсом CSSNestedDeclarations

Решением, на котором остановилась рабочая группа CSS, является введение правила вложенных объявлений .

Это правило вложенных объявлений реализовано в Chrome, начиная с Chrome 130.

Поддержка браузера

  • Хром: 130.
  • Край: 130.
  • Фаерфокс: 132.
  • Сафари: не поддерживается.

Введение правила вложенных объявлений изменяет синтаксический анализатор CSS для автоматического переноса последовательных напрямую вложенных объявлений в экземпляр CSSNestedDeclarations . При сериализации этот экземпляр CSSNestedDeclarations попадает в свойство cssRules CSSStyleRule .

Снова возьмем в качестве примера следующий CSSStyleRule :

.foo {   width: fit-content;    @media screen {     background-color: red;   }        background-color: green; }

При сериализации в Chrome 130 или новее это выглядит так: 

↳ CSSStyleRule   .type = STYLE_RULE   .selectorText = ".foo"   .resolvedSelectorText = ".foo"   .specificity = (0,1,0)   .style (CSSStyleDeclaration, 1) =     - width: fit-content   .cssRules (CSSRuleList, 2) =     ↳ CSSMediaRule       .type = MEDIA_RULE       .cssRules (CSSRuleList, 1) =         ↳ CSSNestedDeclarations           .style (CSSStyleDeclaration, 1) =             - background-color: red     ↳ CSSNestedDeclarations       .style (CSSStyleDeclaration, 1) =         - background-color: green

Поскольку правило CSSNestedDeclarations заканчивается в CSSRuleList , синтаксический анализатор может сохранить позицию объявления background-color: green : после объявления background-color: red (которое является частью CSSMediaRule ).

Более того, наличие экземпляра CSSNestedDeclarations не приводит к каким-либо неприятным побочным эффектам, вызванным другими, теперь отброшенными потенциальными решениями: правило вложенных объявлений соответствует тем же элементам и псевдоэлементам, что и его родительское правило стиля, с той же специфичностью. поведение.

Доказательством этого является обратное чтение cssText CSSStyleRule . Благодаря правилу вложенных объявлений он такой же, как и входной CSS: 

.foo {   width: fit-content;    @media screen {     background-color: red;   }        background-color: green; }

Что это значит для вас

Это означает, что вложенность CSS стала намного лучше с Chrome 130. Но это также означает, что вам, возможно, придется просмотреть часть вашего кода, если вы чередуете голые объявления с вложенными правилами.

Возьмем следующий пример, в котором используется замечательный @starting-style 

/* This does not work in Chrome 130 */ #mypopover:popover-open {   @starting-style {     opacity: 0;     scale: 0.5;   }    opacity: 1;   scale: 1; }

До Chrome 130 эти декларации были подняты. В итоге вы получите opacity: 1; и scale: 1; объявления, входящие в CSSStyleRule.style , за которыми следует CSSStartingStyleRule (представляющий правило @starting-style ) в CSSStyleRule.cssRules .

Начиная с Chrome 130, объявления больше не поднимаются, и в итоге вы получаете два вложенных объекта CSSRule в CSSStyleRule.cssRules . По порядку: один CSSStartingStyleRule (представляющий правило @starting-style ) и один CSSNestedDeclarations , содержащий opacity: 1; scale: 1; декларации.

Из-за этого измененного поведения объявления @starting-style перезаписываются теми, которые содержатся в экземпляре CSSNestedDeclarations , тем самым удаляя анимацию ввода.

Чтобы исправить код, убедитесь, что блок @starting-style идет после обычных объявлений. Вот так: 

/* This works in Chrome 130 */ #mypopover:popover-open {   opacity: 1;   scale: 1;    @starting-style {     opacity: 0;     scale: 0.5;   } }

Если при использовании вложенности CSS вы держите вложенные объявления поверх вложенных правил, ваш код в основном работает нормально со всеми версиями всех браузеров, поддерживающих вложенность CSS.

Наконец, если вы хотите определить доступность CSSNestedDeclarations , вы можете использовать следующий фрагмент JavaScript: 

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {   // CSSNestedDeclarations is not available }