Chrome 150 がリリースされた。CSS の text-fit、複合ウィジェット向けの focusgroupbackground-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-clipborder-area 値が入った。背景を枠線の描画領域にクリップし、border-widthborder-style を考慮しつつ border-color の透明度は無視する。border-image なしでグラデーション枠を書ける。WebKit では既に利用可能だった。

css
.box {
  border: 8px solid transparent;
  background-image: linear-gradient(90deg, #90e0ef, #f4a261);
  background-clip: border-area;
}

#参考文献