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

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

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

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

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

2023年3月にはFirefox 111、Chrome 111、Safari 16.4が安定版となりました。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

HTMLのグローバル属性

Firefox 111では、HTMLについて、いくつかの便利なグローバル属性のサポートが追加されました。autocapitalize属性は、ユーザーが仮想キーボードで入力している際に、テキストを自動的に大文字にするかどうかを制御します。

translate属性は、ページがローカライズされる際に、その要素が翻訳されるべきかどうかを示します。

Origin Private File System（OPFS）

Firefoxは、File System Access APIを使用する際の、Origin Private File System（OPFS）をサポートしました。OPFSの詳細については、The origin private file systemをご覧ください。

View Transitions API

Chrome 111ではView Transitions APIが追加され、ビューのスナップショットを取得し状態間で重複なくDOMを変化させることで、シングルページアプリケーション（SPA）で洗練されたトランジションをよりシンプルに作成できます。

詳しくは、SPA view transitions land in Chrome 111という記事でご確認ください。

CSSの新しい色空間や色関数

また、Chrome 111には、Web上で色を扱うための全く新しい方法が含まれています。RGB以外の色にアクセスする色空間やcolor()関数、color-mix()関数がサポートされました。詳しくは、High definition CSS color guideならびにcolor-mix()に関するブログ記事をご覧ください。

Chromeにはまた、この新しい色に関する機能を利用するのに役立つ新たなDevToolsも含まれています。

なお、新しい色関数のcolor()、lab()、lch()、oklab()、oklch()はFirefox 111でテストできますが、現時点では環境設定でlayout.css.more_color_4.enabledを有効化する必要があります。

:nth-child()による選択を強化

Chrome 111では、:nth-child()と:nth-last-child()にセレクタのリストを渡す機能が追加されました。これについてはMore control over :nth-child() selections with the of S syntaxという記事で、詳細や事例を知ることができます。

Media Session APIによるスライド表示のサポート

最後に、Chrome 111の追加機能として、Media Session APIのスライド表示アクションのpreviousslideとnextslideを紹介します。

Safariでサポートされた擬似クラス

Safari 16.4は、Webプラットフォームにとって、素晴らしいリリースです。

この記事では、追加された機能のすべてをカバーすることはできませんので、Safari 16.4のリリースノートにある完全なリストをご確認ください。

このリリースでは:user-invalid、:user-valid、:dir()、:modal、:fullscreenといったCSS疑似クラスのサポートが追加されています。

メディアクエリにおける新しい範囲記法

今回のSafariのリリースにより、メディアクエリのための素晴らしく優れた便利な範囲記法が、3つのエンジンすべてで相互運用可能になりました。この記法の例については、Chromeがサポートした当時に公開された記事のNew syntax for range media queries in Chrome 104でご覧ください。

CSSのプロパティと値

Safari 16.4では@propertyがサポートされ、スタイルシートで直接CSSカスタムプロパティを登録できるようになりました。これについては@property: giving superpowers to CSS variablesで詳しく説明しています。

CSS APIのサポート

CSS Typed OMのサポートは、素晴らしい機能が追加され続けているCSSにおいて注目に値します。このAPIは、CSSの値を文字列としてではなく、型付きJavaScriptオブジェクトとして提供します。これにより、JavaScriptからCSSを扱うことが容易になり、既存の方法よりパフォーマンスが向上します。

また、CSSStyleSheet()による構築可能なスタイルシートもサポートされています。これにより、ドキュメントとそのShadow DOMサブツリーのあいだでスタイルシートを共有することができます。Safariがサポートしたことで、構築可能なスタイルシートは3つのエンジンすべてでサポートされました。

WebプッシュおよびバッジAPI

SafariがバッジAPIとともにWebプッシュをサポートしたことは、アプリ開発者にとっては大きなニュースです。とりわけ、このバージョンにより、すべての主要なエンジンでプッシュ通知がサポートされたことを意味します。

Import maps

また、相互運用性の向上をもたらす機能としてJavaScriptのImport mapsのサポートが追加され、ES Modulesのインポートがより簡単になりました。

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

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

Firefox 112ではinert属性がサポートされ、この便利な属性がすべてのエンジンで利用できるようになります。inert属性については、Introducing inertで詳しく説明されています。また、Firefoxではイージング関数のlinear()のサポートも可能になります。

Chrome 112とSafari 16.5では、多くの開発者が待ち望んでいるCSS Nestingのサポートが追加されます。

Chrome 112では、animation-composition のサポートも追加されています。このプロパティがどのように機能するかは、Specify how multiple animation effects should composite with animation-compositionをご覧ください。

Chromeのヘッドレスモード（Puppeteerなど）を使用している場合、バージョン112では全く新しいヘッドレスモードが提供されます。この点については、Chrome's Headless mode gets an upgradeでご確認ください。