7 個超好用的 2024 CSS 新屬性，學起來增加開發效率

前幾天 Google 公布 2024 年 CSS 新增的功能，我整理了七個我覺得最實用的新功能 👇

1. Height 從 0 到 auto 的 Transition

CSS 現在支援從固定高度到自適應高度的動畫過渡！

只要透過 interpolate-size 屬性或 calc-size() 函數就能實現。

基本範例

我們只需要在根元素上啟用這個功能：

:root {
  interpolate-size: allow-keywords;
}

就能實現 0 到 auto 的動畫。

.container p {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.container:hover p {
  height: auto;
}

動態計算高度範例

若需要特別調整大小，只要使用 calc-size 就能輕鬆做到：

.container:hover p {
  height: calc-size(min-content, size + 200px);
}

2. 可樣式化的 <details> 元素

現在<details> 元素可以加上自定義樣式，支援更豐富的 CSS 屬性和動畫。例如：

• 使用 ::marker 隱藏 detail 的小 icon

::marker {
  content: '';
}

• 利用 [open] 製作打開的 style

&[open] summary img {
  filter: brightness(0.5);
}

• 利用 ::details-content 製作展開的 transition

::details-content {
  transition: width 0.5s, content-visibility 0.5s allow-discrete;
  width: 0;
}

完整的程式碼可以到 Codepen 參考

3. 錨點定位 (Anchor Positioning)

CSS 錨點定位能精準設定兩個元素的相對位置，利用 anchor-name、position-anchor 以及 position-area 就能快速定位位置

例如使用 position-area: top center 讓文字迅速定為到圖片上方

<div class="anchor">
  <img
    src="img.jpg"
  />
</div>

<p class="positioned-element">Fried egg</p>

.anchor {
  anchor-name: --img;
}

.positioned-element {
  position: fixed;
  position-anchor: --img;
  position-area: top center;
}

更多相關的用法，可以直接參考這個影片，裡面很詳細展示所有 Anchor 的值

4. 捲動驅動動畫 (Scroll-Driven Animations)

這是今年最讓我興奮的功能之一！透過滾動時間軸，直接觸發動畫，再也不需要用外部庫如 GSAP。

利用 animation-timeline 來控制 scrollin 的動畫時間就可以達到放大文字的效果

svg {
  animation: scrollin linear;
  animation-timeline: view();
}

@keyframes scrollin {
  0% {
    scale: 1;
  }
  50% {
    scale: 10;
  }
  80%,
  100% {
    scale: 800;
  }
}

5. 自定義屬性 (@property)

自定義 CSS 屬性現在可以支援動畫和過渡，像是以往漸變背景是不支援 transition的，但現在使用 @property 就能做到

@property --gradient-color-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #23232b;
}
@property --gradient-color-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #5B86E5;
}
@property --gradient-rotate {
    syntax: '<angle>';
    inherits: false;
    initial-value: 45deg;
}

.container {
    background: linear-gradient(
        var(--gradient-rotate),
        var(--gradient-color-1), var(--gradient-color-2)
    );
}

.container {
    transition: --gradient-color-1 0.8s, --gradient-color-2 0.8s,
     --gradient-rotate 0.8s;

    &:hover {
        --gradient-color-1: #2ecee0;
        --gradient-color-2: #5B86E5;
        --gradient-rotate: 405deg;
    }
}

6. Cross-Document View Transitions

跨文檔的視圖過渡 (View Transitions) 是 2024 年另一個我很期待的功能，他可以讓頁面之間的切換加上 transitn。

只要使用以下 CSS，並確保兩個頁面是同源（same-origin）的，就能有 transition 的效果，例如以下示範，再切換頁面時會自動有 transition

@view-transition {
  navigation: auto;
}

7. Starting-Style

我也很喜歡這個新功能，它用於增加元素出現在頁面時的動畫。

這在操作 DOM 增刪元素時特別好用，像我可以指定一開始 opacity: 0，這樣元素在被增加時就會有 transition

div {
  color: white;
  transition: 1s;
  background-color: transparent;

  @starting-style {
    color: var(--yellow);
    opacity: 0;
  }
}

以上是七個我最期待的 CSS 新功能，

完整的官方介紹可以到 Google CSS wrapped 2024 看～你最喜歡哪個特性呢？