CSSの記述に革命をもたらす？　「@layer」をサポートした「Chrome 99」がベータ版に

「Google Chrome 99」のベータ版

　米Googleは2月3日（現地時間）、「Google Chrome 99」のベータ版に追加された新機能を発表した。「Chrome 99」では、CSSカスケードレイヤー（CSS Cascade Layers）と、入力要素のピッカーをコードで呼び出す機能が新たにサポートされる。

CSSカスケードレイヤー

　CSSカスケードレイヤーは、スタイルをペイントソフトのような階層（レイヤー）で整理できるようにした仕様。レイヤーの順序を入れ替えたり、コメントアウトして特定のレイヤーを一時的に無効化したりといった調整が行いやすくなる。外部スタイルシートをインポートしてレイヤーにすることも可能。

/* レイヤーの適用順序を指定。入れ替えも簡単 */
@layer
    reset,
    default,
    theme,
    /* components, 一時無効化 */
    override; /* 最後に適用される */

/* 外部 CSS をインポートしてレイヤーに */
@import url(reset.css) layer(reset);
@import url(theme.css) layer(theme);
@import url(default.css) layer(default);

@components { …… }

/* default レイヤーに追加のスタイル */
@layer default {
    @layer sample { /* 入れ子も可能 */ }
}

@layer override { …… }

　従来は、スタイルの適用順序を調整しようとすると、ソースの記述順を大幅に改めたり、セレクターや「!important」などを巧みに用いる必要があるが、カスケードレイヤーがあればその手間が省ける。意図しない不具合の発生も抑えられるだろう。

入力要素のピッカー

　HTMLInputElementオブジェクトの中には、値を選択するためのピッカーを持つものがある。しかし、そのピッカーはユーザーの操作でしか表示できず、コードで呼び出すことはできない。Webブラウザーの中にはclick()メソッドでピッカーを表示できるものもあるが、統一された仕様ではなかった。

日付け（input type="date"など）のピッカー

　「Chrome 99」ではshowPicker()メソッドを利用することで、コードだけでピッカーを呼び出せる。

そのほかの改善

　そのほかにも、Webアプリ（PWA）のダークモード対応が「Origin Trials」テストに追加。一方で、手書きの文字をテキストデータとして認識する「Handwriting Recognition API」が「Origin Trials」テストを卒業し、既定で有効化された。Webアプリのタイトルバー部分を開発者がカスタマイズする機能（Window Controls Overlay）も正式な機能として導入される。

Webアプリのタイトルバー部分を開発者がカスタマイズ（手前のウィンドウ）

　「Google Chrome」ベータ版はWindows/Mac/Linux/Android/iOSに対応するフリーソフトで、現在、同社のWebサイトからダウンロード可能。Windows版は64bit版を含むWindows 7/8/8.1/10で利用できる。