Chrome 133

2025年2月4日にChrome 133がリリース。

https://developer.chrome.com/release-notes/133

https://developer.chrome.com/blog/new-in-chrome-133?hl=en

高度なattr()機能

CSSのattr()関数は従来contentプロパティでのみ利用可能だったが、任意のCSSプロパティへ適用可能になった。また、string以外のデータ型としてもパースすることも可能になった。現状、この機能はChromeのみのサポート。

この機能を利用すると、例えば次のようにカスタム属性から任意のCSSプロパティに値を適用できる。

<style>
[data-color] {
  color: attr(data-color type(color), red);
}
[data-size]{
  font-size: attr(data-size px, 16px);
}
</style>
<div data-color="coral" data-size="24" >Advanced attr() example</div>

さらに、通常の属性を取り出すことも当然出来るため、次のようなことも出来る。

<input type="range" min="1" max="5" />
<style>
input[type="range"] {
  --s: 40px;   
  height: var(--s);
  aspect-ratio: attr(max type(<integer>));
  padding-inline: calc(var(--s)/3);
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" d="M 50 15 C 20 -10, -10 40, 50 90 C 110 40, 80 -10, 50 15 Z"/></svg>');
  appearance: none;
  cursor: pointer;
}
input[type="range" i]::-webkit-slider-thumb{
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s)/2),#aaa 50%,#ff0000 0)
    fill 0//var(--s) calc(20*var(--s));
  appearance: none;
}
</style>

他にも、次のようにview-transition-nameやgrid-areaなど要素毎にCSSを適用する必要があったものを一度の宣言で済ますことも出来る。

.item {
  view-transition-name: attr(id type(<custom-ident>), none);
}

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav main main"
    "nav footer footer";
}
.item {
  grid-area: attr(data-area type(<custom-ident>), auto);
}

https://developer.chrome.com/blog/advanced-attr?hl=ja

スクロールの状態に基づいたコンテナクエリ scroll-state()

スクロールの状態に基づいたコンテナクエリscroll-state()が追加。現在はChromeのみのサポート。

次の3つの状態が利用できる。

これを利用すると、例えば次のようにスティッキーヘッダーのアニメーションを実装できる。

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1;
  container-type: scroll-state;
  .sticky-header-inner {
    transition: background .3s ease;
    @container scroll-state(stuck: top) {
        background: lightcoral;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }
}

また、次のようにスナップされた対象を協調するようなアニメーションも実装できる。

<style>
.container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 50%;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  > .item {
    container-type: scroll-state;
    scroll-snap-align: center;    
      > * {
        transition: opacity .5s ease;
        @container not scroll-state(snapped: x) {
          opacity: .25;
        }  
    }
  }
}
</style>

https://developer.chrome.com/blog/css-scroll-state-queries?hl=ja

text-box-trim

Safari 18.2に続いて、text-box-edge、text-box-trim及び、これらのショートハンドであるtext-boxのサポートが追加。

text-box-trimを利用することで、テキストコンテンツの上下の余白をコントロールすることが出来る。

p {
  text-box: trim-both cap alphabetic
}

https://developer.chrome.com/blog/css-text-box-trim?hl=ja

popover属性のhint

popover属性にhintが追加。

popover属性がサポートしている、auto、manual、hintのキーワードには次のような差異がある。hintは、いわゆるツールチップのように動作する。

https://open-ui.org/components/popover-hint.research.explainer/

Light dismissとは、ポップオーバーの外側をクリックしたりESCキーを押すことでポップオーバーを閉じること。

:open擬似クラス

details要素とdialog要素が開いている場合や、input要素やselect要素でピッカーやドロップダウンが表示されている場合に適用される:open擬似クラスがサポート。現在はChromeのみのサポート。

https://developer.mozilla.org/en-US/docs/Web/CSS/:open

Animation.overallProgress()

アニメーションのタイムラインに関係なく、アニメーションの進捗を取得できるAnimation.overallProgressが追加。現在はChromeのみのサポート。

Run animation

Progress: 0%

https://developer.mozilla.org/en-US/docs/Web/API/Animation/overallProgress

状態を維持したノードの移動 moveBefore

要素の状態を維持したままノードを移動できるNode.prototype.moveBefore()が追加。 Node.prototype.insertBefore()と同様のインターフェースを持ち、第一引数に移動させるノード、第二引数に参照ノードを取る。 現状はChromeのみのサポート。

button.addEventListener('click', () => {
  if (child.parentNode === rightParent) {
    leftParent.moveBefore(animateObj, null);
  } else {
    rightParent.moveBefore(animateObj, null);
  }
});

Move

ファイルシステムの変更監視 FileSystemObserver

File System APIの一部であるFileSystemObserverが追加。

これを利用すると、アクセスが許可されたファイルやディレクトリの変更を監視できる。

https://developer.chrome.com/blog/file-system-observer?hl=ja

利用可能なWebAuthn機能の検出

ブラウザでサポートされているWebAuthn機能を特定できるPublicKeyCredential.getClientCapabilities()が追加。現在はChromeとSafariのみのサポート。

https://developer.chrome.com/blog/passkeys-client-capabilities?hl=ja

https://web.dev/articles/webauthn-client-capabilities?hl=ja

JavaScript Temporal is coming - MDN

Temporalを紹介する記事と、270ページを超えるTemporalについてのドキュメントがMDNで公開。

https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal

Temporalは、FirefoxやSafariで実験的なリリースが展開され始めている。