很多時(shí)候，我們希望有一種方法可以避免某種CSS問題或行為的發(fā)生。我們知道，網(wǎng)頁內(nèi)容是動(dòng)態(tài)的，網(wǎng)頁上的東西可以改變，從而增加了出現(xiàn)CSS問題或奇怪行為的可能性。

防御式 CSS是一個(gè)片段的集合，可以幫助我編寫受保護(hù)的CSS。換句話說，就是將來會(huì)有更少的bug出現(xiàn)。

1.Flexbox 包裹

CSS flexbox 是目前最有用的CSS布局功能之一。在一個(gè)包裝器上添加 display: flex，讓子項(xiàng)挨著排序。

問題是，當(dāng)空間不足時(shí)，那些子項(xiàng)默認(rèn)不會(huì)被包裹成一個(gè)新的行。我們需要用 flex-wrap: wrap 來改變這一行為。

下面是一個(gè)典型的例子。

.options-list {
    display: flex;
}

當(dāng)空間較少時(shí)，會(huì)出現(xiàn)水平滾動(dòng)。這應(yīng)該是預(yù)料之中的，實(shí)際上并不是一個(gè) "問題"。

.options-list {
display: flex;
flex-wrap: wrap;
}

使用flexbox時(shí)，一般的經(jīng)驗(yàn)法則是允許包裹，除非你想要一個(gè)滾動(dòng)的包裹。這是另一回事，但盡量使用 flex-wrap 來避免意外的布局行為(在我們的例子中，是水平滾動(dòng))。

2.間距

我們開發(fā)者需要考慮不同的內(nèi)容長(zhǎng)度。這意味著，間距應(yīng)該添加到組件中，即使它看起來不需要。

在這個(gè)例子中，我們?cè)谟疫呌幸粋€(gè)section標(biāo)題和一個(gè)操作按鈕。目前，它看起來還不錯(cuò)。但是，如果標(biāo)題再長(zhǎng)一些，會(huì)發(fā)生什么呢?

注意到文本太靠近按鈕了嗎?這里，你可能會(huì)考慮多行換行，但現(xiàn)在，我們先關(guān)注距。

如果標(biāo)題有空格和文本截?cái)?，我們不?huì)看到這樣的問題。

.section__title {
margin-right: 1rem;
}

3.長(zhǎng)內(nèi)容

在構(gòu)建布局時(shí)，考慮到長(zhǎng)的內(nèi)容是很重要的。正如你在前面所看到的，當(dāng)章節(jié)的標(biāo)題太長(zhǎng)時(shí)就會(huì)被截?cái)?。這是可選的，但對(duì)于某些UI來說，考慮到這一點(diǎn)很重要。

對(duì)我來說，這是一種防御性的CSS方法。在 "問題 "真正發(fā)生之前就去解決它，這很好。

這里有一份人名清單，現(xiàn)在看起來很完美

然而，由于這是用戶生成的內(nèi)容，我們需要小心如何防御布局，以防某些內(nèi)容太長(zhǎng)。請(qǐng)看下圖:

在這種布局中，一致性非常重要。為了實(shí)現(xiàn)這一點(diǎn)，我們可以使用 text-overflow和它的好友來簡(jiǎn)單地截?cái)嗝Q。

4. 防止圖像被拉伸或壓縮

在無法控制圖片高寬比的情況下，如果用戶上傳的圖片與高寬比不符，最好提前考慮并提供解決方案。

在下面的例子中，我們有一個(gè)帶有照片的卡片組件。它看起來不錯(cuò)。

當(dāng)用戶上傳一個(gè)不同大小的圖像時(shí)，它將被拉伸。這可不是什么好事?？纯磮D像是如何被拉伸的!

最簡(jiǎn)單的修復(fù)方法是使用CSS object-fit。

.card__thumb {
object-fit: cover;
}

在項(xiàng)目層面上，我傾向于為所有圖像添加 object-fit，以避免出現(xiàn)意外的結(jié)果。

5.鎖定滾動(dòng)鏈接

