摘要：我們的例子中有個(gè)卡片項(xiàng)目，看起來(lái)沒(méi)什么問(wèn)題。這將改善移動(dòng)端的用戶體驗(yàn)，并使用戶更容易訪問(wèn)。大圖預(yù)覽結(jié)論這里提到的所有問(wèn)題都是我在前端開(kāi)發(fā)工作中最常遇到的。你在中有沒(méi)有經(jīng)常遇到什么問(wèn)題呢歡迎在評(píng)論區(qū)分享

原文地址：Common CSS Issues For Front-End Projects

原文作者：Ahmad Shadeed
譯者：Chor

快速摘要：近年來(lái)，跨瀏覽器的渲染和交互已經(jīng)愈加一致。不過(guò)，它仍然沒(méi)有達(dá)到完全一致，有很多小問(wèn)題會(huì)讓你出錯(cuò)。除了這些問(wèn)題之外，還有不同的屏幕尺寸、語(yǔ)言偏好和明顯的人為錯(cuò)誤等不確定因素，我們從中發(fā)現(xiàn)了許多會(huì)讓開(kāi)發(fā)者出錯(cuò)的小問(wèn)題。

在瀏覽器中實(shí)現(xiàn)用戶界面時(shí)，最好是盡可能地減小這些差異和問(wèn)題，以便 UI 呈現(xiàn)出預(yù)測(cè)的樣子。記住所有的這些差異是很困難的，所以我列舉了一系列常見(jiàn)問(wèn)題以及解決方案。當(dāng)你在做一個(gè)新項(xiàng)目的時(shí)候，可以將其作為一份方便的參考指南。

我們開(kāi)始吧。

添加按鈕時(shí)，重置它的背景，否則在跨瀏覽器時(shí)它的呈現(xiàn)會(huì)有所不同。下面的例子分別展示了 Chrome 和 Safari 中的同一個(gè)按鈕，后者默認(rèn)會(huì)有一個(gè)灰色背景。

(大圖預(yù)覽)

重置背景可以解決這個(gè)問(wèn)題：

button {
    appearance: none;
    background: transparent;
    /* 其它樣式 */
}

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed（@shadeed）在 Codepen 上的代碼 按鈕和輸入框。

為了限制一個(gè)元素的高度并允許用戶在其中滾動(dòng)，添加 overflow: scroll-y。在 macOS 下的 Chrome 中，這看起來(lái)不錯(cuò)，但是在 Windows 下的 Chrome 中，滾動(dòng)條始終存在（即使內(nèi)容很短）。這是因?yàn)?scroll-y 會(huì)無(wú)視內(nèi)容，一直顯示滾動(dòng)條。而 overflow: auto 只在需要的時(shí)候才會(huì)顯示滾動(dòng)條。

左邊：macOS 下的 Chrome。右邊：Windows 下的 Chrome (大圖預(yù)覽)

.element {
    height: 300px;
    overflow-y: auto;
}

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed（@shadeed）在 Codepen 上的代碼 overflow-y。

要想讓一個(gè)元素表現(xiàn)得像彈性容器那樣，只需添加 display: flex。但是，如果沒(méi)有添加 flex-wrap ，那么當(dāng)屏幕尺寸縮小的時(shí)候，將會(huì)出現(xiàn)水平滾動(dòng)條。

.wrapper {
    display: flex;
}

.item {
    flex: 0 0 120px;
    height: 100px;
}

上面的例子在大屏幕下表現(xiàn)正常。在移動(dòng)端下，瀏覽器將會(huì)出現(xiàn)水平滾動(dòng)條。

左邊：出現(xiàn)水平滾動(dòng)條，并且項(xiàng)目沒(méi)有換行。右邊：項(xiàng)目換行，呈兩行顯示 (大圖預(yù)覽)

解決方法很簡(jiǎn)單。wrapper 應(yīng)該在空間不足時(shí)讓項(xiàng)目換行。

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed（@shadeed）在 Codepen 上的代碼 overflow-y。

對(duì)一個(gè)彈性容器應(yīng)用 justify-content: space-between 時(shí)，它會(huì)為元素分配空間，使它們互相之間的距離相等。我們的例子中有 8 個(gè)卡片項(xiàng)目，看起來(lái)沒(méi)什么問(wèn)題。如果由于某種原因，項(xiàng)目的數(shù)量是 7 呢？第二行的元素看起來(lái)將會(huì)與第一行的不同。

包含 8 個(gè)項(xiàng)目的 wrapper (大圖預(yù)覽)

包含 7 個(gè)項(xiàng)目的 wrapper(大圖預(yù)覽)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed（@shadeed）在 Codepen 上的代碼 overflow-y。

在這種情況下，使用 CSS 網(wǎng)格將會(huì)更加合適。

