年の後半に差し掛かってきたこの時期に、今年の Interop 2024 でウェブの相互運用性がどのように改善されたかを見てみましょう。
最初
今年の初め、Chrome の試験運用版ブラウザのサポートスコアは 83 でした。
現在、そのスコアは 90 で、6 月の Chrome 126 のリリース時点での Stable ブラウザのスコアは 85 です。試験運用版の相互運用性の総合スコアは 10 ポイント上昇しました。この投稿では、そのスコア向上に貢献した機能の一部をご紹介します。
ポップオーバー
ポップオーバーは、2024 年 4 月に新規に利用可能になったベースラインの一部になりました。ポップオーバーは、メニュー、ツールチップ、選択用のオーバーレイ、教示 UI など、作成する必要がある UI 機能の多くがポップオーバーの一種であるため、魅力的です。ポップオーバーが登場する前は、これらの機能のいずれかを作成するには、大量のカスタムコードが必要でした。複数の要素が同時に開かないようにするコード、またはユーザーが要素の外側をクリックしたときにライト ディミッシブを有効にするコード。また、UI 要素が他のインターフェースの上に確実に表示されるように、z-index
に苦労したかもしれません。
これらの機能はすべて Popover API に含まれているため、開発時間を短縮し、よりパフォーマンスが高くアクセスしやすいインターフェースを作成できます。たとえば、次のコードは、開いたときに他のポップアップを自動的に閉じる、ライト ディスミッション ポップアップを作成します。
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
詳しくは、ポップオーバー API がベースラインに登場をご覧ください。多くのアプリでポップオーバーのメリットがすでに実証されています。Tokopedia は、この機能を利用して、サポートされていないブラウザにポリフィルを使用して、React コードの量を大幅に削減できました。
@property
を使用した高度なカスタム プロパティ
@property
CSS ルールを使用すると、標準のカスタム プロパティで使用できる名前と値よりもはるかに詳細な高度なカスタム プロパティを作成できます。許可される構文を設定して、このプロパティが保持するデータの種類(色、数値、長さなど)を定義します。次に、プロパティが継承されるかどうかと初期値を設定します。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
現在、@property
ルールにより Firefox の試験運用版スコアが改善され、今月後半に Firefox 128 がリリースされると安定版スコアも向上します。また、ベースラインの新規公開にも参加します。
詳しくは、@property: CSS 変数にスーパーパワーを与えるをご覧ください。
font-size-adjust
プロパティ
CSS font-size-adjust
プロパティを使用すると、大文字のサイズを基準として小文字のサイズを変更できます。これは、特に小さいフォントサイズで、フォールバック フォントが読みやすくなるため、フォント フォールバックが発生する可能性がある場合に便利です。
font-size-adjust
プロパティは現在、Chrome の試験運用版スコアに含まれていますが、今月リリースされる Chrome 127 で安定版スコアが引き上げられます。また、ベースラインの新規提供にも参加します。
text-wrap: balance
text-wrap: balance
を使用すると、テキストの最適なバランスの行折り返しをブラウザに指示します。これは、見出しで特に役立ちます。たとえば、見出しが 2 行目で 1 つの単語に折り返されるのを防ぐことができます。
この機能は最近 Safari でサポートされるようになりました。他のブラウザでは、この機能がすべてのブラウザで適切に動作するように、失敗したテストを修正する作業が進められています。
これらの主要な機能の相互運用性の向上に加えて、その他の多くの改善も行われています。合格した各テストは、発生しない相互運用性の問題を表します。年末までに 100% に近づけるよう取り組んでまいります。