Stable 版とベータ版でリリースされた興味深い機能をいくつかご紹介します 2024 年 7 月にリリースしました。
安定版のブラウザのリリース
2024 年 7 月(Firefox 128)は、 Safari 17.6 Chrome 127 が安定版になりました。 この投稿では、ウェブ プラットフォームに追加された新機能を取り上げています。
CSS 相対色の構文
Firefox 128 に含まれるもの
CSS 相対色の構文
これにより、原点の色に対する相対的な色を作成できます。
次の CSS では、hsl()
を使って indigo
の色の彩度を半分に下げています。
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
対応ブラウザ
- 119
- 119
- 128
- 16.4
詳しい例については、ブログ投稿をご覧ください。 CSS 相対色の構文 相対色の構文は、相互運用 2024 の重点分野の一つです。 今回のアップデートにより、安定した Firefox のスコアも向上します。
content
プロパティの代替テキスト
Firefox 128 では、CSS の content
プロパティの代替テキストがサポートされています。
画像を含めるかどうかを選択できます代替テキストがユーザー補助ツリーに公開されます。
つまり、content
については、すべてのブラウザで代替テキストがサポートされるようになりました。
対応ブラウザ
- 77
- 79
- 128
- 17.4
Chrome 127 の更新により、Chrome で任意の数のリクエストを
要素を含めることで、attr()
の使用が可能になります。
使用できます。
font-size-adjust
プロパティ
Chrome 127 には、相互運用 2024 の重点分野である font-size-adjust
も含まれています。
このプロパティは、フォントのフォールバックが発生する可能性がある状況で役立ちます。
代替フォントのサイズを第 1 希望のフォントに合わせることができます
今回の Chrome リリースでは、font-size-adjust
プロパティが
ベースラインが新たに利用可能になりました。
iframes での View Transition API のサポート
Chrome 127 以降では、メインフレームと同一オリジンの iframe で同一ドキュメント ビューを同時遷移できるようになります。
以前は、同じオリジンの iframe で document.startViewTransition を使用してビュー遷移を実行しても、メインフレームで遷移が同時に実行されると動作しません。iframe の遷移は自動的にスキップされます。これで、両方の遷移が実行されます。
キーボードのフォーカス可能なスクロール コンテナ
Chrome 127 以降、スクローラーはクリック フォーカスとプログラムでフォーカス可能 できます。フォーカス可能な子がないスクローラーは、デフォルトでキーボードでフォーカス可能です。
この変更について詳しくは、投稿をご覧ください キーボードのフォーカス可能なスクローラー。
@property
ルール
Firefox 128 で @property
ルールと関連 JavaScript をサポート
APIつまり、構文を定義する CSS カスタム プロパティを作成して、
継承、初期値があります。
次の例では、<color>
を受け入れるようにカスタム プロパティが定義されています
継承せず、初期値を hotpink
に設定します。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
ルールが、ベースラインとして新たに利用可能になりました。詳細:
@property: 次世代の CSS 変数でユニバーサル ブラウザがサポートされるようになりました。
サイズ変更可能なArrayBuffer
と拡張可能なSharedArrayBuffer
サイズ変更可能 ArrayBuffer 成長可能 SharedArrayBuffer Firefox 128 でサポートされていますが サイズを割り当てることなく、バッファのサイズを 新しいバッファに格納し、そこにデータをコピーします。 これらのプロパティは、Baseline Newly available も結合します。
Flexbox プロパティの safe
キーワード
Safari 17.6 は主に既存の機能に対する修正のリリースであり、
ただし、Flexbox の配置プロパティの safe
キーワードも含まれます。
これにより、safe
キーワードをブラウザ間で相互運用できるようになります。
対応ブラウザ
- 115
- 115
- 63
- 18
safe
キーワード
選択した配置によってコンテンツが
表示されます。次の CodePen は、これがどのように動作するかを
中央揃えのアイテムが表示されますcenter
アライメントによりデータ損失が発生する場合は、
代わりに start
が使用されます。
ベータ版ブラウザのリリース
ベータ版のブラウザでは、次の新機能をプレビューできます。 ブラウザの安定バージョンです。新機能をテストする絶好の機会です。 削除の措置が講じられる可能性があります。新規 ベータ版は Firefox 129、 Chrome 128。「 Safari 18 ベータ版を提供中です。 このリリースにより、プラットフォームに多くの優れた機能が追加されます。リリースを確認する 確認してください。その一部をご紹介します。
Chrome 128 に追加された CSS ruby-align
プロパティと、
display: ruby
、
zoom
プロパティも仕様に合わせて更新されています。また、
割り当てられたコールバックを追加するための AudioContext
API の更新
AudiContext.onerror
: AudioContext の作成とレンダリングのエラーを報告します。
Firefox 129 には @starting-style
ルールと transition-behavior
が含まれています
プロパティです。これらのプロパティは、新たに利用可能になったベースラインの一部になります。
Firefox 129 が安定版としてリリースされました。