フロントUI_Chrome133

## attr()関数の進化
Chrome 133以降で利用可能になった新しい attr()関数は大幅に拡張され、以下のような機能強化が図られています 。
##### 任意のCSSプロパティでの利用
content プロパティだけでなく、color、font-size、rotate など、あらゆるCSSプロパティで使用できるようになりました。カスタムプロパティ (--variable-name) にも利用可能です。

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

- 文字色
![文字色.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/8f48c987-38f7-4b0c-93a1-b02672466141.gif)


- フォントサイズ
![フォントサイズ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/f5e31505-7d3f-43b0-b75e-67112ea07a02.gif)


- グリッド列数
![グリッド列数.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/136cfc28-cd08-46f5-a2d1-4a53dbb15323.gif)


## :open 疑似クラス
開閉状態を持つUI要素が「開いている」状態の時にスタイルを適用できます。 以下のデモでは、各要素の開閉状態に応じてスタイルが変化します。
![open 疑似クラス.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/b99a1e1e-957d-41cf-ace8-a617239ce5c4.gif)

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


CSS:
```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
![navibar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/e92c0efd-591f-453d-ab51-1fecf8640d8f.gif)

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

CSS:
```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
![section.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/eb7c49df-7e47-4f6b-93f1-b1088daebf5f.gif)



- Carousel
![Carousel.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/fb0d7d1a-a0ac-4fae-b55f-26e317d63126.gif)






## Animation.overallProgressプロパティ
アニメーションの全イテレーションを通じた 進行状況を0から1の値で取得できます。これにより、複数回繰り返すアニメーションや スクロール駆動型アニメーションの進行状況を簡単に追跡できます。
![Animation_overallProgress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/3d605d6c-3244-42e0-a190-34cd96e0701e.gif)




## Node.prototype.moveBefore
DOM要素を移動する際に、その要素の状態（フォーカス、アニメーション、 iframe状態など）を維持したまま移動できる新しいAPIです。以下のデモでは、従来の方法と新しい方法の 違いをシミュレートしています。
![Node_prototype_moveBefore.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740465/61c6c477-4a98-422e-b44a-d18fba3bd78b.gif)