瀏覽器相容最佳化

Resilient CSS - CSS瀏覽器相容最佳化

在前端開發上,調整CSS往往是讓人頭痛的事情,主要原因是因為各家瀏覽器對CSS的實作展現方式都不一,或者是因為瀏覽器版本沒有辦法支持現有的CSS語法。而以下有幾種做法可以用來幫助解決這些問題。

1.使用 can I use來搜尋特定的CSS語法在各家瀏覽器的支援度,所以當看到想要使用新的語法時請先來這個網站查詢相容度避免大多數的用戶無法使用!

2.但當你看到一個新的語法覺得不試試看不行的話又該如何是好呢? CSS是一行一行被執行,所以當瀏覽器看到不支持的CSS語法的時候,會直接略過不執行,而且後面的會覆蓋前面的屬性。

1
2
3
4
.test {
display: inline-block;
display: grid;
}

所以依上面這種情況的話,當瀏覽器是同時支援inline-block&grid的時候就會顯示grid,但在其他不支持grid的瀏覽器上只會呈現inline-block,所以可以把優先希望顯示的屬性放在較後面

3.用第二種寫法的話長期來看會造成Code很難維護,這時候可以使用@supports來判斷該瀏覽器是否支援

1
2
3
4
5
6
7

@supports (display: 100vh) {
// 支援vh的瀏覽器
}
@supports not (height: 100vh) {
// 不支援vh的瀏覽器
}

這樣對於後續維護工作也清楚許多,但是假如遇到連supports都不支援的瀏覽器,最後的寫法可以變這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*共用樣式(給連supports都不支援的瀏覽器)*/
.test{
/* some style */
}
@supports (height: 100vh) {
// 支援vh的瀏覽器
.test{
/* some style */
}
}
@supports not (height: 100vh) {
// 不支援vh的瀏覽器
.test{
/* some style */
}
}

Reference

Resilient CSS