Toolbelt 值得信賴、功能強大且運作穩定，歡迎立即使用。
Adam Argyle
我認為每個前端開發人員都應該知道如何使用容器查詢、建立捲動貼齊體驗、避免使用 grid、迅速破壞圓形、使用層疊層，以及透過邏輯屬性減少觸及更多使用者。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 功能的潛力，請觀看這個約 25 個示範的龐大而啟發性的 Codepen 集合。
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. 格線
避免為單一儲存格 CSS 格線設定絕對位置。彼此重疊後，請使用對齊屬性並對齊屬性來放置這些元件。
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. 快速社交圈
在 CSS 中建立圓形的方法很多，但這絕對不是問題所在。
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. 使用 @layer 控制變化版本
Cascade 層可將稍後探索或建立的變化版本插入稍後與原始變化版本集的適當位置。
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
接著，在一些完全不同的檔案中，於某個其他隨機時間載入，將新變數附加至按鈕層，就好像這段中其他的變化版本一樣。
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. 運用邏輯性質，減少記憶、增加觸及率
請牢記這個一個新方塊模型，不必擔心國際撰寫模式和文件路線變更左右邊框間距或邊界的情形。將樣式從實體屬性調整為 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;
}