編集

Chrome 133

#Chrome #MDN #CSS

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 プロパティに値を適用できる。

html
<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>
Advanced attr() example

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

html
<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 を適用する必要があったものを一度の宣言で済ますことも出来る。

css
.item {
  view-transition-name: attr(id type(<custom-ident>), none);
}
css
.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 つの状態が利用できる。

状態クエリ取れる値
停止しているscroll-state(stuck: value)none, top, right, bottom, left, block-start, block-end, inline-start, inline-end
スナップされたscroll-state(snapped: value)none, x, y, block, inline
スクロール可能scroll-state(scrollable: value)none, top, right, bottom, left, block-start, block-end, inline-start, inline-end, x, y, block, inline

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

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

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

Introducing
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et consequuntur dolor similique.
container-type: scroll-state
Et consequuntur dolor similique, ab reiciendis rerum distinctio! Impedit dolorem autem quidem, laborum laudantium aut magnam magni dolores velit eos nulla assumenda.
@container scroll-state(snapped: inline)
Lorem ipsum, dolor sit amet consectetur adipisicing elit, laborum laudantium aut magnam magni dolores velit eos nulla assumenda.
Opacity transitions to 1 when snapped
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Achieved via a state container query
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
html
<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 0.5s ease;
        @container not scroll-state(snapped: x) {
          opacity: 0.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を利用することで、テキストコンテンツの上下の余白をコントロールすることが出来る。

こんにちは Hello trimed
こんにちは Hello
css
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は、いわゆるツールチップのように動作する。

automanualhint
Light dismissoxo
強制非表示関係のない hint または autox他の hint のみ閉じる
ネストoxhint のみ持てる

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

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

# 擬似クラス

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

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

#Animation.overallProgress()

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

Progress: 0%

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

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

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

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

#ファイルシステムの変更監視 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

編集