2023年12月のWebプラットフォームの新機能

このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。

以下の内容は、2023年12月19日に公開された記事「New to the web platform in December」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。

2023年12月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。

安定版ブラウザのリリース

2023年12月にはFirefox 121、Chrome 120とSafari 17.2が安定版となりました。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

CSSネストの緩和解析

Chrome 120とSafari 17.2では、CSSネストの解析が緩和されました。Firefoxはこれをバージョン117からサポートしており、すべての主要エンジンが緩和解析をサポートしていることになります。

<details>要素によるアコーディオン

Chrome 120とSafari 17.2では、<details>要素のname属性がサポートされています。これにより、いくつかの<details>要素をグループ化することで、開閉が排他的なアコーディオンコンポーネントを制作できます。

詳しくはExclusive Accordionをご覧ください。

:has()セレクタ

Firefox 121はCSSの:has()セレクタをサポートしました。このリリースにより、すべての主要なエンジンで:has()が相互運用可能になりました。

詳しくは:has(): the family selectorをご覧ください。

CSSカスタムハイライトAPI

Safari 17.2はCSSカスタムハイライトAPIをサポートしており、::selectionのような標準のハイライト擬似クラスを拡張して、テキスト範囲やそのスタイルを設定できます。

CloseWatcher API

Chrome 120は、（モーダルやポップアップなどを）閉じるリクエストを受信し応答するための新しいAPI、CloseWatcher APIをサポートしています。そのリクエストは、デスクトップ環境ではESCキー、Androidでは戻るジェスチャーやボタンによってトリガーされます。

同APIに加えて、Chrome 120ではAndroidの戻るボタンに応答するよう<dialog>とpopover属性がアップグレードされました。

text-wrapプロパティのbalanceとstable

Firefox 121は、text-wrapプロパティの値でbalanceとstableをサポートしています。balanceは、見出しのような短いコンテンツのブロックに有効で、より見やすく読みやすいテキストを作成します。stableは、編集可能なコンテンツの編集中、カーソルより前の内容が安定するようにします。

詳しくはCSS text-wrap: balanceをご覧ください。

text-wrap: balance

text-wrap: stable

<iframe>要素の遅延読み込み

Firefox 121は<iframe>要素でloading属性をサポートしました。これは、iframeの遅延読み込みがすべての主要なエンジンでサポートされたことを意味します。

イージングに用いるlinear()関数

Safari 17.2は、バウンスやスプリングといった効果の作成に使用できるlinear()関数もサポートしています。

ベータ版ブラウザのリリース

ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 122、Chrome 121とSafari 17.3です。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。

Firefox 122とChrome 121では、HTMLSelectElementのshowPicker()メソッドがサポートされています。これは、要素が選択されたときに表示されるのと同じピッカーですが、ボタンが押されたときや他のユーザー操作をトリガーにできます。

Chrome 121では、スクロールバーをスタイリングするためのプロパティ、scrollbar-colorとscrollbar-widthがサポートされています。また、SVGに対するCSSのマスキングが改善されたほか、スペルミスや文法的に正しくないテキストをハイライトするのに用いられる擬似要素もサポートされました。