編集

Chrome 140がリリース、ToggleEventとCSS機能が強化

#Chrome #CSS

Chrome 140がリリースされた。ToggleEventの改善、CSSカウンター機能、フォントバリエーション設定などの新機能が追加された。

出展：

#ToggleEventのトリガー元要素把握機能

ToggleEventのsource属性により、イベントをトリガーした要素を特定できるようになった。

html
<button popovertarget="mypopover">開く</button>
<div id="mypopover" popover>ポップオーバー内容</div>
javascript
const popover = document.getElementById('mypopover');
popover.addEventListener('toggle', (event) => {
  console.log('トリガー元要素:', event.source); // <button>要素
});

ポップオーバーやコマンド要素でのイベント追跡が容易になる。

#contentプロパティでのカウンター使用

contentプロパティの代替テキストでcounter()とcounters()が使用可能になり、アクセシビリティが向上。

css
ol {
  counter-reset: item-counter;
}

li {
  counter-increment: item-counter;
}

li::before {
  content: counter(item-counter) ". ";
}

/* スクリーンリーダー向けの代替テキスト */
li::before {
  content: counter(item-counter, decimal) ". " / "項目 " counter(item-counter);
}

番号付きリストのアクセシビリティが向上し、スクリーンリーダーでも意味のある情報が提供される。

#@font-faceでのfont-variation-settingsサポート

@font-faceルールでfont-variation-settings記述子がサポートされ、フォントのバリエーションを直接設定可能。

css
@font-face {
  font-family: "OpenTypeFont";
  src: url("open_type_font.woff2") format("woff2");
  font-variation-settings:
    "wght" 400,
    "wdth" 300;
}

/* 使用例 */
.variable-font {
  font-family: "OpenTypeFont";
  /* 個別要素での調整も可能 */
  font-variation-settings: "wght" 700;
}

フォントの太さ、幅、傾斜などの軸を@font-faceレベルで調整できるようになり、より柔軟なタイポグラフィ制御が可能。

#ルートからビューポートへのoverscroll-behavior伝播

CSS ワーキング グループは、<body> からビューポートにプロパティを伝播しないことを決定。代わりに、ビューポートのプロパティはルート（<html>）要素から伝播される。

css
/* ルート要素での設定 */
html {
  overscroll-behavior: contain;
}

/* これによりbodyやビューポート全体に伝播 */
body {
  /* overscroll-behaviorは自動的にcontainが適用される */
  height: 200vh; /* コンテンツがビューポートを超える */
}

Chrome には、ルートではなく<body> から overscroll-behavior を伝播するという長年の問題がありった。この変更によりChromeが仕様に準拠し、他の実装との相互運用が可能になった。

#CSS型付き算術の改善

calc(20% / 0.5em * 1px)やcalc(10em / 1px)といった記述が可能になった。

今まではtan(atan2(length_value, 1px))といったトリックを利用して単位情報を削除して計算を行う必要があった。

編集