Chrome 150 がリリースされた。CSS の text-fit、複合ウィジェット向けの focusgroup、background-clip: border-area が含まれる。
CSS text-fit
text-fit は、テキストノードのフォントサイズをコンテナの幅に合わせて拡大・縮小する。見出しや動的な文言を、手計算や JavaScript なしで横幅いっぱいに揃えられる。値は grow / shrink に、行ごとの扱いとして consistent / per-line / per-line-all を組み合わせる。
css
.headline {
text-fit: grow consistent;
}デモは The text-fit property(CodePen) にある。
Focusgroup
focusgroup 属性は、ツールバーなどの複合ウィジェットに矢印キーでのフォーカス移動、単一の Tab ストップ、最後にフォーカスした項目の記憶を宣言的に与える。roving tabindex を手書きする必要がなくなる。
html
<div focusgroup="toolbar" aria-label="Text formatting">
<button type="button">Bold</button>
<button type="button">Italic</button>
<button type="button">Underline</button>
</div>CSS background-clip: border-area
background-clip に border-area 値が入った。背景を枠線の描画領域にクリップし、border-width と border-style を考慮しつつ border-color の透明度は無視する。border-image なしでグラデーション枠を書ける。WebKit では既に利用可能だった。
css
.box {
border: 8px solid transparent;
background-image: linear-gradient(90deg, #90e0ef, #f4a261);
background-clip: border-area;
}