Defensive CSS

在前一章節我們學會了修正 CSS 的錯誤，但修錯誤畢竟是很花時間的事，所以這章節我們要來學習預防錯誤，防患未然。

英文為 Defensive CSS，名詞是由一位作者 Ahmad Shadeed 在 2021 年發表的一篇文章。主要講述使用切版時可能會發生的問題，以及建議做法避免問題的發生。

background-repeat 預設會重複圖片，有時候我們會沒有注意到，必須把值設為 no-repeat才不會重複出現。

當使用<img>且我們「沒辦法控制使用者上傳圖片的尺寸」時，視情況我們可以使用 object-fit 讓照片不會因為伸縮時變形。object-fit 提供五種值：fill | contain | cover | none | scale-down。

如果有「不固定寬度」的容器＋「同一行有兩個以上」的容器，就要特別注意不固定寬度容器過長或過短時的呈現，如例如，當卡片文字過長時，選擇使用「...」的方式（注意，這種方式通常還需要另外顯示全文較為妥當），且距離下一個容器有一定的間距區分。在 CSS 中，文字可使用以下方式達成「...」:

.selector {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

除了「...」的方式，也可以使用斷行，但斷行也有它應該注意的地方，例如要置上、置中或置底對齊排列，但不變的是都需要離下一個物件有一定的間距。

如果使用預設的值，可能會產生這樣的情況：

我們應該要讓他保持在容器裡，所以可以添加 flex-wrap: wrap; ，就會因為空間不足而由上至下、由左至右接續排列。（但後續仍需要觀看畫面是否協調，如下圖就會有偏左的感覺，需要持續修正喲！）

Last updated 1 year ago

Was this helpful?