重新認識caniuse

一、總結

一句話總結：

can i use網站可以查詢css、js等的一些兼容性，比如不同瀏覽器對flex彈性布局屬性的支持，網站地址：https://www.caniuse.com/

 

 

 

二、重新認識caniuse（轉）

轉自：https://segmentfault.com/a/1190000018495678

 

困惑

相信大家都曾用caniuse網站查詢過css、js的一些兼容性問題，並且都從它反饋的兼容性數據中獲益，讓我們的線上項目更加穩定、和諧的跑在用戶電腦里。不過對於caniuse頁面上的一些細節，我們可能會感到困惑或者模棱兩可，今天就帶着大家一起來重新認識caniuse這個網站，並對它的原理和細節做些探究。

1.1從babel-preset-env說起

babel-preset-env是babel6中極力推崇的一個preset，preset代表的是babel plugins的一個集合，相當於一堆plugins的一個統稱。在babel最開始打江山的時候，es6標准也發布不久，babelrc的配置中只需要添加es2015這樣的preset。但隨着es2016、es2017的相繼出現，babelrc很快就會變成一堆掛歷式的集合體。所以babel給出了env這個殺器，既避免了es20xx的出現，又可以與caniuse的權威數據融合，讓配置preseet科學而簡單。

{
  "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ] }

這是babel官網給出的env配置方案，"last 2 versions", "safari >= 7"，這兩個條件是並集的關系，babel將會分別給出滿足這兩個條件的瀏覽器及版本，並會進行合並，最后算出一組瀏覽器及對應最低版本的數據。

babel是用來轉換js語法的一個編譯器，為什么還能知道滿足env條件的瀏覽器跟版本，這要從browserslist這個庫說起.

1.2 Browserslist

這個庫不僅僅用在babel-preset-env中，像autoprefixer這樣知名的庫，也是用到了它。

last 1 version > 1% maintained node versions not dead

browserslist能夠把上面近似於人類語言的配置，轉換成一組瀏覽器集合。不過它的主要職責就是轉化上面的配置內容，按照正則過濾出正確瀏覽器列表內容，而它本身不提供瀏覽器列表的來源。

1.3 caniuse-lite

Browserslist的瀏覽器數據來源就是這個caniuse-lite，而它是caniuse-db庫的精簡版本，是從caniuse-db庫衍化而來，只不過對caniuse-db數據按照一定規則做了簡化，使得庫的大小減少了許多，並且提供一些查詢api供他人使用，每當caniuse-db更新時，也會跟着一起發布版本。

1.4 caniuse-db

caniuse的npm包，提供了caniuse網站查詢所需的所有數據。

---

2.caniuse庫的介紹

caniuse-db的github地址在此，caniuse鼓勵大家去github上提交pr，經過審核之后就可以被錄用到它的官方數據庫中。

2.1如何為caniuse貢獻數據

首先，它為我們准備了sample-data.json文件，按照此文件格式把需要增加的特性名稱、介紹和瀏覽器兼容性情況填寫清楚，保存並放到features-json文件夾中，最后提交pull request即可，審核完畢后會自動把這部分新增特性保存到data.json中。data.json就是caniuse官方的數據庫導出文件，供其他庫調用，每次json文件變化后，都會release一個新版本。

2.2 sample-data.json

作為新特性發布的樣本文件，內容如下：

{
  "title":"Sample title", "description":"Sample description", "spec":"http://example.com/path/to/spec.html", "status":"wd", "links":[ { "url":"http://example.com/path/to/link.html", "title":"Link title" } ], "bugs":[ { "description":"Sample bug description" } ], "categories":[ "CSS" ], "stats":{ "ie":{ ... "11":"u" }, "edge":{ ... "18":"u" }, "firefox":{ ... "67":"u" }, "chrome":{ ... "75":"u" }, "safari":{ ... "TP":"u" }, "opera":{ ... "58":"u" }, "ios_saf":{ ... "12.2":"u" }, "op_mini":{ "all":"u" }, "android":{ ... "67":"u" }, "bb":{ "7":"u", "10":"u" }, "op_mob":{ ... "46":"u" }, "and_chr":{ "71":"u" }, "and_ff":{ "64":"u" }, "ie_mob":{ ... "11":"u" }, "and_uc":{ "11.8":"u" }, "samsung":{ ... "8.2":"u" }, "and_qq":{ "1.2":"u" }, "baidu":{ "7.12":"u" } }, "notes":"Sample notes for feature, explain partial support here", "notes_by_num":{ "1":"First note..." }, "usage_perc_y":0, "usage_perc_a":0, "ucprefix":false, "parent":"parentfeatureid", "keywords":"example,keywords", "shown":false, "ie_id":"", "chrome_id":"", "firefox_id":"", "webkit_id":"" }

簡要介紹下其中的幾個關鍵字段：

（1）title：特性名稱
（2）description：特性介紹（搜索時的關鍵字）
（3）spec：跳轉到詳細介紹頁面
（4）links：拓展內容介紹
（5）keywords：搜索時的關鍵字
（6）status：特性在標准中的狀態

• ls - 標准
• rec - W3C 推薦
• pr - W3C 建議
• cr - W3C 候選
• wd - W3C 手稿
• other - 非W3C, 但流行的
• unoff - 非官方

（7）categories：分類

• HTML5
• CSS
• CSS2
• CSS3
• SVG
• PNG
• JS API
• Canvas
• DOM
• Other
• JS
• Security

從上面分類可以看出，caniuse並不只是一個查詢css兼容性的網站。

如果想查看目前caniuse已經支持了多少種特性，以及特性對應的分組信息，可以點擊這個網址。

（8）stats：瀏覽器對特性的支持情況

• y - (Y)es, supported by default 完全支持
• a - (A)lmost supported (aka Partial support) 部分支持
• n - (N)o support, or disabled by default 不支持
• p - No support, but has (P)olyfill 不支持，但有替代方案
• u - Support (u)nknown 未知
• x - Requires prefi(x) to work 需要加前綴
• d - (D)isabled by default (need to enable flag or something)需要打flag
• '#n' - Where n is a number, starting with 1, corresponds to the notes_by_num note. 支持，請看介紹第n條

（9）stats：瀏覽器列表

• ie
• edge
• firefox
• chrome
• safari
• opera
• ios_saf
• op_mini
• android
• bb
• op_mob
• and_chr
• and_ff
• ie_mob
• and_uc
• samsung
• and_qq
• baidu

以上瀏覽器列表是固定的，用戶不能增加和缺少某個瀏覽器類型。

總結

每當增加一個新特性時，都要對以上瀏覽器列表以及對應版本列表進行實測，特性的測試可使用以下兩個官方推薦的網站https://www.browserstack.com 和 http://saucelabs.com。
對於第二個網站，可用於因瀏覽器兼容性造成生產事故的還原測試，在其網站的虛擬機內完成特定瀏覽器特定版本的實測，在測試完成后可以觀看操作視頻，並支持導出功能，這對技術解決兼容性問題，提供了第一現場的操作流程，方便問題的解決。

3.caniuse網站介紹

3.1主頁面介紹

 

 

頁面紅字標注了4個地方
（1）代表了這個介紹框的內容隸屬於一個特性，也就是我們在features-json看到的一個個跟特性相關的文件，沒有#標志的不屬於特性。
（2）代表這個特性在標准中所處的一個狀態,具體參照前文對sample-data.json的介紹
（3）對於這個特性，在全球、中國所有瀏覽器中，分別有多少完全支持和部分支持，把兩部分值加起來，得到總份額。
（4）瀏覽器基線，代表對應瀏覽器current狀態的版本號。基線往上是該瀏覽器的低版本，並對相同支持情況的版本進行合並。基線往下是未來的三個版本，並進行狀態合並。

3.2瀏覽器信息統計

caniuse關於瀏覽器的數據，主要都來源於statcounter，此網站統計了全球以及各國的瀏覽器使用情況。

上面提到的瀏覽器基線及版本號列表，都是基於statcounter上個月份的數據統計。
例如chrome v73在3月12號發布了版本，但在caniuse網站里，v72還是作為了current版本，就是因為caniuse的分析數據來源於2月份的統計數據，數據並不是實時更新。

3.3詳情

 

 

頁面紅字標注了4個地方
（1）瀏覽器對特性支持情況相同的版本區間
（2）對特性的支持情況
（3）火狐40-火狐64的發布時間
（4）火狐40-火狐64，在全球、中國的使用份額