在手機(jī)屏幕上瀏覽文章的時(shí)候，一個(gè)長(zhǎng)詞或者內(nèi)聯(lián)鏈接可能會(huì)導(dǎo)致頁(yè)面出現(xiàn)水平滾動(dòng)條。使用 CSS 的 word-break 可以防止這個(gè)問(wèn)題。

(大圖預(yù)覽)

.article-content p {
    word-break: break-all;
}   

(大圖預(yù)覽)

詳情查看 CSS-Tricks 。

當(dāng)使用透明起點(diǎn)和終點(diǎn)添加漸變的時(shí)候，在 Safari 下會(huì)呈現(xiàn)一片漆黑。這是因?yàn)?Safari 無(wú)法識(shí)別關(guān)鍵字 transparent。通過(guò)使用 rgba(0, 0, 0, 0) 來(lái)替代它，我們可以達(dá)到預(yù)期的效果。注意下面的截圖：

頂部： Chrome 70。底部：Safari 12 (大圖預(yù)覽)

.section-hero {
    background: linear-gradient(transparent, #d7e0ef), #527ee0;
    /* 其它樣式 */
}

應(yīng)該替換為：

.section-hero {
    background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
    /* 其它樣式 */
}

在 CSS 網(wǎng)格布局中，repeat 函數(shù)可以在不使用媒體查詢的情況下創(chuàng)建響應(yīng)式列布局。為此，可以使用 auto-fill 或者 auto-fit。

.wrapper {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

(大圖預(yù)覽)

簡(jiǎn)而言之，auto-fill 將會(huì)在不擴(kuò)展列寬度的情況下對(duì)它們進(jìn)行排列，而auto-fit 則會(huì)在存在空列的時(shí)候使其寬度塌陷為 0。Sara Soueidan 寫(xiě)了一篇不錯(cuò)的文章討論過(guò)這個(gè)問(wèn)題。

如果你在視窗不夠高的時(shí)候?qū)⒁粋€(gè)元素固定在屏幕頂部，會(huì)發(fā)生什么事呢？很簡(jiǎn)單：它將占用屏幕空間，最終導(dǎo)致可供用戶瀏覽網(wǎng)站的垂直區(qū)域變得很小、很不舒服，影響他們的體驗(yàn)。

@media (min-height: 500px) {
    .site-header {
        position: sticky;
        top: 0;
        /* 其它樣式 */
    }
}

上面的代碼中，我們讓瀏覽器只在視窗高度等于或大于 500 像素的時(shí)候才固定頂部。

還有一點(diǎn)很重要：使用 position: sticky 的時(shí)候，除非指定 top 屬性，否則它不會(huì)生效。

(大圖預(yù)覽)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed（@shadeed）在 Codepen 上的代碼 overflow-y。

添加圖片時(shí)，定義 max-width: 100%，這樣圖片會(huì)在屏幕較小的時(shí)候改變大小。否則瀏覽器將會(huì)顯示水平滾動(dòng)條。

img {
    max-width: 100%;
}

CSS 網(wǎng)格可用于定義布局中的 main 部分和 aside 部分，這是 CSS 網(wǎng)格的絕佳用途。問(wèn)題是，即使 aside 是空的，它的高度也會(huì)和 main 的高度相等。

要修復(fù)這個(gè)問(wèn)題，可以讓 aside 元素與其父元素的起點(diǎn)對(duì)齊，這樣它的高度就不會(huì)擴(kuò)展了。

.wrapper {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 20px;
}

// align-self 將會(huì)讓 aside 元素與其父元素的起點(diǎn)對(duì)齊。
aside {
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: start;
}

main {
    grid-column: 4 / 13;
}

(大圖預(yù)覽)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed（@shadeed）在 Codepen 上的代碼 overflow-y。

使用 SVG 時(shí)，如果在 SVG 內(nèi)部添加 fill，有時(shí)候它可能不會(huì)如預(yù)期的那樣生效。要修復(fù)這個(gè)問(wèn)題，要么移除 SVG 自身的 fill 屬性，要么覆蓋 fill: color。

舉個(gè)例子：

.some-icon {
    fill: #137cbf;
}    

如果 SVG 有一個(gè)內(nèi)聯(lián) fill 的話，這段代碼將不會(huì)生效。應(yīng)該替換為：

.some-icon path {
    fill: #137cbf;
}

無(wú)論何時(shí)，我都很喜歡使用偽元素。偽元素為我們提供了一種創(chuàng)建假元素的方法，主要用來(lái)裝飾，同時(shí)又無(wú)需將其添加到 HTML 中。

使用它們的時(shí)候，開(kāi)發(fā)者可能會(huì)忘記做下面的事情：

添加 content: "" 屬性，

在沒(méi)有定義 display 屬性的情況下設(shè)置它們的 width 和 height

下面的例子中，我們有一個(gè)標(biāo)題，其標(biāo)記是一個(gè)偽元素。必須給元素添加 content: "" 屬性，同時(shí)還要為它設(shè)置 display: inline-block ，以使 width 和 height 像預(yù)期的那樣生效。

(大圖預(yù)覽)

給兩個(gè)或兩個(gè)以上的元素設(shè)置 display: inline-block 或者 display: inline ，將會(huì)導(dǎo)致它們之間產(chǎn)生一個(gè)微小的空隙。原因是瀏覽器會(huì)將元素當(dāng)作字詞去解釋，從而給每個(gè)元素之間添加一個(gè)字符的空隙。

下面的例子中，每個(gè)項(xiàng)目的右側(cè)都有一個(gè) 8px 的空隙，但是使用 display: inline-block 而產(chǎn)生的小空隙將會(huì)使其變?yōu)?12px，這不是我們想要的效果。

