フロントUI_Chrome133

attr()関数の進化

Chrome 133以降で利用可能になった新しい attr()関数は大幅に拡張され、以下のような機能強化が図られています 。

任意のCSSプロパティでの利用

content プロパティだけでなく、color、font-size、rotate など、あらゆるCSSプロパティで使用できるようになりました。カスタムプロパティ (--variable-name) にも利用可能です。

多様なデータ型への対応

単なる文字列だけでなく、色 ()、カスタム識別子 ()、単位付きの数値 (px, deg など)、パーセンテージなど、様々なデータ型として属性値を解釈できるようになりました。

• 文字色
  

• フォントサイズ
  

• グリッド列数
  

:open 疑似クラス

開閉状態を持つUI要素が「開いている」状態の時にスタイルを適用できます。 以下のデモでは、各要素の開閉状態に応じてスタイルが変化します。

HTML:

    <div class="details-container">
      <details>
        <summary>詳細を開くセクション 1</summary>
        <p>これは :open 疑似クラスのデモです。</p>
      </details>
      <details>
        <summary>詳細を開くセクション 2</summary>
        <p>別のコンテンツを表示しています。</p>
      </details>
    </div>

CSS:

/* 5. Details :open Demo */
.details-container {
  padding: 16px;
}

.details-container details {
  margin-bottom: 16px;
  border: 1px solid #b2ebf2;
  border-radius: 4px;
  background: #e0f7fa;
}

.details-container summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 500;
  position: relative;
}

.details-container summary::after {
  content: '▶';
  position: absolute;
  right: 16px;
  transition: transform 0.3s;
}

.details-container details[open] {
  background: #00acc1;
}

.details-container details[open] summary {
  color: #ffffff;
}

.details-container details[open] summary::after {
  transform: rotate(90deg);
}

.details-container details p {
  margin: 0;
  padding: 12px 16px;
  background: #ffffff;
}

CSSスクロール駆動コンテナクエリ

コンテナのスクロール状態に基づいて子孫要素のスタイルを変更できます。 Chrome 133で導入されたこの機能により、JavaScriptを使わずにスクロール連動型UIを実現できます。

• navibar
  

HTML:

<div class="sticky-nav-container">
  <!-- スティッキーヘッダー -->
  <nav>Material AppBar</nav>
</div>
<div class="content">
  <!-- ページコンテンツ -->
</div>

CSS:

/* コンテナにスクロール状態を設定 */
.sticky-nav-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;
  background: #2196F3;
  z-index: 10;
}

/* ナビゲーションバー */
.sticky-nav-container nav {
  padding: 16px;
  color: #ffffff;
  font-size: 1.25rem;
  box-shadow: none;
  transition: background 0.3s, box-shadow 0.3s;
}

/* スティッキー状態の時にヘッダーのスタイルを変更 */
@container scroll-state(stuck: top) {
  .sticky-nav-container nav {
    background: #1976D2;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  }
}

それ以外にも下記などがあります。

• section
  

• Carousel
  

Animation.overallProgressプロパティ

アニメーションの全イテレーションを通じた 進行状況を0から1の値で取得できます。これにより、複数回繰り返すアニメーションや スクロール駆動型アニメーションの進行状況を簡単に追跡できます。

Node.prototype.moveBefore

DOM要素を移動する際に、その要素の状態（フォーカス、アニメーション、 iframe状態など）を維持したまま移動できる新しいAPIです。以下のデモでは、従来の方法と新しい方法の 違いをシミュレートしています。