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 121Chrome 120Safari 17.2が安定版となりました。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

CSSネストの緩和解析

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

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

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

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

ブラウザサポート:
  • Google Chrome120サポート済み
  • Microsoft Edge120サポート済み
  • Mozilla Firefox×未サポート
  • Safari17.2サポート済み

:has()セレクタ

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

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

ブラウザサポート:
  • Google Chrome105サポート済み
  • Microsoft Edge105サポート済み
  • Mozilla Firefox121サポート済み
  • Safari15.4サポート済み

CSSカスタムハイライトAPI

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

ブラウザサポート:
  • Google Chrome105サポート済み
  • Microsoft Edge105サポート済み
  • Mozilla Firefox👁プレビュー
  • Safari17.2サポート済み

CloseWatcher API

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

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

ブラウザサポート:
  • Google Chrome120サポート済み
  • Microsoft Edge120サポート済み
  • Mozilla Firefox×未サポート
  • Safari×未サポート

text-wrapプロパティのbalancestable

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

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

text-wrap: balance

ブラウザサポート:
  • Google Chrome114サポート済み
  • Microsoft Edge114サポート済み
  • Mozilla Firefox121サポート済み
  • Safari👁プレビュー

text-wrap: stable

ブラウザサポート:
  • Google Chrome×未サポート
  • Microsoft Edge×未サポート
  • Mozilla Firefox121サポート済み
  • Safari👁プレビュー

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

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

ブラウザサポート:
  • Google Chrome77サポート済み
  • Microsoft Edge79サポート済み
  • Mozilla Firefox121サポート済み
  • Safari16.4サポート済み

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

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

ブラウザサポート:
  • Google Chrome113サポート済み
  • Microsoft Edge113サポート済み
  • Mozilla Firefox112サポート済み
  • Safari17.2サポート済み

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

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

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

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