竹白筆記本,學習筆記,2019/03/21
CSS 專家密技
CSS Protips
CSS Reset 可以幫你在不同的瀏覽器上維持一致的樣式風格。
幾套常見的 CSS Reset:
因為 reset.css 重置了各個瀏覽器的樣式設定,使得有些有用、常用標籤的默認樣式必須要重新設定,因為這個問題,有人開發出了 Normalize.css。
在 Normalize.css 的官方頁面上點出了他們的目標:
最大的特色就是保留原本預設 HTML 標籤的樣式,僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整。
更簡潔的 CSS Reset 方法:
box-sizing
一般使用 box-sizing
都是:
但假設今天有一個元件是使用 box-sizing: content-box;
:
元件中的其他子元素也要是 content-box
,但使用第一種方法設定 box-sizing
會影響到。
所以讓 box-sizing
屬性自動從 html
元素繼承下來 :
如此一來,你就很容易的在其他外掛或元件裡改變 box-sizing
的值。
unset
而不是重置所有屬性unset
從其父級繼承,則將該屬性重新設置為繼承的值,如果沒有繼承父級樣式,則將該屬性重新設置為初始值。
inherit
initial
舉個例子,先列舉一些 CSS 中默認繼承父級樣式的屬性:
font-size
, font-family
, color
, text-indent
border
, padding
, margin
, width
, height
all: unset;
將元素中所有樣式屬性回復到預設值:
:not()
選擇器來決定表單是否顯示邊框假設你用以下樣式先替元素新增邊框
然後在最後一個元素去除邊框
不過你可以改用 :not()
偽類別 (pseudo-class) 來做到完全相同的效果:
當然,你也可以用 .nav li + li
,但是使用 :not()
可以使語句更加清晰,更具可讀性。
CodePen::not 選擇器
line-height
加入到 body
元素你不必為分別為每一個 <p>
、<h*>
元素加入 line-height
樣式,相反的,你應該直接新增到 body
元素:
所有的文字元素預設就會繼承 body
的樣式。
給予使用者回饋,讓使用者可以距焦、確定所在位置。
CodePen:Search Box
考量到 CSS 的優先權,在超連結中要註意擺放順序,由上而下依序為:
此處有問題,故跳過。
使列表的每項都由逗號分隔:
列表中最後一項不用加逗號,所以可以使用 :not() 偽類別 (pseudo-class)。
nth-child
來選擇元素使用負數的 nth-child
可以選擇 1 至 n 個元素。
或者使用 :not()
選擇器來決定表單是否顯示邊框:
SVG 在所有解析度下都可以良好縮放,並且支援 IE9 之後的所有瀏覽器。
注意: 如果你有一個只用 SVG 圖示的按鈕,只給看的見的人來點選。當 SVG 無法載入的時候,以下樣式可以幫助你維持網頁的可及性(Accessibility):
Lobotomized Owl(貓頭鷹)
在此範例中,在文件中所有的元素,只要緊接著其他元素,就會套用一個 margin-top: 1.5em
樣式。
效能不好,不建議使用。
max-height
來建立純 CSS 的捲動軸你可以透過 max-height
與 overflow-y: hidden
來實作出 CSS-only 的捲動軸:
當滑鼠移到 .slider
的元素時,元素的內容如果過多,最大高度只會擴展到 max-height
的值,而且會自動顯示捲動軸。
CodePen:建立純 CSS 的捲動軸
此方法有個缺點,因為需要鼠標移過去才會顯示卷軸,使用者會不知道此處可以捲動,所以需要額外增加提示。
表格中要維持每一格都等寬是一件痛苦的是,所以你應該嘗試用 table-layout: fixed
來讓所有儲存格維持等寬:
CodePen:Equal-Width Table Cells
排版的時候,為了設計出每一欄的間隙(gutters),一般都會用到像是 nth-
、first-
和 last-child
的技巧,來去除頭尾多餘的間隙,不如使用 Flexbox 的 space-between
屬性:
當 <a>
元素沒有文字內容,但有 href
屬性的時候,可以這樣做:
:empty
代表沒有子元素的元素。子元素只可以是元素節點或文本(包括空格)。
CodePen:Use Attribute Selectors with Empty Links
幫沒有套用 class 的超連結設定一個預設樣式:
使用者透過後台 CMS 系統插入的超連結通常沒有 class
屬性,以上樣式可以針對這些超連結進行設定,且不會影響其它樣式定義。
在元素中使用 通用選擇器 *
,可以確保一致的垂直韻律 (consistent vertical rhythm):
一致的垂直韻律可以提供視覺美感,並且讓內容更具可讀性。
沒啥用的技巧
要建立一個固定比例的方塊(Box),你需要的就是將 padding-top
或 padding-bottom
設定到 <div>
元素:
在 padding-bottom
設定 20%
意味著各個 div 方塊的高度等同於 20% 的寬度。無論 Viewport 現在的寬度多少,子元素的 div 將維持其寬高比(100% / 20% = 5:1)。
CodePen:Intrinsic Ratio Boxes
只要一點 CSS 就可以美化所有破圖:
接著新增一個 偽元素規則(pseudo-elements rules)來顯示使用者訊息,以及這張破圖的 URL 參考:
想學習更多這類樣式技巧,可以參考 Ire Aderinokun 的 原始文章。
rem
來調整全域大小;用 em
來調整區域大小在根元素設定基礎字體大小後(html { font-size: 100%; }
), 使用 em
設定文字元素的字體大小:
然後設定模組的字體大小為 rem
:
現在,每個模組變得獨立,更容易、靈活的樣式便於維護。
當你在一個可以自訂樣式的後台環境設定網站樣式時,這是一個不錯的小技巧。畢竟自動撥放影片是蠻惱人的,這個技巧可以幫助你避免影片在沒有靜音的情況下自動撥放。
:root
選擇器來設定彈性的字體大小在響應式版面(responsive layout)中,字體大小通常需要根據不同的 Viewport(畫面大小)進行調整。你可以根據 :root
所定義的 Viewport 高度與寬度來調整字體大小:
現在你便能使用依 :root
字級為基準的 rem
單位了。
CodePen:Use :root for Flexible Type
font-size
為了避免使用者在行動瀏覽器(iOS Safari, 等等)點擊 <select>
的下拉選單時在 HTML 表單元素進行縮放,你可以加上font-size
到這些選取器樣式規則:
pointer-events
控制鼠標事件pointer-events
允許您指定鼠標如何與其觸摸的元素進行交互。要禁用按鈕上的默認指針事件,例如: