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

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

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

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

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

2023年11月に安定版となったのは唯一、Firefox 120だけでした。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

<source>要素におけるmedia属性のサポート

Firefoxは、<source>要素のmedia属性を再びサポートしました。これに伴い、<audio>要素と<video>要素にサポートが拡張されます。今回のリリースで<audio>、<video>、<picture>要素内の<source>要素でmedia属性を使用できるようになりました。

media属性はChromeで既にサポートされており、Safari も同様です。そのため、すべてのエンジンでレスポンシブなHTML動画と音声がサポートされることになります。

CSSのlight-dark()関数

Firefoxは、CSSのカラー関数であるlight-dark()をサポートしました。つまり、prefers-color-schemeメディア機能を使用せずに、ライトモードとダークモード向けの色を設定できるようになりました。

2つの単位、lhとrlh

Firefoxは、CSS単位のlhとrlhをサポートしました。これらの単位を使用すると、ある要素の行の高さを基準とした値を設定できます。これは、背景画像とテキストの位置を揃える場合に便利です。このリリースで、3つの主要なエンジンすべてで相互運用が可能になりました。

HTTP 103 Early Hints

Firefoxは103 Early Hints HTTPレスポンスステータス コードをサポートしました。

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

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

Chrome 120とSafari 17.2には、CSSネストの緩和解析が含まれています。

Chrome 120 では-webkit-mask*プロパティの接頭辞が削除され、現行の仕様に適合します。これにはmask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size、mask-compositeおよびmaskの一括指定が含まれます。ローカルのmask-image参照がサポートされ、シリアル化が仕様に一致し、許容する値は仕様と一致するようになりました。

Chrome 120とSafari 17.2では、<details>要素のname属性がサポートされました。

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