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

您今天就能使用的強大且穩定的 CSS,可用於工具箱。

我認為每位前端開發人員都應瞭解如何使用容器查詢、建立捲動貼齊體驗、避免使用 position: absolute格狀,快速敲出圓形、使用分層疊代,以及透過邏輯屬性以更少的資源達成更多目標。以下簡要說明這些預期內容。

這個 CSS 功能是連續 10 年最熱門的功能,現在已在各瀏覽器上穩定運作,您可在 2023 年使用這項功能進行寬度查詢。

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

.card {
  padding: 1rem;
}

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

瀏覽器支援

  • Chrome:105。
  • Edge:105。
  • Firefox:110。
  • Safari:16 歲。

資料來源

container

瀏覽器支援

  • Chrome:105。
  • Edge:105。
  • Firefox:110。
  • Safari:16 歲。

資料來源

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 功能的潛力,請參閱這個龐大且富含靈感的 Codepen 集合,其中包含約 25 個範例。

scroll-snap-type

瀏覽器支援

  • Chrome:69。
  • Edge:79。
  • Firefox:99.
  • Safari:11。

資料來源

scroll-snap-align

瀏覽器支援

  • Chrome:69。
  • Edge:79。
  • Firefox:68。
  • Safari:11。

資料來源

scroll-snap-stop

瀏覽器支援

  • Chrome:75。
  • Edge:79。
  • Firefox:103。
  • Safari:15。

資料來源

overscroll-behavior

瀏覽器支援

  • Chrome:63。
  • Edge:18。
  • Firefox:59。
  • Safari:16 歲。

資料來源

3. 格線堆疊

請避免使用單一儲存格 CSS 格線的絕對位置。將圖層堆疊在彼此上方後,請使用對齊和排列屬性來調整位置。

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

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

瀏覽器支援

  • Chrome:57。
  • 邊緣:16。
  • Firefox:52。
  • Safari:10.1。

資料來源

4. 快速圈

在 CSS 中製作圓形的方法有很多種,但這絕對是最簡單的方法。

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

瀏覽器支援

  • Chrome:88。
  • Edge:88。
  • Firefox:89。
  • Safari:15。

資料來源

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

層疊式協助插入變化版本,這些變化版本是在之後發現或建立的,並與原始變化版本集合一起放在層疊式中的正確位置。

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

接著,在某個完全不同的檔案中,隨機在某個時間載入,並在按鈕圖層中附加新變化版本,就好像在整個過程中,按鈕圖層一直與其他圖層一起存在一樣。

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

瀏覽器支援

  • Chrome:99。
  • Edge:99。
  • Firefox:97。
  • Safari:15.4。

資料來源

6. 運用邏輯屬性,減少背誦內容並擴大觸及範圍

請背熟這個新的單一方塊模型再也不用擔心為國際書寫模式文件方向變更左右邊距或邊界。將樣式從實體屬性調整為邏輯屬性,例如 padding-inlinemargin-inlineinset-inline,瀏覽器現在會進行調整。

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

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

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

瀏覽器支援

  • Chrome:87。
  • 邊緣:87。
  • Firefox:66。
  • Safari:14.1。

資料來源

margin-block

瀏覽器支援

  • Chrome:87。
  • 邊緣:87。
  • Firefox:66。
  • Safari:14.1。

資料來源

inset-inline

瀏覽器支援

  • Chrome:87。
  • 邊緣:87。
  • Firefox:63。
  • Safari:14.1。

資料來源