アクセシビリティ#
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 の組み合わせは困難でしたが、shodosrootmode を生成する方法がありませんでした。
<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: を強制的に使用する問題を解決するためのもので、現在は 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 年に引き続き推進されます。