編集

Chrome 112

#Chrome #CSS

Chrome 112 がリリース。

#ネスティング CSS

Chrome 112 では、CSS のネストがサポートされました。

次のような記述が出来ます。

css
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

これは次の記述と同等です。

css
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

CSS のネストは、Edge 112 でもサポートされ、Safari 16.5 の Technology Preview にも含まれているため、Chrome や Safari のみサポートすれば良い環境では近い内に実務でも利用して良くなると思います。一方、それ以外の環境では Firefox をはじめ軒並みサポートされていないため、雑に利用できるようになるには、まだしばらくかかると思われます。

また、いくつかのフォーマッタは CSS のネストをまだサポート出来ていないため、利用には注意が必要です。

#参考文献

編集