このページは Cloud Translation API によって翻訳されました。

3 月にウェブプラットフォームを導入

2022 年 3 月に安定版とベータ版のウェブブラウザに導入された興味深い機能の一部をご紹介します。

Rachel Andrew

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

3 月に、Chrome 99、Chrome 100、Firefox 98、Safari 15.4 が安定版になりました。これにより、プラットフォームに多くの新機能が導入されました。これらの機能の多くは、3 つのブラウザエンジンすべてで利用可能になりました。今回の投稿では、ブラウザ間の相互運用性を実現する追加機能に重点を置きましたが、各エンジンに追加されたすべての機能については、リリースノートをご覧ください。

Chrome 99 と Safari 15.4 には、カスケードレイヤが含まれています。@layer アットルールはカスケードレイヤを定義し、特定性を制御するのに役立ちます。これで、Firefox に加えて、3 つのブラウザエンジンすべてでカスケードレイヤを利用できるようになりました。カスケードレイヤについて詳しくは、カスケードレイヤがブラウザに登場をご覧ください。

対応ブラウザ

ソース

Chrome 100 には、CSS mix-blend-mode プロパティの新しい値 plus-lighter が含まれています。この値は、ピクセルのすべてまたは一部に同じ値がある場合に、2 つの要素をクロスフェードする場合に便利です。これにより解決される問題について詳しくは、2 つの DOM 要素のクロスフェードは現在不可能をご覧ください。

対応ブラウザ

Safari 15.4 には contain プロパティが追加され、CSS を含むことができます。

対応ブラウザ

ソース

Safari 15.4 には、accent-color も追加されています。これにより、一部のフォームコントロールで使用されるアクセントカラーを制御できます。

対応ブラウザ

ソース

Firefox 98 と Safari 15.4 で、ダイアログボックスを表す <dialog> 要素が導入されました。

対応ブラウザ

ソース

Safari 15.4 では、:focus-visible 疑似クラスのサポートも完了しました。これに関する実装作業は Igalia が行いました。

対応ブラウザ

ソース

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

ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。リリース前に、サイトに影響する可能性がある新機能や削除内容をテストできます。

3 月の新しいベータ版は、Chrome 101 と Firefox 99 です。

Chrome 101 ベータ版には、hwb カラー表記が含まれています。色相、白さ、黒度に応じて色を指定します。他の色の表記と同様に、オプションのアルファコンポーネントで不透明度を指定します。

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

対応ブラウザ

ソース

Firefox 99 には、Navigator インターフェースの pdfViewerEnabled プロパティが含まれています。このプロパティは、ブラウザが PDF ファイルのインライン表示をサポートしているかどうかを示します。

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

対応ブラウザ

ソース

これらのベータ版機能は、安定版のブラウザでまもなく提供される予定です。

ウェブ初心者向けシリーズの一部

3 月にウェブ プラットフォームを導入

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

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

3 月にウェブプラットフォームを導入