- 重置 button 和 input 元素的背景
添加按鈕時，重置它的背景，否則在跨瀏覽器時它的呈現會有所不同。下面的例子分別展示了 Chrome 和 Safari 中的同一個按鈕，後者默認會有一個灰色背景。
重置背景可以解決這個問題：
button {
appearance: none;
background: transparent;
/* 其它樣式 */
}
- Overflow: scroll 和 auto
爲了限制一個元素的高度並允許用戶在其中滾動，添加 overflow: scroll-y。在 macOS 下的 Chrome 中，這看起來不錯，但是在 Windows 下的 Chrome 中，滾動條始終存在（即使內容很短）。這是因爲 scroll-y 會無視內容，一直顯示滾動條。而 overflow: auto 只在需要的時候纔會顯示滾動條。
左邊：macOS 下的 Chrome。右邊：Windows 下的 Chrome (大圖預覽)
.element {
height: 300px;
overflow-y: auto;
}
- 添加 flex-wrap
要想讓一個元素表現得像彈性容器那樣，只需添加 display: flex。但是，如果沒有添加 flex-wrap ，那麼當屏幕尺寸縮小的時候，將會出現水平滾動條。
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
上面的例子在大屏幕下表現正常。在移動端下，瀏覽器將會出現水平滾動條。
左邊：出現水平滾動條，並且項目沒有換行。右邊：項目換行，呈兩行顯示 (大圖預覽)
解決方法很簡單。wrapper 應該在空間不足時讓項目換行。
.wrapper {
display: flex;
flex-wrap: wrap;
}
- 當彈性項目數量不定時，不要使用 justify-content: space-between
對一個彈性容器應用 justify-content: space-between 時，它會爲元素分配空間，使它們互相之間的距離相等。我們的例子中有 8 個卡片項目，看起來沒什麼問題。如果由於某種原因，項目的數量是 7 呢？第二行的元素看起來將會與第一行的不同。
在這種情況下，使用 CSS 網格將會更加合適。 - 長詞和鏈接
在手機屏幕上瀏覽文章的時候，一個長詞或者內聯鏈接可能會導致頁面出現水平滾動條。使用 CSS 的 word-break 可以防止這個問題。
.article-content p {
word-break: break-all;
}
- 透明漸變
當使用透明起點和終點添加漸變的時候，在 Safari 下會呈現一片漆黑。這是因爲 Safari 無法識別關鍵字 transparent。通過使用 rgba(0, 0, 0, 0) 來替代它，我們可以達到預期的效果。
.section-hero {
background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
/* 其它樣式 */
}
- CSS 網格佈局中關於 auto-fit 和 auto-fill 差異的誤解
在 CSS 網格佈局中，repeat 函數可以在不使用媒體查詢的情況下創建響應式列布局。爲此，可以使用 auto-fill 或者 auto-fit。
.wrapper {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
auto-fill 將會在不擴展列寬度的情況下對它們進行排列，而auto-fit 則會在存在空列的時候使其寬度塌陷爲 0
8. 當視窗高度不足時將元素固定在屏幕頂部
如果你在視窗不夠高的時候將一個元素固定在屏幕頂部，會發生什麼事呢？很簡單：它將佔用屏幕空間，最終導致可供用戶瀏覽網站的垂直區域變得很小、很不舒服，影響他們的體驗。
@media (min-height: 500px) {
.site-header {
position: sticky;
top: 0;
/* 其它樣式 */
}
}
上面的代碼中，我們讓瀏覽器只在視窗高度等於或大於 500 像素的時候才固定頂部。
還有一點很重要：使用 position: sticky 的時候，除非指定 top 屬性，否則它不會生效
9. 爲圖片設置 max-width
添加圖片時，定義 max-width: 100%，這樣圖片會在屏幕較小的時候改變大小。否則瀏覽器將會顯示水平滾動條。
img {
max-width: 100%;
}
- 使用 CSS 網格定義 main 和 aside 元素
CSS 網格可用於定義佈局中的 main 部分和 aside 部分，這是 CSS 網格的絕佳用途。問題是，即使 aside 是空的，它的高度也會和 main 的高度相等。
要修復這個問題，可以讓 aside 元素與其父元素的起點對齊，這樣它的高度就不會擴展了。
.wrapper {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 20px;
}
// align-self 將會讓 aside 元素與其父元素的起點對齊。
aside {
grid-column: 1 / 4;
grid-row: 1;
align-self: start;
}
main {
grid-column: 4 / 13;
}
- 給一個 SVG 添加 fill
使用 SVG 時，如果在 SVG 內部添加 fill，有時候它可能不會如預期的那樣生效。要修復這個問題，要麼移除 SVG 自身的 fill 屬性，要麼覆蓋 fill: color。
舉個例子：
.some-icon {
fill: #137cbf;
}
如果 SVG 有一個內聯 fill 的話，這段代碼將不會生效。應該替換爲：
.some-icon path {
fill: #137cbf;
}
- 使用僞元素
無論何時，我都很喜歡使用僞元素。僞元素爲我們提供了一種創建假元素的方法，主要用來裝飾，同時又無需將其添加到 HTML 中。
使用它們的時候，開發者可能會忘記做下面的事情：
添加 content: “” 屬性，
在沒有定義 display 屬性的情況下設置它們的 width 和 height
下面的例子中，我們有一個標題，其標記是一個僞元素。必須給元素添加 content: “” 屬性，同時還要爲它設置 display: inline-block ，以使 width 和 height 像預期的那樣生效。 - 使用 display: inline-block 時奇怪的空隙
給兩個或兩個以上的元素設置 display: inline-block 或者 display: inline ，將會導致它們之間產生一個微小的空隙。原因是瀏覽器會將元素當作字詞去解釋，從而給每個元素之間添加一個字符的空隙。
下面的例子中，每個項目的右側都有一個 8px 的空隙，但是使用 display: inline-block 而產生的小空隙將會使其變爲 12px，這不是我們想要的效果。
li:not(:last-child) {
margin-right: 8px;
}
通過給父元素設置 font-size: 0 可以簡單地解決這個問題。
ul {
font-size: 0;
}
li {
font-size: 16px; /* 應該在這裏重新設置字體大小，因爲它會從父元素繼承 `font-size: 0`。*/
}
- 分配一個標籤元素給一個輸入框時，添加 for=“ID”
使用表單元素時，確保所有的 label 元素都分配到了一個 ID。這將提高它們的可訪問性，點擊的時候，相關的輸入框將獲得焦點。
<label for="emailAddress">Email address:</label>
<input type="email" id="emailAddress">
- 交互式 HTML 元素的字體不生效
給整個文檔設置字體的時候，字體並不會應用於諸如 input， button select 和 textarea 這些元素上。默認情況下，它們並不會繼承文檔字體，因爲瀏覽器給它們應用了系統字體。
要修復這個問題，直接設置字體屬性：
input, button, select, textarea {
font-family: your-awesome-font-name;
}
- 水平滾動條
有些元素的寬度可能會導致出現一個水平滾動條。
要找到問題的根源，最簡單的方法就是使用 CSS outline。Addy Osmani 寫了一個方便的腳本 。將其添加到瀏覽器的控制檯，頁面上所有元素的輪廓都會顯示出來。
[].forEach.call($$("*"), function(a) {
a.style.outline =
"1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});
- 壓縮或拉伸圖片
用 CSS 調整一張圖片的大小時，如果縱橫比與圖片的寬高不一致，則圖片會被壓縮或拉伸。
解決方法很簡單：使用 CSS 的 object-fit。它的功能和給背景圖片設置 background-size: cover 類似。
img {
object-fit: cover;
}
object-fit 並非百試百靈。一些圖片必須在不裁剪或者不調整大小的情況下顯示，並且某些平臺會強制用戶以特定的尺寸裁剪或上傳圖片。例如，Dribbble 規定上傳的縮略圖尺寸爲 800 x 600 像素。
*object-fit CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。
您可以通過使用 object-position 屬性來切換被替換元素的內容對象在元素框內的對齊方式。
object-fit 屬性由下列的值中的單獨一個關鍵字來指定。
取值
contain
被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
cover
被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。
fill
被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那麼該對象將被拉伸以適應內容框。
none
被替換的內容將保持其原有的尺寸。
scale-down
內容的尺寸與 none 或 contain 中的一個相同，取決於它們兩個之間誰得到的對象尺寸會更小一些。
18. 爲 input 添加正確的 type
爲 input 使用正確的 type。這將改善移動端的用戶體驗，並使用戶更容易訪問。
這是部分 HTML：
<form action="">
<p>
<label for="name">Full name</label>
<input type="text" id="name">
</p>
<p>
<label for="email">Email</label>
<input type="email" id="email">
</p>
<p>
<label for="phone">Phone</label>
<input type="tel" id="phone"> //手機號type='tel'
</p>
</form>
- RTL 佈局中的手機號碼
在一個從右到左的佈局中添加諸如 + 972-123555777 的手機號碼時，加號將會位於號碼末尾。要修復這個問題，可以重新指定手機號碼的方向。
p {
direction: ltr;
}