2025年實用CSS新功能：7個現代化前端開發技巧

現代CSS持續發展，2025年有多項新功能獲得主流瀏覽器支援。以下7個實用功能能顯著改善前端開發體驗與網站效能。

這些新功能讓CSS更加強大且易用，特別在響應式設計和樣式管理方面帶來重大改進。

1. Container Queries

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

優勢特點

• 基於容器寬度而非視窗寬度
• 真正的組件化響應式設計
• 更精確的版面控制

2. CSS Nesting

.button {
  padding: 1rem;
  
  &:hover {
    background: blue;
  }
  
  & .icon {
    margin-right: 0.5rem;
  }
}

3. :has() 父選擇器

/* 包含圖片的卡片 */
.card:has(img) {
  border: 2px solid gold;
}

/* 沒有子元素的容器 */
.container:not(:has(*)) {
  display: none;
}

實用場景

• 動態樣式調整
• 表單驗證樣式
• 內容狀態判斷

4. CSS Subgrid

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}

5. 現代顏色功能

.element {
  /* 相對顏色調整 */
  background: color(from blue r g b / 0.5);
  
  /* 新色彩空間 */
  color: oklch(0.7 0.15 180);
  
  /* 顏色混合 */
  border: color-mix(in srgb, red 30%, blue);
}

6. View Transitions API

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: slide-out 0.3s ease;
}

::view-transition-new(root) {
  animation: slide-in 0.3s ease;
}

7. Cascade Layers

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer components {
  .button { padding: 1rem; }
}

實用範例

.layout {
  container-type: inline-size;
  
  &:has(.sidebar) {
    @container (min-width: 768px) {
      display: grid;
      grid-template-columns: 250px 1fr;
    }
  }
}

瀏覽器支援狀況

這些現代CSS功能為前端開發帶來更多可能性與便利性。