本頁面由 Cloud Translation API 翻譯而成。

2023 年每位前端開發人員應知道的 6 個 CSS 程式碼片段

立即可用的實用 CSS 工具，不僅功能強大、功能強大，而且也相當穩定。

Adam Argyle

我認為每個前端開發人員都應該知道如何使用 container 查詢建立捲動貼齊體驗， position: absolute 和格線、迅速釣到圓形時，使用 cascade 圖層、並藉助合乎邏輯的資源。參閱這篇文章深入瞭解相關期望

1. 容器查詢

使用者最期待的 CSS 功能 10 年後，現在且不影響，在 2023 年進行寬度查詢。

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

瀏覽器支援

資料來源

container

瀏覽器支援

資料來源

2. 捲動貼齊

精心安排捲動體驗，讓遊戲體驗脫穎而出並捲動拍照是完美融入系統捲動的使用者體驗，同時提供有意義的停靠功能點。

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

如要進一步瞭解這項 CSS 功能的潛力，請參閱這篇文章包含約 25 個示範的 Codepen 集合。

scroll-snap-type

瀏覽器支援

資料來源

scroll-snap-align

瀏覽器支援

資料來源

scroll-snap-stop

瀏覽器支援

資料來源

overscroll-behavior

瀏覽器支援

資料來源

3. 格線

避免讓單一儲存格 CSS 格線採用絕對位置。當他們放在頂端請保持適當角度並對齊屬性調整位置

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

瀏覽器支援

資料來源

4. 快速圈選

在 CSS 中製作圓形的方法有很多種，但這是最主要的方式極簡

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

瀏覽器支援

資料來源

5. 使用 @layer 控制變化版本

Cascade 圖層協助插入變化版本之後才發現這個區塊原始的一組變化版本

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

接著，在某些完全不同的檔案中，在其他時間隨機載入新的變化版本，如同其他變化版本。

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

瀏覽器支援

資料來源

6. 運用邏輯屬性減少去蕪存菁，提高觸及率

記住這個一個新 Box 模型而且不必擔心變更國際文字書寫的左和右側邊框間距或邊界模式和文件路線。將樣式從實體屬性調整為邏輯性質，例如： padding-inline、 margin-inline, inset-inline, 瀏覽器就會開始進行調整

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

瀏覽器支援

資料來源

margin-block

瀏覽器支援

資料來源

inset-inline

瀏覽器支援

資料來源