你是否曾經(jīng)打開一個(gè)模態(tài)并開始滾動(dòng)，然后當(dāng)你到達(dá)終點(diǎn)并繼續(xù)滾動(dòng)時(shí)，模態(tài)下面的內(nèi)容(主體元素)會(huì)滾動(dòng)?這就是所謂的滾動(dòng)鏈。

默認(rèn)情況下，當(dāng)觸及頁面頂部或者底部時(shí)(或者是其他可滾動(dòng)區(qū)域)，移動(dòng)端瀏覽器傾向于提供一種“觸底”效果，甚至進(jìn)行頁面刷新。你可能也發(fā)現(xiàn)了，當(dāng)對(duì)話框中含有可滾動(dòng)內(nèi)容時(shí)，一旦滾動(dòng)至對(duì)話框的邊界，對(duì)話框下方的頁面內(nèi)容也開始滾動(dòng)了——這被稱為“滾動(dòng)鏈”。。

在過去的幾年里，有一些黑科技來實(shí)現(xiàn)這一點(diǎn)，但現(xiàn)在，我們只需要使用CSS 即可，這要感謝overscroll-behavior CSS屬性。

在下面的圖中，可以看到默認(rèn)的滾動(dòng)鏈接行為。

為了提前避免這種情況，我們可以將其添加到任何需要滾動(dòng)的組件中(例如：聊天組件、移動(dòng)菜單...等)。這個(gè)屬性的好處是，在有滾動(dòng)之前，它不會(huì)產(chǎn)生影響。

.modal__content {
overscroll-behavior-y: contain;
overflow-y: auto;
}

6. CSS變量回退

CSS變量在網(wǎng)頁設(shè)計(jì)中得到了越來越多的應(yīng)用。我們可以應(yīng)用一種方法，在CSS變量值因某種原因?yàn)榭盏那闆r下，以一種不破壞體驗(yàn)的方式使用它們。

通過 JS 輸入CSS變量的值時(shí)特別有用。下面是一個(gè)例子:

.message__bubble {
max-width: calc(100% - var(--actions-width));
}

變量 --actions-width 在 calc() 函數(shù)中被使用，其值來自 JS。假設(shè) JS 由于某種原因失敗了，會(huì)發(fā)生什么?max-width 會(huì)被計(jì)算為零。

我們可以提前避免這種情況，在 var() 中添加一個(gè)回退值。

.message__bubble {
max-width: calc(100% - var(--actions-width, 70px));
}

這樣，如果變量沒有定義，就會(huì)使用回退 (70px)。這種方法可以在變量可能失敗的情況下使用。

7.使用固定寬度或高度

破壞布局的常見情況之一是對(duì)一個(gè)有不同長(zhǎng)度內(nèi)容的元素使用固定的寬度或高度。

固定高度

我經(jīng)?？吹街鲀?nèi)容部分有固定的高度，而內(nèi)容卻大于這個(gè)高度，這就導(dǎo)致了布局的破壞。如下所示：

.main {
height: 350px;
}

為了避免這種情況出現(xiàn)，可以使用 min-height 代替 height:

固定寬度

你有沒有見過按鈕，它的標(biāo)簽離左右邊緣太近?這是由于使用了固定寬度。

.button {
width: 100px;
}

如果按鈕的標(biāo)簽大于100px，它將靠近邊緣。如果它太長(zhǎng)，文本會(huì)泄露出來。這是不好的!

為了解決這個(gè)問題，我們可以簡(jiǎn)單地用 min-width 代替 width。

.button {
min-width: 100px;
}

8.忘記 background-Repeat

很多時(shí)候，當(dāng)使用一張大的圖片作為背景時(shí)，我們往往會(huì)忘記考慮設(shè)計(jì)在大屏幕上觀看時(shí)的情況。該背景將默認(rèn)重復(fù)。

這在筆記本屏幕上大多不會(huì)看到，但在大屏幕上很常見。

為了提前避免這種行為，請(qǐng)確保使用重置 background-repeat。

.hero {
background-image: url('..');
background-repeat: no-repeat;
}

9.垂直媒體查詢

有時(shí)，我們很想建立一個(gè)組件，只通過調(diào)整瀏覽器的寬度進(jìn)行測(cè)試。根據(jù)瀏覽器的高度進(jìn)行測(cè)試可以發(fā)現(xiàn)一些有趣的問題。

