CSS 專家密技/CSS Protips 14–24

GitHub CSS 專家密技 / CSS Protips 第 14–24 項的筆記

Photo by Charles 🇵🇭 on Unsplash

承續

• CSS 專家密技/CSS Protips 01–06
• CSS 專家密技/CSS Protips 07–13

本次筆記參考來源

• 原文：AllThingsSmitty/css-protips (Will 保哥翻譯的中文版)
• 影片：CSS專家密技3 — CSS Protips — 阿莫斯の網頁料理室

▎目錄

14. 利用 Flexbox 去除多餘的 Margin 技巧

15. 利用屬性選擇器填滿空白連結的文字內容

16. 幫沒有類別的連結設定一個預設樣式

17. 一致的垂直韻律

18. 等比例的方塊

19. 為破圖定義樣式

20. 用 rem 來調整全域大小；用 em 來調整區域大小

21. 隱藏沒有靜音並設定自動播放的影片

22. 使用 :root 選擇器來設定彈性的字體大小

23. 為了更好的行動體驗來設定表單元素的 font-size

24. 使用指標事件來控制滑鼠事件

▎14. 利用 Flexbox 去除多餘的 Margin 技巧

排版的時候，為了設計出每一欄的間隙 (gutters)，一般都會用到像是 nth-、first- 和 last-child 的技巧，來去除頭尾多餘的間隙，不如使用 Flexbox 的 space-between 屬性：

.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%;
}

補充：space-between / space-around / space-evenly 的差異

Codepen 示範連結

[ 返回目錄 ]

▎15. 利用屬性選擇器填滿空白連結的文字內容

當 <a> 元素沒有文字內容，但有 href 屬性的時候，可以這樣做：

a[href^='http']:empty::before {
  content: attr(href);
}

補充：CSS 選擇器說明

1. a[href]
   選擇所有具有 href 屬性的 a
2. a[href^="http"]
   選擇所有具有 href 屬性且開頭為 http 的 a
3. :empty
   選擇沒有任何子代的元素，這裡的子代包含文字

[ 返回目錄 ]

▎16. 幫沒有類別的連結設定一個預設樣式

幫沒有套用 class 的超連結設定一個預設樣式：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

使用者透過後台 CMS 系統插入的超連結通常沒有 class 屬性，以上樣式可以針對這些超連結進行設定，且不會影響其它樣式定義。

[ 返回目錄 ]

▎17. 一致的垂直韻律

在元素中使用 通用選擇器 (*) ，可以確保一致的垂直韻律 (consistent vertical rhythm)：

.intro > * {
  margin-bottom: 1.25rem;
}

一致的垂直韻律可以提供視覺美感，並且讓內容更具可讀性

[ 返回目錄 ]

▎18. 等比例的方塊

要建立一個固定比例的方塊 (Box)，你需要的就是將 padding-top 或 padding-bottom 設定到 div 元素：

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}
.container div {
  border: 2px dashed #ddd;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

在 padding-bottom 設定 20％ 意味著各個 div 方塊的高度等同於 20% 的寬度。無論 Viewport 現在的寬度多少，子元素的 div 將維持其寬高比（100％ / 20％ = 5:1）。

補充：使用 padding-top 或 padding-bottom 的差異

Codepen 示範連結

[ 返回目錄 ]

▎19. 為破圖定義樣式

只要一點 CSS 就可以美化所有破圖：

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

接著新增一個 偽元素規則 (pseudo-elements rules) 來顯示使用者訊息，以及這張破圖的 URL 參考：

img::before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}
img::after {
  content: '(url: ' attr(src) ')';
  display: block;
  font-size: 12px;
}

想學習更多這類樣式技巧，可以參考 Ire Aderinokun 的 原始文章。

[ 返回目錄 ]

▎20. 用 rem 來調整全域大小；用 em 來調整區域大小

在根元素設定基礎字體大小後 (html { font-size: 100%; }), 使用 em 設定文字元素的字體大小：

h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

然後設定模組的字體大小為 rem：

article {
  font-size: 1.25rem;
}
aside .module {
  font-size: 0.9rem;
}

現在，每個模組變得獨立，更容易、靈活的樣式便於維護。

[ 返回目錄 ]

▎21. 隱藏沒有靜音並設定自動播放的影片

當你在一個可以自訂樣式的後台環境設定網站樣式時，這是一個不錯的小技巧。畢竟自動撥放影片是蠻惱人的，這個技巧可以幫助你避免影片在沒有靜音的情況下自動撥放。

video[autoplay]:not([muted]) {
  display: none;
} 

[ 返回目錄 ]

▎22. 使用 :root 選擇器來設定彈性的字體大小

在響應式版面(responsive layout)中，字體大小通常需要根據不同的 Viewport (畫面大小) 進行調整。你可以根據 :root 所定義的 Viewport 高度與寬度來調整字體大小：

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

現在你便能使用依 :root 字級為基準的 rem 單位了。

body {
  font: 1rem/1.6 sans-serif;
}

補充：CSS 單位 vw, vh, vmin, vmax

• 1vw=1% 螢幕的寬度
• 1vh=1% 螢幕的高度
• 1vmin=裝置中寬度or高度較小的那個值
• 1vmax=裝置中寬度or高度較大的那個值

[ 返回目錄 ]

▎23. 為了更好的行動體驗來設定表單元素的 font-size

為了避免使用者在行動瀏覽器 (iOS Safari, 等等）點擊 <select> 的下拉選單時在 HTML 表單元素進行縮放，你可以加上 font-size 到這些選取器樣式規則：

input[type='text'],
input[type='number'],
select,
textarea {
  font-size: 16px;
}

• 網頁字級表

[ 返回目錄 ]

▎24. 使用指標事件来控制滑鼠事件

指標事件允許您指定滑鼠如何與其觸控的元素進行互動。 要停用按鈕上的預設指標事件，例如：

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

簡單來說，就是讓滑鼠失效。

[ 返回目錄 ]

▎後記

CSS 專家秘技筆記到此結束。身為初學者，這裡面提到的很多內容之前沒看過也沒用過，影片看完不代表融會貫通，但也非一無所獲。有些技巧透過影片說明、實際操作、資料搜尋，足夠開開眼界、增加印象、理解觀念。之後看到其它前端相關影片，有時間的話也會像這樣整理出來。

CSS 專家密技系列

• CSS 專家密技/CSS Protips 01–06
• CSS 專家密技/CSS Protips 07–13
• CSS 專家密技/CSS Protips 14–24

如果想看更多文章，點擊以下連結可以看到我的文章清單：
* 所有文章清單
如果您喜歡這篇文章，或覺得這篇文章有幫到您，想給我一些支持，可以這麼做：
1. 登入 Liker 點擊下方 LikeButton 免費按讚(按5下)，或直接打賞 LikeCoin
2. 透過街口支付請我喝杯咖啡！
3. 拍拍手(1~50下) 給我一些鼓勵。

點擊 LikeButton 可幫助作者得到回饋

透過街口支付小額支持作者