CanIUse 如何輔助Web開發

一、CanIUse 的背景介紹

CanIUse 是一個源自於 Web 前端開發社區的網站，它提供了平面化的前端開發界面，用以查詢關注 HTML、CSS、JavaScript 的瀏覽器兼容性信息。

由於標準容易出現解釋混亂、實現不一致等問題，CanIUse 就成為了確定每個標準實際實現情況的依據。它可以告訴我們現代的主流瀏覽器是否支持某種特性，並且對下個版本做一些預測（有些可能還未被支持）。

CanIUse 官網具有全球化特點，它的數據後台也是面向全球的，同時還依賴於各地精通前端技術的開發者與網友的持續貢獻和反饋。

二、CanIUse 的使用方法

使用 CanIUse 的方法是十分簡潔易懂的，用戶在 CanIUse 搜索框中輸入標籤、屬性、方法等詞語，它會給出該詞語用於各瀏覽器內核版本（IE、Chrome、Firefox、Safari、Opera等）中的支持情況。並且這些信息是時時刻刻同步更新的，保證了開發者在使用時能夠儘可能獲得對開發環境最準確、最實時為依據的兼容性支持信息。

CanIUse 的查詢結果以圖表形式展示，依據某種標準特性，可以針對每個瀏覽器內核版本進行對比。綠色代表支持程度良好，黃色表示該特性被支持，但是有些功能還未實現，紅色則意味着該功能一無所獲，無法使用。在具體的使用過程中，我們可以根據查詢結果來了解目標瀏覽器是否支持這些標準特性、使用哪些代替解決方案等。

三、CanIUse 用途的舉例

CanIUse 的用途不勝枚舉，其中之一自然是輔助我們展開前端開發標準。下面舉幾個實際的例子。

1. CSS 屬性的使用方法

code {
  box-shadow: #666666 2px 2px 2px;
  -moz-box-shadow: #666666 2px 2px 2px;/* Firefox 3.5 and lower */
  -webkit-box-shadow: #666666 2px 2px 2px;/* Safari and Chrome */
  box-shadow: #666666 2px 2px 2px\0/IE9+;/*IE9+ hack */
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=135,strength=4);/* IE6-IE8 */
}

或者參照下面這個更為簡潔的編寫方式：

code {
  box-shadow: #666666 2px 2px 2px;
  -webkit-box-shadow: #666666 2px 2px 2px;
  -ms-box-shadow: #666666 2px 2px 2px;
  -moz-box-shadow: #666666 2px 2px 2px;
  -o-box-shadow: #666666 2px 2px 2px;
}

在代碼編寫過程中，考慮到不同瀏覽器的支持情況，對於不同瀏覽器可以使用不同的樣式以保證兼容性。

2. HTML 標籤的兼容性

舉個例子，某些 HTML5 的標籤在 IE 低版本中甚至都識別不了，比如 <head>、<nav>、<article>、<footer> 等等標籤，在 WebKit 的內核中，已支持。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML標籤兼容性</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">HOME</li>
            <li><a href="#">ABOUT US</li>
            <li><a href="#">CONTACT</li>
        </ul>
    </nav>
    <article>
        <h4>HTML兼容性問題</h4>
        <p>在IE8以下版本中，<nav>和<article>標籤是被認為是無定義標籤，如果在使用這兩個標籤，建議使用JavaScript或其他hack手段即可實現與HTML5標準的兼容。（以下方式可以在IE6以上以及谷歌瀏覽器中正常顯示）</p>
    </article>
    <footer><p>Web前端開發</p><p>CopyRight @ 2021</p></footer>
</body>
</html>

3. JavaScript 特性的兼容性

排序問題是Web開發中的一大難題，而ES6的Array.sort同樣存在缺陷，賦值（數組等操作）的順序不是穩定的，這就導致在使用排序後數組下標與值不一定互相對應。

let arr = ['1a', '2', '254', '76', '821', '091'];
console.log(arr.sort((a, b) => a > b)); //["091", "1a", "2", "254", "76", "821"]

而 JavaScript 的 Array.sort() 引入了 compareFunction 變量，用於比較元素的函數，用於排序使用，可以輕鬆解決以上問題。

let arr = ['1a', '2', '254', '76', '821', '091'];
console.log(arr.sort((a, b) => {
  //根據長度進行升序
  return a.length - b.length;
})); // ["2", "76", "091", "254", "821", "1a"]

4. CSS 中特定屬性的兼容性

有時候，我們可能會需要在 CSS 中使用特定的功能屬性以提高我們開發過程中的細節體驗。比如，CSS 的 Text-overflow 屬性用於在固定寬度內隱藏多出來的文本，並添加省略號提示，以此達到更為高效的排版效果。

.text-overflow {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但是，在使用該屬性時，我們可能需要注意到位於部分舊版瀏覽器的兼容性。

在 CanIUse 中，我們可以根據屬性名來查詢是否被主流瀏覽器所兼容。另外，我們還可以研究其他類似屬性，以做出更為琢磨的決策。

四、CanIUse 的使用壁壘和未來展望

在當今的互聯網時代，CanIUse 不僅是一個前端開發必要的助手，同時也具有很多互動和社交的功能。然而，正如同許多其他網絡產品一樣，CanIUse 也有着一些使用障礙。

例如，CanIUse 的語言主要是英語，這將會對並不精通英語的網友帶來障礙。同時，CanIUse 數據源採取了社區化實時反饋的方式，雖然可以獲得與時俱進的最新數據，但也相對包含了一些數據陳舊、重複的問題，這需要我們在使用時去判斷真假性並結合其他信息。

未來的 CanIUse 將有望圍繞性能方面、性能提升和微優化、沒有技術限制的使用規範等更為微妙的方向進行擴大升級，並將更加註重用戶體驗。預計會增強多語言支持以擴大用戶量，完善社區互動、技術拓展接口，加強數學、基礎、邏輯等嚴謹性，實現前端開發歷史信息的存檔和需求高度時延的客戶端訪問等。

五、小結

CanIUse 作為一個為前端開發者提供服務和幫助的兼容性監測網站，其已成為了 Web 開發的必要工具之一。在開發龐雜項目或者管理多端兼容性方面，CanIUse 都是你不可或缺的重要幫手。

CanIUse 的數據清晰直觀，完全站在使用者的角度來展示數據，這對我們前端開發人員是一個巨大的福音。CanIUse 還在不斷發展完善，運用 CanIUse 時需要考慮到數據可靠性問題以及其所在網頁對付不同瀏覽器，保證被訪問者在不同的瀏覽器下都能 have a fun 經驗。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/227866.html