Stable 版とベータ版でリリースされた興味深い機能をいくつかご紹介します 2023 年 12 月にリリースしました。
安定版のブラウザのリリース
2023 年 12 月の Firefox 121 Chrome 120 Safari 17.2 が安定版になりました。 この投稿では、これがウェブ プラットフォームに与える影響について説明します。
CSS ネストの解析を緩和
Chrome 120 と Safari 17.2 には以下が含まれます。 CSS ネストの緩和解析。 これは Firefox バージョン 117 以降でサポートされているため、すべての主要なエンジンでこの構文変更がサポートされています。
<details> 要素との排他的アコーディオン
Chrome 120 と Safari 17.2 では、name 属性が
<details> 要素。つまり 独自のアコーディオンコンポーネントを
複数の <details> 要素をグループ化できます。
詳しくは、独占アコーディオンをご覧ください。
対応ブラウザ
- 120
- 120
- x
- 17.2
:has() セレクタ
Firefox 121 には CSS :has() セレクタが含まれています。このリリースでは、すべての主要なエンジンで :has() を相互運用できるようになりました。
詳しくは、:has(): ファミリー セレクタをご覧ください。
CSS Custom Highlight API
Safari 17.2 には、
CSS Custom Highlight API
テキスト範囲の作成とスタイル設定、
::selection などの標準のハイライト疑似クラスを拡張します。
CloseWatcher API
Chrome 120 には、クローズ リクエストをリッスンして応答するための新しい API、CloseWatcher API が含まれています。
これらのリクエストは、パソコンの場合は ESC キー、Android の場合は「戻る」ジェスチャーまたはボタンによってトリガーされます。
適切に実装するのが難しい場合があります
Chrome 120 では、API に加えて、Android の [戻る] ボタンに応答するために、<dialog> と popover 属性がアップグレードされます。
対応ブラウザ
- 126
- 126
- x
- x
CSS text-wrap: balance と stable
Firefox 121 には、text-wrap の balance と stable の値が含まれています。
balance 値は、見出しなどの短いコンテンツ ブロックに役立ちます。
より楽しく読みやすいテキストを作成できますstable 値を指定すると、編集中に編集可能なコンテンツが再び下がるのを防ぐことができます。
詳細については、text-wrap: balance についてをご覧ください。
<iframe> 要素の遅延読み込み
Firefox 121 では、<iframe> 要素の loading 属性がサポートされています。
つまり、すべての主要なエンジンで iframe の遅延読み込みがサポートされるようになりました。
対応ブラウザ
- 77
- 79
- 121
- 16.4
linear() イージング関数のサポート
Safari 17.2 では、linear() イージング関数もサポートされています。この機能を使用して、
バウンス効果とばね効果。
対応ブラウザ
- 113
- 113
- 112
- 17.2
ベータ版ブラウザのリリース
ベータ版のブラウザでは、次の新機能をプレビューできます。 ブラウザの安定バージョンです。新機能をテストする絶好の機会です。 削除の措置が講じられる可能性があります。新規 ベータ版は Firefox 122 Chrome 121 Safari 17.3。 このリリースにより、プラットフォームに多くの優れた機能が追加されます。リリースを確認する 確認してください。その一部をご紹介します。
Firefox 122 と Chrome 121 には、HTMLSelectElement の showPicker() メソッドが含まれています。
要素が選択されたときに表示されるのと同じ選択ツールが表示されます。
ボタンの押下などのユーザー操作によってトリガーされる場合もあります。
Chrome 121 では、スクロールバーのスタイル設定プロパティ scrollbar-color と scrollbar-width が追加されます。
SVG の CSS マスキングも改善されます
また、誤字脱字や文法的に誤ったテキストの疑似要素をハイライト表示することもできます。