#02 關於各家瀏覽器,前端必備的小知識:支援度、市佔率、CSS 實驗語法 -webkit-, -moz-... PostCSS Autoprefixer | Super Easy CSS
↓ 今日學習重點 ↓
理解關於瀏覽器支援度的重要性
理解各家瀏覽器的開發注意事項
理解瀏覽器的 CSS 實驗性語法是什麼
如何查詢 CSS 在各個瀏覽器的支援度?
不同的瀏覽器,如:Chrome、Safari、Edge、Firefox 等等,也是製作網頁需要考量的部分。因為就算是同樣的語法,不同的瀏覽器對它解讀的方式有可能會不一樣,或是不支援,最終導致破版。
因此,製作完網頁,可以的話,建議盡量使用各個瀏覽器跑過一遍做測試,看看有沒有因為相容性而產生的問題。我們製作網頁的目標就是為了讓大家都可以看,所以理論上各個常見的瀏覽器都要能正常運行。如果遇到真的不能正常運作的時候,就要有替代方案,或是改用別的方式做。
查詢各種語法的支援度:Can I Use
如果要查詢各個屬性瀏覽器能不能支援,我們一般會到「Can I use」這個網站查詢,HTML、CSS、JS 都可以查詢。
以上圖為例,它會清楚告訴你各瀏覽器各種版本的支援情況,和該版本的基本資訊、全球市占率等。如果查詢的屬性對於那個版本是實驗中的語法,它會告訴你如何才能運作,例如:使用者要打開該瀏覽器的某個設定,或是我們要加上對應的 CSS 實驗性前綴字等。(在本篇最後會介紹什麼是「CSS 實驗性語法」。)
查詢各個瀏覽器的市佔率:StatCounter
如果想要更近一步,了解各瀏覽器的市佔率,這個網站「StatCounter」有在做統計。
什麼情況會需要知道瀏覽器的市佔率呢?當網頁只在某種瀏覽器上怪怪的時,我們可以參考市佔率,在團隊內部討論,並判斷出需要花多少成本去調整它。
以目前最新統計(2023/08)來說,
瀏覽器在全球市佔率的排名是:
Chrome > Safari > Edge > Opera > Firefox > Samsung Internet;
而台灣的瀏覽器市佔率是:
Chrome > Safari > Edge > Samsung Internet > Firefox > Opera。
瀏覽器的渲染與引擎
瀏覽器之所以能夠渲染(render,將軟體變成畫面的過程)出畫面,是透過瀏覽器引擎(browser engine),它負責將我們所寫的 HTML 及 CSS 解析並排版出來。而常見的有:Webkit(分支有 Google 主導開發的 Blink)、Mozilla 等。
使用同樣瀏覽器引擎的瀏覽器,解析出來的畫面會較為相似,反之就有可能有所落差。
關於各瀏覽器在開發上的經驗談
WebKit
Chrome:
基於 Blink,當前最主流,寫網頁在這裡絕對不能壞掉。Edge:
基於 Blink,在 Chrome 上正常的話,在這裡就不太容易壞。Opera:
基於 Blink,台灣很少人用,所以我很少在這裡測試,但是寫這篇文才發現,原來它在全球市占上不亞於 Firefox。Samsung Internet:
是三星在手機上的 Android 瀏覽器,使用 Google 的開源 Chromium 項目進行開發,所以也是基於 Blink 的。Safari:
由於他並不是基於 Google 的 Blink 開發,所以與上述三者落差稍微大一點。可是,因為 iPhone、iPad 普及的關係,所以市佔率不低,在這裡也是不能壞掉。也因此,遇到 Safari 的陷阱時就會讓人很傷腦筋,於是被眾人戲稱為 Mac / iPad / iPhone 上的 IE。Mac 和 iPhone 上的呈現有時候也會不一樣,兩者都要測試。
此外,由於 iOS 移動裝置(iPad / iPhone)是個很封閉的系統,在 iPad / iPhone 上的其他瀏覽器,如 Chrome、Edge、Firefox 等,其實內部核心都是 Safari,和電腦不同。因此,並不是 Mac 上的 Chrome、Edge、Firefox 沒事就沒問題,要實測一遍才知道會不會有問題喔!
到時候寫到 RWD,我再教大家如何使用 Mac debug 手機版的 Safari。
Mozilla
- Firefox:
它理解網頁的方式偶爾會與 WebKit 家族有滿多不太一樣的地方。許多新語法的支援速度也不太一樣。不過在台灣市佔沒有很高,可以斟酌一下。
Trident(IE核心)
- Internet Explorer:
已於 2022 被宣布停止支援,正式死去,普天同慶。現在已被 Edge 所取代。過去對於使用者來說,運作效能不好;對於開發者來說,除了有與其他瀏覽器不一樣的規則外,多個版本間還不盡相同。然而,還是有一些相依於 IE 的系統存在,畢竟系統改版並不是能說改就改的吧。
小結
以上(IE 除外),Safari 和 Firefox 是比較容易出現問題,以我的經驗來說,落差其實是 Firefox 多於 Safari 一些。可是,Safari 比較多人用的關係,所以讓人比較跳腳。XD
不曉得其他人的開發經驗是不是也是這樣呢?歡迎留言一起討論。xD
總結來說,寫網頁要確保還可以的話,至少要測過 Chrome、Safari;要確保完美的話,要測試過 Chrome、Safari、Firefox。
各瀏覽器的 CSS 實驗性語法
CSS 前綴字
針對較新的 CSS 屬性,在尚未成為標準前,各家瀏覽器會提供一些實驗性的語法,通常會在新屬性上加上一些前綴字(Prefix,例如:-webkit-
、-moz-
、-ms-
、-o-
等),有時則會連名字都不一樣。一般來說,前綴字的代表意義如下:
-webkit-
:Chrome、Safari、Edge...-moz-
:Firefox-o-
:Opera-ms-
:Internet Explorer
PostCSS 套件——Autoprefixer
但是,有這麼多的 CSS 屬性需要處理相容性問題,我們不可能一個個檢查並加上去,所以通常我們會使用程式處理,最有名也最多人使用的就是:PostCSS 的套件 Autoprefixer。
PostCss 是一個使用 JavaScript 轉換 CSS 的工具,通常使用在寫完 CSS 後,所以稱為「後處理器」。PostCss 可以搭配它的不同的套件來對 CSS 進行處理,而 Autoprefixer 就是其中之一。
你可以告訴它你想涵蓋多少市占率的瀏覽器,然後它會依據 Can I Use 網站的數據,自動添加這些 CSS 前綴,讓你的網頁能夠正常渲染。如此一來,可以減少手動添加前綴的繁瑣工作,也能讓你的 code 保持乾淨、好維護。你只需寫標準的、不帶前綴的 CSS,然後 Autoprefixer 就會處理剩下的事情。
通常搭配前端打包工具使用
PostCss 一般不會單獨使用,會搭配「前端打包工具」使用。下圖是其中一種「前端打包工具」—— Webpack 官網的示意圖:
(來源:
Webpack
)
「前端打包工具」(Webpack、Vite 等)可以幫你處理開發上的瑣事,如我們剛剛所說的 PostCss Autoprefixer,是針對 CSS 的事後處理(CSS 後處理器);當然,也可以對 CSS 做些事前處理,讓 CSS 可以寫一些程式邏輯,如:SASS (SCSS)、LESS 等;另外,還有 JS 相容性、CSS 與 JS 的壓縮、圖片或檔案的管理⋯⋯等等瑣事。
不過,這次先讓大家先了解打包工具的概念就好,Webpack 或 Vite 這類工具的細部操作,目前暫時不會深入探討,接下來我們會盡量專注在這次的主題「前端基本觀念與 CSS」上。
後記:
我在寫這篇文章時,本來在 Safari 旁邊寫「我覺得還好,大家不用太擔心」之類的,結果隔天我和同事都被 Safari 小小整了一下,然後我就回來這篇文章把那句話刪掉了⋯⋯ 😂
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
感謝看到最後的你,若你覺得獲益良多,請不要吝嗇給我按個喜歡。❤️
如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。