CSSNestedDeclarations によって改善された CSS Nesting

• CSS ネスト（CSS Nesting）仕様に CSSNestedDeclarations インターフェースが追加され、ネストによって生じていた問題が解決された
• このほか、スタイルルールの後に来る宣言がそれ以上前方へ移動しなくなるなどの改善もある
• Chrome 130、Firefox Nightly 132、Safari Technology Preview 204 から適用されている

CSSNestedDeclarations 導入前の CSS ネストの問題

• ネストされた宣言が予想と異なる動作をする問題があった

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

• Chrome 130 より前のバージョンでは、background-color は green ではなく red が適用される
• パース後に実際に適用されるルールは次のように変更される

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

• background-color: green; は他の宣言と一緒に前方へ移動し、ネストされた CSSMediaRule は & セレクターを使う追加の CSSStyleRule でラップされる
• これは CSS エンジンが、スタイルルールの先頭に現れるプロパティと、別のルールの間に現れるプロパティを区別できないため

解決策 - CSSNestedDeclarations インターフェースの導入

• CSS ワーキンググループはこれを解決するために、ネストされた宣言ルール（nested declarations rule）を導入した
• Chrome 130 から、連続してネストされた宣言は自動的に CSSNestedDeclarations インスタンスでラップされる
• これにより、background-color: green 宣言の位置を background-color: red 宣言の後ろに保てる
• CSSNestedDeclarations は親スタイルルールと同じ要素および疑似要素に一致し、詳細度の挙動も同じ

開発者への影響

• Chrome 130 から CSS ネストは大きく改善された
• ただし、宣言とネストされたルールを混在させている場合はコードの修正が必要になることがある

/* Chrome 130では動作しない */  
#mypopover:popover-open {  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;   
  }  
  opacity: 1;  
  scale: 1;  
}  

• 上のコードでは、@starting-style の宣言が CSSNestedDeclarations に含まれる宣言によって上書きされ、entry animation が削除される
• 次のように修正する必要がある

/* Chrome 130では動作する */  
#mypopover:popover-open {  
  opacity: 1;  
  scale: 1;  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;  
  }  
}  

• CSS ネストを使う際は、ネストされた宣言をネストされたルールより上に置けば、ほとんどのブラウザ版でうまく動作する

CSSNestedDeclarations の機能検出

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // CSSNestedDeclarationsをサポートしていない  
}  

GN⁺ の見解

• CSS ネストはコードの可読性と保守性を高めてくれる便利な機能だ。しかし、ネストされたルールと宣言の混在による問題があったが、CSSNestedDeclarations の導入によってこの問題が解決されてよかった。
• CSSNestedDeclarations 導入前は、ネストされた宣言の位置が変更されたり、意図せず上書きされたりする問題があった。これは開発者を混乱させうる点だった。
• @nest ルールを使ったり、ネストされた宣言を CSSStyleRule でラップしたりする別の解決策も検討されたが、開発体験の低下などの理由で採用されなかった。ネストされた宣言ルールの導入が最も適切な解決策に見える。
• ただし、CSSNestedDeclarations はまだ一部のブラウザでしかサポートされていないため、クロスブラウジングのためには、ネストされた宣言を常にネストされたルールより上に置くのが安全そうだ。
• PostCSS、Sass などの CSS プリプロセッサでも CSSNestedDeclarations に似た機能を提供している。プリプロセッサを使っているなら、その機能を活用してみるとよいだろう。