這里有一個(gè)我見過多次的例子。我們有一個(gè)帶有主要和次要鏈接組件。次要鏈接應(yīng)該位于旁白部分的最底部。

考慮一下下面的例子。主導(dǎo)航和次導(dǎo)航看起來還不錯(cuò)。在我看到的這個(gè)例子中，開發(fā)者給二級(jí)導(dǎo)航添加了 position: sticky，這樣它就可以粘在底部了。

然而，如果瀏覽器的高度較小，bug 就來了。注意這兩個(gè)導(dǎo)航是如何重疊的。

通過使用CSS垂直媒體查詢，我們可以避免這個(gè)問題。

@media (min-height: 600px) {
.aside__secondary {
position: sticky;
bottom: 0;
}
}

這樣，只有當(dāng)視口高度大于或等于600px 時(shí)，二級(jí)導(dǎo)航才會(huì)被粘在底部。好多了，對(duì)嗎?

可能有更好的方法來實(shí)現(xiàn)這一行為(比如使用 margin-auto)，但在這個(gè)例子中專注于垂直查詢。

10. 使用 justify-content:space-between

在一個(gè) flex 的容器中，我們可能會(huì)使用 justify-content 來使子項(xiàng)目之間有一定的間距。如果有一定數(shù)量的子項(xiàng)目，布局看起來會(huì)很好。然而，當(dāng)它們?cè)黾踊驕p少時(shí)，布局會(huì)看起來很奇怪。

考慮以下例子:

我們有一個(gè)有四個(gè)項(xiàng)目的 flex 容器。每個(gè)項(xiàng)目之間的間距不是 gap 或 margin，它之所以存在是因?yàn)槿萜饔?justify-content: space-between。

.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

當(dāng)項(xiàng)目的數(shù)量少于4個(gè)時(shí)，將發(fā)生以下情況：

這并不是好事。對(duì)此有不同的解決方案：

• margin
• flexbox gap(謹(jǐn)慎使用)
• padding(可應(yīng)用于每個(gè)子元素的父元素)
• 增加空的元素，作為間隔。

為了簡(jiǎn)單起見，我使用 gap。

.wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

11. 圖片上的文字

當(dāng)在圖片上放置文本時(shí)，必須考慮到圖像無法加載的情況。文本會(huì)是什么樣子。下面是一個(gè)例子：

文本看起來是可讀的，但當(dāng)圖像加載失敗時(shí)，它的可讀性變得很差。

我們通過給元素添加一個(gè)背景色來輕松解決這個(gè)問題。這個(gè)背景只有在圖片加載失敗時(shí)才會(huì)顯示出來。

12.小心CSS網(wǎng)格中的固定值

假設(shè)我們有一個(gè)包含aside和main的網(wǎng)格。CSS看起來是這樣的:

.wrapper {
display: grid;
grid-template-columns: 250px 1fr;
gap: 1rem;
}

由于缺乏空間，這在小的視口尺寸上會(huì)出現(xiàn)問題。為了避免這樣的問題，在使用上述CSS網(wǎng)格時(shí)，一定要使用媒體查詢。

@media (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns: 250px 1fr;
gap: 1rem;
}
}

13.只在需要的時(shí)候顯示滾動(dòng)條

我們可以控制顯示滾動(dòng)條或不只是在有很長(zhǎng)的內(nèi)容的情況下。盡管如此，強(qiáng)烈建議使用auto作為overflow的值?？紤]以下例子:

請(qǐng)注意，即使內(nèi)容很短，也有一個(gè)滾動(dòng)條可見。這對(duì)一個(gè)用戶界面來說并不是好事。作為用戶，在不需要滾動(dòng)條的情況下看到滾動(dòng)條是很混亂的。

.element {
overflow-y: auto;
}

使用overflow-y: auto，滾動(dòng)條只有在內(nèi)容較長(zhǎng)時(shí)才可見。否則，它就不顯示。

14.Scrollbar Gutter

另一件與滾動(dòng)有關(guān)的事情是 Scrollbar Gutter。以前面的例子為例，當(dāng)內(nèi)容變長(zhǎng)時(shí)，增加一個(gè)滾動(dòng)條會(huì)導(dǎo)致布局的轉(zhuǎn)移。布局移動(dòng)發(fā)生的原因是為滾動(dòng)條保留了一個(gè)空間。

