CSS 相容性設計

檢查目標瀏覽器對屬性的相容性

1. CanIUSE
   • usage relative
2. gs.statcounter.com
3. MDN
4. 各瀏覽器公司的網站...

確保各個瀏覽器顯示 “正常”

瀏覽器不支持 border-radius ? 安啦～沒有圓角看起來還是正常的～不影響使用～

完全沒有 CSS 時, 網頁的內容呈現仍需要保有可讀性

• 嘗試註釋掉不支持的屬性看看狀況; 或是在瀏覽器開關 css 的屬性
• Perfect —> OK: 小細節的差異過省略, 例如圓角

CSS Override

/**
 * 此處的 display: flex 用於處理垂直置中;
 * 不支援 flex 的瀏覽器吃到 padding: 2em 0 的設定, 雖不完全置中,
 * 但也接近原始設計
 */
padding: 2em 0;
display: flex;
/*
 * 不支援 vh 單位的瀏覽器會吃到 height: 500px 的設定 
 * 而 height: 500px 就呈現上還可接受
 */
height: 500px;
height: 100vh;

Feature Query

/**
 * 當 initial-letter: 4 在運行的瀏覽器支援下, 才執行 {} 中的設定
 */
@supports(initial-letter: 4) {
	...
}
@supports(PROPERTY_1: VALUE) or (PROPERTY_2: VALUE) {
	...
}
@supports(PROPERTY_1: VALUE) and (PROPERTY_2: VALUE) {
	...
}
@supports not (PROPERTY: VALUE) {
	...
}

不建議使用 Feature 的場合

• @supports not (PROPERT: VALUE) {…} - 不是所有瀏覽器支援
• 比 @supports 早支援的屬性

Source Order — 保有 HTML 的可讀性

• 沒有 CSS 的狀況: Reader 或 朗讀器