li:not(:last-child) {
    margin-right: 8px;
}

(大圖預(yù)覽)

通過(guò)給父元素設(shè)置 font-size: 0 可以簡(jiǎn)單地解決這個(gè)問(wèn)題。

ul {
    font-size: 0;
}

li {
    font-size: 16px; /* 應(yīng)該在這里重新設(shè)置字體大小，因?yàn)樗鼤?huì)從父元素繼承 `font-size: 0`。*/
}

(大圖預(yù)覽)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed（@shadeed）在 Codepen 上的代碼 overflow-y。

使用表單元素時(shí)，確保所有的 label 元素都分配到了一個(gè) ID。這將提高它們的可訪問(wèn)性，點(diǎn)擊的時(shí)候，相關(guān)的輸入框?qū)@得焦點(diǎn)。

Email address:

(大圖預(yù)覽)

給整個(gè)文檔設(shè)置字體的時(shí)候，字體并不會(huì)應(yīng)用于諸如 input， button select 和 textarea 這些元素上。默認(rèn)情況下，它們并不會(huì)繼承文檔字體，因?yàn)闉g覽器給它們應(yīng)用了系統(tǒng)字體。

要修復(fù)這個(gè)問(wèn)題，直接設(shè)置字體屬性：

input, button, select, textarea {
    font-family: your-awesome-font-name;
}

有些元素的寬度可能會(huì)導(dǎo)致出現(xiàn)一個(gè)水平滾動(dòng)條。

要找到問(wèn)題的根源，最簡(jiǎn)單的方法就是使用 CSS outline。Addy Osmani 寫(xiě)了一個(gè)方便的腳本 。將其添加到瀏覽器的控制臺(tái)，頁(yè)面上所有元素的輪廓都會(huì)顯示出來(lái)。

[].forEach.call($$("*"), function(a) {
    a.style.outline =
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

(大圖預(yù)覽)

用 CSS 調(diào)整一張圖片的大小時(shí)，如果縱橫比與圖片的寬高不一致，則圖片會(huì)被壓縮或拉伸。

解決方法很簡(jiǎn)單：使用 CSS 的 object-fit。它的功能和給背景圖片設(shè)置 background-size: cover 類似。

img {
    object-fit: cover;
}

(大圖預(yù)覽)

object-fit 并非百試百靈。一些圖片必須在不裁剪或者不調(diào)整大小的情況下顯示，并且某些平臺(tái)會(huì)強(qiáng)制用戶以特定的尺寸裁剪或上傳圖片。例如，Dribbble 規(guī)定上傳的縮略圖尺寸為 800 x 600 像素。

為 input 使用正確的 type。這將改善移動(dòng)端的用戶體驗(yàn)，并使用戶更容易訪問(wèn)。

這是部分 HTML：

    

        Full name
        
    
    

        Email
        
    
    

        Phone
        
    

每個(gè)輸入框分別獲取焦點(diǎn)時(shí)，看起來(lái)是這樣的：

(大圖預(yù)覽)

在一個(gè)從右到左的布局中添加諸如 + 972-123555777 的手機(jī)號(hào)碼時(shí)，加號(hào)將會(huì)位于號(hào)碼末尾。要修復(fù)這個(gè)問(wèn)題，可以重新指定手機(jī)號(hào)碼的方向。

p {
    direction: ltr;
}

(大圖預(yù)覽)

這里提到的所有問(wèn)題都是我在前端開(kāi)發(fā)工作中最常遇到的。我的目標(biāo)是在開(kāi)發(fā) web 項(xiàng)目時(shí)定期檢查這份清單。

你在 CSS 中有沒(méi)有經(jīng)常遇到什么問(wèn)題呢？歡迎在評(píng)論區(qū)分享！