アクセシビリティ#
2024 年までに、すべてのブラウザがアクセシブルな名前と計算された役割を同じ方法で作成するようにすることが目標です。
display: contents;![[Pasted image 20240215135029.png]]
デフォルトでは、グリッドの直接の子要素のみがグリッドレイアウトに参加できます。
display: contentsを使用すると、グリッドコンテナの子ノードをグリッド上に配置できます。これにより、より多くの意味のあるマークアップが可能になり、アクセシビリティに非常に役立ちます。マークアップが意味を持つほど、補助技術はユーザーに詳細な情報を提供できます。ただし、注意点があります。現在、display: contentsをサポートしているブラウザは、その属性を持つ要素をアクセシビリティツリーに公開しません。
ヒント：
アクセシビリティの基礎はタグの意味論です。アクセシビリティに注意しながら、DOM 構造を最適化して現代的かつ非直観的な視覚アクセスをサポートするようにします。
ネストされた CSS#
現在の主流のブラウザエンジンはネストをサポートしていますが、実装の標準仕様にはわずかな違いがあります。2024 年には、すべてのエンジンが同じ方法でネストをサポートし、仕様の機能をカバーすることが Interop の目標です。
ヒント：
ネイティブのネストサポートは、生成される CSS ファイルのサイズを大幅に減らすのに役立ちます。これにより、プリプロセッサの機能がエンジンレベルで実現されます。CSS の高度な機能が進化するにつれて、プリプロセッサはいずれ置き換えられるでしょう。プロジェクトが CSS のサイズとネットワークアクセス速度を重視する場合は、徐々にプリプロセッサの機能を置き換えることができますが、仕様の進行と現在の互換性のバランスを取る必要があります。
カスタムプロパティ#
CSS でカスタムプロパティ名を定義できます。これにより、高度な定義ライブラリが生まれる可能性があります。
CSS カスタムプロパティ名のサポートは、Interop2023 に含まれており、2024 年の目標は完全に使用可能にすることです。
@property
宣言型 Shadow DOM#
これにより、SSR モードで Shadow DOM を使用できるようになります。以前は Shadow DOM と SSR を組み合わせることは非常に困難でした。なぜなら、Shadow DOM のルートモードを生成する方法がなかったからです。
<host-element>
<template shadowrootmode="open">
<slot></slot>
</template>
<h2>Light content</h2>
</host-element>
これにより、スタイルが適用されていないコンテンツのフラッシュを回避するのにも役立ちます。
Chrome 111 と Edge 111 では、新しい shadowrootmode 属性とストリーミング動作が提供されています。
font-size-adjust#
font-size-adjust CSS プロパティは、フォントサイズが大文字ではなく小文字に依存するようにします。フォントが小さい場合、フォントの可読性は主に小文字のサイズによって決まります。このオプションを使用すると、調整が可能です。
この作業には、font-size-adjust プロパティの基本的なサポート、from-font キーワードのサポート、および 2 つの値構文のサポート（これにより、開発者は x-height だけでなく、別の指標に基づいてサイズを調整できます）が含まれます。Firefox と Safari は、基本的なサポートと from-font の 2 つの値をサポートしています。Chrome の実装は更新が必要です。
WebSocket のための HTTP (S) URL#
ws: と wss: の強制使用を解決するためのもので、相対 URL を使用できない問題に対処します。これはすでに WebKit で採用されており、2024 年に他のエンジンに推進されます。
IndexedDB#
IndexDB バージョン 3 の仕様実装を推進します。
レイアウト#
flexbox、grid、および subgrid を推進します。一部のケースで無効になっている問題に対処します。
ポインターとマウスイベント#
ポインターデバイスに対してトリガーされる DOM イベントです。これらは、マウス、ペン / スタイラス、またはタッチ（1 つまたは複数の指など）などのポインティング入力デバイスを処理するための単一の DOM イベントモデルを作成することを目的としています。
2024 年には、より完全なテストが推進されます。
ポップオーバー#
ネイティブの dialog タグと popover API のテスト問題を推奨します。Firefox はまもなくリリースされ、Chrome と Safari はすでに実装されています。
相対色構文#
特定の色を基に、from と calc () を使用して相対色マッピングを行います。これにより、より現実的なデザインに近づけることができます。将来のプロジェクトの UI デザインに大きな影響を与えるでしょう。
HTMLVideoElement.requestVideoFrameCallback()#
ビデオの効率的な処理 API です。このコールバックは、新しいビデオフレームをコンポジタに送信する際にレンダリングステップで実行されます。これにより、ビデオに対して効率的なフレームごとの操作（ビデオの処理、キャンバスへの描画、ビデオの解析、外部オーディオソースとの同期など）が可能になります。
これにより、ウェブビデオのレンダリング機能が推進されます。
スクロールバースタイリング#
scrollbar-gutter プロパティに重点を置き、スクロールバーの幅を事前に確保してレイアウトのジャンプを防ぎます。
@starting-style と transition-behavior#
アニメーションの開始と離散アニメーションの有効化を定義します。
テキストの方向性#
text-wrap: balance#
テキストの折り返しに使用される新しいプロパティ値で、主に見出しや短いテキストに使用されます。
URL#
URL の範囲は、通常使用される部分以上です。特定の URL の動作を解析することが十分にサポートされていません。2024 年には引き続き推進されます。