Scrollbar Gutter 是內(nèi)邊框邊緣和外填充邊緣之間的空間。對(duì)于經(jīng)典滾動(dòng)條，Scrollbar Gutter 的大小與滾動(dòng)條的寬度相同。這些滾動(dòng)條通常是不透明的，并從相鄰的內(nèi)容中占用一些空間。

請(qǐng)看下圖:

請(qǐng)注意，由于顯示了滾動(dòng)條，當(dāng)內(nèi)容變長(zhǎng)時(shí)，它是如何移位的。我們可以通過使用scrollbar-gutter屬性來避免這種行為。

.element {
scrollbar-gutter: stable;
}

15. CSS Flexbox中的最小內(nèi)容尺寸

如果一個(gè) flex 項(xiàng)目中的文本元素或圖像大于或長(zhǎng)于該項(xiàng)目本身，瀏覽器就不會(huì)縮小它們。這是Flexbox 的默認(rèn)行為?？紤]以下例子：

.card {
display: flex;
}

當(dāng)標(biāo)題有一個(gè)很長(zhǎng)的詞時(shí)，它不會(huì)被包成一個(gè)新行。

即使我們使用 overflow-wrap: break-word，也不會(huì)起作用。

.card__title {
overflow-wrap: break-word;
}

要改變這種默認(rèn)行為，我們需要將 flex 項(xiàng)目的 min-width 設(shè)置為 0。這是因?yàn)?min-width 的默認(rèn)值是 auto，溢出會(huì)發(fā)生。

.card__title {
overflow-wrap: break-word;
min-width: 0;
}

同樣也適用于 flex-direction:column 布局，對(duì)應(yīng)的使用 min-height: 0。

16. CSS網(wǎng)格中的最小內(nèi)容尺寸

與flexbox類似，CSS grid對(duì)其子項(xiàng)目有一個(gè)默認(rèn)的最小內(nèi)容尺寸，即auto。這意味著，如果有一個(gè)元素比網(wǎng)格項(xiàng)大，它將溢出。

在上面的例子中，我們?cè)谥鞑糠种杏幸粋€(gè) carousel。

<div class="wrapper">
    <main>
        <section class="carousel"></section>
    </main>
    <aside></aside>
</div>

@media (min-width: 1020px) {
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 248px;
        grid-gap: 40px;
    }
}

.carousel {
    display: flex;
    overflow-x: auto;
}

由于 carousel是一個(gè) flex 布局，當(dāng)內(nèi)容超出時(shí)，默認(rèn)是不會(huì)換行的，所以會(huì)出現(xiàn)水平滾動(dòng)的。

為了解決這個(gè)問題，我們有三種不同的解決方：

• 使用 minmax()
• 將 min-width 應(yīng)用于網(wǎng)格項(xiàng)目
• 在網(wǎng)絡(luò)中添加 overflow: hidden

作為一種防御性的CSS機(jī)制，我會(huì)選擇第一種，即使用 minmax() 函數(shù)。

@media (min-width: 1020px) {
.wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr) 248px;
grid-gap: 40px;
}
}

Auto Fit Vs Auto Fill

在使用CSS網(wǎng)格 minmax() 函數(shù)時(shí)，決定使用 auto-fit 還是 auto-fill 的關(guān)鍵字很重要。一旦使用不當(dāng)，會(huì)導(dǎo)致意外的結(jié)果。

當(dāng)使用minmax()函數(shù)時(shí)，auto-fit關(guān)鍵字將擴(kuò)展網(wǎng)格項(xiàng)目以填補(bǔ)可用空間。而auto-fill將保留可用的空間，而不改變網(wǎng)格項(xiàng)的寬度。

也就是說，使用auto-fit可能會(huì)導(dǎo)致網(wǎng)格項(xiàng)目太寬，特別是當(dāng)它們小于預(yù)期時(shí)?？紤]一下下面的例子。

作者：Ahmad Shadeed 譯者：前端小智 來源：ishadeed 原諒：https://ishadeed.com/article/defensive-css/