2023 年 11 月に安定版およびベータ版のウェブブラウザでリリースされた興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2023 年 11 月にリリースされた安定版は、Firefox 120 の 1 つのみでした。この投稿では、ウェブ プラットフォームへの影響について説明します。
<source> 要素の media 属性のサポート
Firefox では、<source> 要素の media 属性が再びサポートされるようになりました。サポートが拡張され、<audio> 要素と <video> 要素が含まれるようになりました。このリリースでは、メディア属性は <audio>、<video>、<picture> 内の <source> 要素で使用可能になります。
media 属性が Chrome でサポートされ、Safari にもすでに含まれているため、まもなくすべてのエンジンでレスポンシブ HTML の動画と音声がサポートされます。
CSS の Color light-dark() 関数
Firefox で CSS Color 関数 light-dark() がサポートされるようになりました。つまり、prefers-color-scheme メディア機能を使わずにライトモードとダークモードの色を設定できます。
lh と rlh のユニット
Firefox では、CSS 単位 lh と rlh がサポートされています。これらの単位を使用すると、要素の行の高さに対応して値を設定できます。これは、背景画像をテキストに合わせて配置する場合に役立ちます。このリリースにより、これら 3 つの主要なエンジンのすべてで相互運用が可能になります。
対応ブラウザ
- 109
- 109
- 120
- 16.4
HTTP 103 早期ヒント
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() の相互運用が可能になりました。