Verbessertes CSS Nesting mit `CSSNestedDeclarations`

• Der CSS-Nesting-Standard wurde um die Schnittstelle CSSNestedDeclarations erweitert, wodurch Probleme durch Verschachtelung behoben werden
• Darüber hinaus gibt es Verbesserungen wie etwa, dass Deklarationen nach Stilregeln nicht länger nach oben verschoben werden
• Verfügbar ab Chrome 130, Firefox Nightly 132 und Safari Technology Preview 204

Probleme mit CSS Nesting vor der Einführung von CSSNestedDeclarations

• Es gab ein Problem, bei dem verschachtelte Deklarationen anders als erwartet funktionierten

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

• In Chrome-Versionen vor 130 wurde background-color nicht als green, sondern als red angewendet
• Nach dem Parsen wurde die tatsächlich angewendete Regel wie folgt umgewandelt

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

• background-color: green; wurde zusammen mit anderen Deklarationen nach oben verschoben, und die verschachtelte CSSMediaRule wurde in eine zusätzliche CSSStyleRule mit dem Selektor & eingeschlossen
• Der Grund war, dass die CSS-Engine Eigenschaften am Anfang einer Stilregel nicht von Eigenschaften unterscheiden konnte, die zwischen anderen Regeln erscheinen

Lösung – Einführung der Schnittstelle CSSNestedDeclarations

• Die CSS Working Group führte zur Lösung dafür die nested declarations rule ein
• Ab Chrome 130 werden aufeinanderfolgende verschachtelte Deklarationen automatisch in eine CSSNestedDeclarations-Instanz eingeschlossen
• Dadurch kann die Position der Deklaration background-color: green hinter der Deklaration background-color: red beibehalten werden
• CSSNestedDeclarations trifft auf dieselben Elemente und Pseudoelemente wie die übergeordnete Stilregel zu und verhält sich auch bei der Spezifität identisch

Auswirkungen auf Entwickler

• Ab Chrome 130 wurde CSS Nesting deutlich verbessert
• Wenn jedoch Deklarationen und verschachtelte Regeln gemischt verwendet wurden, muss der Code eventuell angepasst werden

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

• In diesem Code wird die Deklaration @starting-style durch die in CSSNestedDeclarations enthaltenen Deklarationen überschrieben, wodurch die Entry-Animation entfernt wird
• Er muss wie folgt geändert werden

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

• Bei der Verwendung von CSS Nesting funktioniert es in den meisten Browser-Versionen gut, wenn verschachtelte Deklarationen über verschachtelte Regeln platziert werden

Funktionserkennung für CSSNestedDeclarations

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // CSSNestedDeclarations를 지원하지 않음  
}  

Meinung von GN⁺

• CSS Nesting ist eine nützliche Funktion, die die Lesbarkeit und Wartbarkeit von Code verbessert. Es gab jedoch Probleme durch die gemischte Verwendung von verschachtelten Regeln und Deklarationen, und es ist erfreulich, dass dieses Problem mit der Einführung von CSSNestedDeclarations gelöst wurde.
• Vor der Einführung von CSSNestedDeclarations gab es Probleme damit, dass sich die Position verschachtelter Deklarationen änderte oder sie unbeabsichtigt überschrieben wurden. Das konnte für Entwickler verwirrend sein.
• Auch andere Lösungsansätze wie die Verwendung der Regel @nest oder das Einschließen verschachtelter Deklarationen in CSSStyleRule wurden erwogen, aber aus Gründen wie einer schlechteren Developer Experience nicht übernommen. Die Einführung der nested declarations rule scheint die passendste Lösung zu sein.
• Da CSSNestedDeclarations derzeit aber nur von einigen Browsern unterstützt wird, scheint es für Cross-Browser-Kompatibilität sicherer zu sein, verschachtelte Deklarationen stets über verschachtelte Regeln zu platzieren.
• Auch CSS-Präprozessoren wie PostCSS und Sass bieten Funktionen ähnlich zu CSSNestedDeclarations. Wenn du einen Präprozessor verwendest, könnte es sich lohnen, diese Funktionen zu nutzen.