編集

Chrome 146リリース

#Chrome #CSS #JavaScript #WebGPU

Chrome 146リリース。CSSのみでスクロールに応じたアニメーション制御を可能にするScroll-triggered animations、Shadow DOMごとに独立したカスタム要素定義を許可するScoped Custom Element Registry、および安全なHTML挿入を実現するSanitizer APIが導入。

#Scroll-triggered animations

従来Intersection Observer等のJavaScriptで制御していたスクロール連動演出がCSSで宣言可能に。animation-triggerプロパティにview()を指定することで、要素がビューポートに入ったタイミングでアニメーションを開始、範囲外でリセットする動作をメインスレッドを介さず実現。

Scroll Down
Source
Scroll Down
css
.target {
  animation: rotate .5s both;
  animation-trigger: --trigger play-forwards play-backwards;
}
.source {
  timeline-trigger: --trigger view() contain 0% contain 100%;
}

#trigger-scope

アニメーション・トリガー名の有効範囲を制限する trigger-scope プロパティが追加。デフォルトではページ全体で共有されるトリガー名を、特定の要素ツリー内に閉じ込めることで名前の衝突を防止可能。

css
.conatiner {
   trigger-scope: --trigger;
}

#Sanitizer API

信頼できないHTMLソースからスクリプトや危険な属性を除去する標準機能。setHTML()メソッドにSanitizerインスタンスを渡すことで、ブラウザネイティブの安全なパースを実行。

デモ: setHTML()

安全
javascript
const sanitizer = new Sanitizer();
const dirtyHTML = "<b>安全</b><script>alert('XSS')<\/script>";
document.getElementById('output').setHTML(dirtyHTML, { sanitizer });

#Scoped Custom Element Registry

同一ページ内で同じタグ名に対し複数の異なるカスタム要素定義を共存させることが可能に。Shadow Root作成時にcustomElementsオプションで独自のCustomElementRegistryを渡すことで、ライブラリ間での名前衝突を防止。

javascript
const myRegistry = new CustomElementRegistry();
myRegistry.define('my-element', class extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Scoped Element';
  }
});

const host = document.createElement('div');
const shadow = host.attachShadow({ 
  mode: 'open', 
  customElements: myRegistry 
});
shadow.innerHTML = '<my-element></my-element>';

#meta name=“text-scale”

モバイルブラウザの自動テキストサイズ調整を制御するメタタグが導入。content="no-autoscale" を指定することで、ブラウザのヒューリスティックな調整を無効化し、OSのテキストスケール設定を rem 単位に直接反映。

html
<!-- 自動テキスト調整を無効化しOS設定を優先 -->
<meta name="text-scale" content="no-autoscale">

#WebGPU 互換モード

最新のグラフィックスAPIをサポートしていない古いデバイスでも動作を可能にする featureLevel: "compatibility" オプションが追加。OpenGLやDirect3D 11世代のデバイスでもWebGPUを実行可能。

javascript
const adapter = await navigator.gpu.requestAdapter({
  featureLevel: "compatibility"
});

if (adapter) {
  const device = await adapter.requestDevice();
  // 互換モードでの動作
}

#AudioContext.playbackStats

オーディオ再生の品質をリアルタイムでモニタリングする playbackStats プロパティが導入。レイテンシやアンダーラン（音飛び）の発生状況を取得可能。

デモ：AudioContextの統計情報取得

再生を開始してから取得ボタンを押してください
javascript
const ctx = new AudioContext();
// 再生中に統計情報を取得
const stats = ctx.playbackStats;
console.log(`平均レイテンシ: ${stats.averageLatency}`);
console.log(`アンダーラン回数: ${stats.underrunCount}`);

#DevTools の改善

DevToolsでは、Animationsパネルの刷新によるスクロールトリガーアニメーションのデバッグ支援、Elementsパネルでの#adopted-style-sheets表示、PerformanceパネルでのAIボトルネック解析が導入。

#留意事項

Sanitizer APIのデフォルト設定では一部の属性が保持される可能性があるため、機密情報を扱う場合は明示的な設定が必要。WebGPU Compatibility Modeは古いハードウェアでの動作を保証するが、最新機能の一部が制限される。

#参考文献

編集