關於成為Web開發人員的最好笑話之一是，您將20%的時間花在編碼上。而另外80%的人則在網際網路上搜尋您遇到的問題的解決方案。如果有點誇張，這也不是非常不真實。多虧了像Can I Use這樣的工具， 可以大大減少搜尋時間。
什麼是CanIUse？
使用此工具，可以快速檢視網站上的特定技術是否與特定瀏覽器相容的問題，可幫助您更輕鬆地做出設計和開發決策。該網站主要由Alexis Deveria建立和維護， Lennart Schoors設計。CanIUse是一個開源專案，任何人都可以有助於為促進資訊的資料庫，甚至小的努力。
使用該工具很簡單。通過對屬性、引數或功能的簡單搜尋，caniuse.com將準確地告訴您哪些瀏覽器和版本支援該技術。 CanIUse還可以讓您瞭解您正在尋找的屬性的變體。這樣你就知道哪些瀏覽器支援哪些型別的媒體查詢。
以及到什麼程度。相容性圖表不僅表明瀏覽器是否支援該技術，還表明是否支援某些版本的部分相容性。
為什麼要使用CanIUse？
好吧，對於初學者來說，如果您想為您的客戶、顧客和訪客提供最佳體驗，您應該使用它。在嘗試決定是否應該使用懸停效果、透明效果、jquery on-clicks甚至自動暗模式切換時。
如果您使用您能想到的所有花裡胡哨建立一個網站，做出比應用程式更具藝術性的精美設計，那麼您已經完成了一些了不起的事情。但是，如果您的主要人群仍然使用 Internet Explorer 6（不寒而慄），那麼不僅會浪費您的設計和開發時間，而且您的網站也會從根本上被破壞。訪問者甚至可能無法在最基本的水平上發揮作用。
不可否認，大多數（但不幸的是並非全部）您的訪問者將使用比 IE6 更現代的東西。然而，使用的不同瀏覽器的數量是巨大的。不同版本的平板電腦、手機和桌上型電腦。好吧，值得一看的是您即將推出的網站（或什至您現有的網站）是否符合您的受眾的最佳利益）。
如何使用CanIUse
該網站的工作流程非常簡單，而且UI非常易於閱讀。
看看上面的截圖，你可以在搜尋欄位中輸入任何你想要的技術。我們找到了使用您在程式碼中使用的特定語法的最佳結果。不是語義化的、人類可讀的術語。如在(1) 中，應該選擇prefers-color-scheme而不是使用暗模式切換CSS。
CanIUse給出的描述 (2)也使得如果您正在研究一項技術，您可以準確地看到它是什麼、它做什麼以及它如何與DOM互動。
CanIUse最有用的部分之一是任何特定條目底部的註釋 (3)選項卡。它本身不是技術資訊，它更多的是提醒您可能有一些您在彩色版本圖表中看不到的注意事項。
當您將滑鼠懸停在特定瀏覽器版本上時（讓我們以臭名昭著的Internet Explorer 6為例），會出現一個包含大量資訊的彈出視窗(4)。該版本的全球總使用量，開發人員是否仍然支援它，以及使用BrowserStack模擬測試技術的能力。最後一點很重要。檢視不受支援的功能如何呈現可能會向您展示解決問題的方法。
有時，備註 (5)選項卡還會顯示特定型別的功能已被棄用。在上面的示例中，@media查詢已被棄用。因為有一個單獨工作的dark-mode/light-mode查詢。
如何查詢網站訪客使用的瀏覽器
考慮到所有這些，您可以檢視要使用的任何給定技術支援哪些瀏覽器。但這如何必然適用於您的使用者？您可以使用Google Analytics或者百度統計深入瞭解訪問者使用的瀏覽器和作業系統 (OS)，以確保儘可能相容。下面以Google Analytics為例：
首先，導航到左側邊欄的Audience（受眾）部分。然後展開 Technology（技術）並單擊 Browser & OS（瀏覽器&作業系統）。
正如您看到的使用者細分以及他們用來訪問您網站的瀏覽器。如今，幾乎每個網站都將成為頂級的Chrome和Safari。Chrome因為它是桌面使用者的標準（也是Android裝置的預設設定）。和Safari，因為iPhone（以及 MacOS）預設使用它。
單擊瀏覽器 (3)可以讓您檢視正在使用的瀏覽器版本（字面意思是釋出）。如果您注意到，下面的版本有很多差異。從12.x一直到604.x。這是一個很大的差距。它表明作業系統使用情況有所不同。因此，單擊其他 (4) 並在下拉選單中滾動，查詢作業系統（5）。
現在按作業系統排序。現在您將看到有多少流量是移動的，有多少是桌面的。
有了這些資訊，您就可以返回Caniuse.com並確保您網站上的任何技術都能像應有的那樣為最高比例的使用者提供服務。
小結
因此，下次您在檢視一些新技術或閱讀css教程並找到新的東西時，請檢視caniuse.com。某些瀏覽器可能需要一段時間才能識別某些技術。但是，如果您的大多數受眾來自支援新功能和有趣功能的瀏覽器，Can I Use絕對可以告訴您是否可以使用它。
評論留言