米GoogleがChromeの最新バージョンとなるver112を現地時間4月4日にリリースしました。今回のバージョンでの大きなアップデートは３つ。cssのnesting rulesのサポート、dialog要素に初期フォーカスを設定するアルゴリズムの更新、高速化を目的としたService WorkerのNo-op Fetch()のスキップ が主なアップデートとして発表されています。

Chrome112 リリース（外部リンク）

css ネストのサポート

CSSプリプロセッサの機能の１つが言語に組み込まれたということで、少し気になりましたので確認の為、まとめておきます。サポート前とサポート後のサンプルが出ていました。

ネストサポート前

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

ネストサポート前は個別に宣言する必要があり、Chromeの解説ページでは、オーサリングエクスペリエンスがバラバラになっていると表現していますが、まったくまとまりがない印象です。

ネストサポート後

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

ネストサポート後は、グループ化されひとまとまりになっていますので、コードの視認性も良く、メンテナンス性も向上しています。ファイルのサイズ縮小にも貢献してくれそうですし、何よりリファクタリングを行う際に、各段にリファクタしやすいコードになっています。

Chrome112にアップデート

色々とみていきたいのですが、時間も限りある状況ですので、さっそくChrome112にアップデートしておきます。

Chrome111.0からのアップデート
Chrome112にアップデート完了

今回のアップデートでバグの修正が16件ほどあり、深刻なバグHighが2件あったものが改修されているそうですので、できるだけ早めにアップデートしておいても良いかと思います。

今日も一日頑張りましょう！