立即可用的實用 CSS 工具,不僅功能強大、功能強大,而且也相當穩定。
我認為每位前端開發人員都應瞭解如何使用容器查詢、建立捲動貼齊體驗、避免使用 position: absolute
和格狀,快速敲出圓形、使用分層疊代,以及透過邏輯屬性以更少的資源達成更多目標。以下簡單說明相關期望
1. 容器查詢
這個 CSS 功能是連續 10 年最熱門的功能,現在在各瀏覽器上都已穩定,您可在 2023 年使用這項功能進行寬度查詢。
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
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
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 控制變化版本
層疊式可協助插入變化版本,這些變化版本是在之後發現或建立的,並與原始變化版本集合一起放在層疊式中的正確位置。
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
接著,在某個完全不同的檔案中,隨機在某個時間載入,並在按鈕圖層中附加新變化版本,就好像在整個過程中,按鈕圖層一直與其他圖層一起存在一樣。
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer
6. 運用邏輯屬性減少去蕪存菁,提高觸及率
請背熟這個新的單一方塊模型,再也不用擔心為國際書寫模式和文件方向變更左右邊距或邊界。將樣式從實體屬性調整為邏輯樣式 (例如 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;
}