# Defensive CSS

### 什麼是防禦性 CSS？

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

### 圖片

#### background-repeat

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

#### 圖片失真、變形

當使用`<img>`且我們「沒辦法控制使用者上傳圖片的尺寸」時，視情況我們可以使用 `object-fit` 讓照片不會因為伸縮時變形。`object-fit` 提供[五種值](https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit)：fill | contain | cover | none | scale-down。

### 間距

<figure><img src="https://defensivecss.dev/img/defensive-2-3.png" alt=""><figcaption><p><a href="https://defensivecss.dev/img/defensive-2-3.png">https://defensivecss.dev/img/defensive-2-3.png</a></p></figcaption></figure>

<figure><img src="https://defensivecss.dev/img/defensive-3-2.png" alt=""><figcaption><p><a href="https://defensivecss.dev/img/defensive-3-2.png">https://defensivecss.dev/img/defensive-3-2.png</a></p></figcaption></figure>

<figure><img src="https://defensivecss.dev/img/defensive-3-3.png" alt=""><figcaption><p><a href="https://defensivecss.dev/img/defensive-3-3.png">https://defensivecss.dev/img/defensive-3-3.png</a></p></figcaption></figure>

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

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

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

### Flexbox

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

<figure><img src="https://defensivecss.dev/img/defensive-1-2.png" alt=""><figcaption><p><a href="https://defensivecss.dev/img/defensive-1-2.png">https://defensivecss.dev/img/defensive-1-2.png</a></p></figcaption></figure>

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

<figure><img src="https://defensivecss.dev/img/defensive-1-3.png" alt=""><figcaption><p><a href="https://defensivecss.dev/img/defensive-1-3.png">https://defensivecss.dev/img/defensive-1-3.png</a></p></figcaption></figure>

### 參考連結

* [Defensive CSS](https://defensivecss.dev/)
* [鐵人賽：防禦性 CSS](https://ithelp.ithome.com.tw/articles/10291521)
