2023 年 11 月に安定版またはベータ版のウェブブラウザに導入された興味深い機能の一部をご紹介します。
安定版のブラウザのリリース
2023 年 11 月、Firefox 120 のブラウザは安定版が 1 つだけリリースされていました。この投稿では、これがウェブ プラットフォームに与える影響について説明します。
<source> 要素での media 属性のサポート
Firefox で <source> 要素の media 属性のサポートが再導入されました。<audio> 要素と <video> 要素を含むようにサポートが拡張されました。このリリースにより、メディア属性は <audio>、<video>、<picture> 内の <source> 要素で使用できるようになります。
media 属性は Chrome ですでに Safari でもサポートされるようになるため、まもなくすべてのエンジンでレスポンシブ HTML 動画とレスポンシブ オーディオがサポートされます。
CSS のカラー light-dark() 関数
Firefox で CSS カラー関数 light-dark() がサポートされるようになりました。つまり、prefers-color-scheme メディア機能を使用せずに、ライトとダークのパターンの色を設定できます。
lh ユニットと rlh ユニット
Firefox では、CSS ユニット lh と rlh がサポートされています。これらのユニットを使用すると、要素の行の高さに関連する値を設定できます。これは、背景画像とテキストの位置を合わせる場合に便利です。このリリースでは、3 つの主要なエンジンすべてでこれらの UNT を相互運用できるようになりました。
対応ブラウザ
- 109
- 109
- 120
- 16.4
HTTP 103 早期ヒント
Firefox では 103 Early Hints HTTP 情報レスポンス ステータス コード 103 がサポートされるようになりました。
ベータ版ブラウザのリリース
ベータ版のブラウザでは、次の安定版のブラウザで使用できる機能をプレビューできます。一般公開の前に、サイトに影響を及ぼす可能性のある新機能や削除をテストする絶好の機会です。新しいベータ版は 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() を相互運用できるようになりました。
ウェブの最新情報シリーズの一部