什麼是Caniuse,如何使用它來改善您的網站?

關於成為一名Web開發人員的最好笑話之一是,您花費20%的時間進行編碼。 另外80%的人在互聯網上搜索遇到的問題的解決方案。 如果有點誇張,這也不是完全不正確的。 藉助「我可以使用」之類的工具,可以大大減少時間搜索。

我可以使用什麼?

有了這個工具,您的網站上的特定技術是否與特定的瀏覽器兼容的問題以簡單易懂的圖表形式列出,可以幫助您更輕鬆地做出設計和開發決策。 主要由 亞歷克西斯·德瓦里亞(Alexis Deveria) 由…設計 倫納特·肖爾斯,CanIUse是一個開源項目,任何人都可以 有助於 只需向資料庫貢獻信息即可。

使用該工具很簡單。 通過簡單地搜索屬性,參數或功能,caniuse.com會準確告訴您哪些瀏覽器和版本支持該技術。 CanIUse還可以讓您知道所需屬性的變體。 這樣,您就知道哪種瀏覽器支持哪種媒體查詢。

以及到什麼程度。 兼容性圖表還不僅指示瀏覽器是否支持該技術,而且還指示在某些版本中存在部分兼容性的情況下是否達到何種程度。

為什麼要使用CanIUse?

好吧,對於初學者來說,如果您想給客戶,客戶和訪客最好的體驗,就應該使用它。 在嘗試決定是否應使用懸停效果,透明膠片,jquery單擊或什至自動暗模式切換時。

如果您建立了一個可以想到的所有功能的網站,並且製作出比應用程序更具美感的精美設計,那麼您所做的事情就令人讚歎。 但是,如果您的主要受眾仍然使用Internet Explorer 6(抖動),則不僅會浪費您的設計和開發時間,而且從根本上破壞了您的網站。 訪客可能甚至無法在其最基本的級別上運行。

誠然,大多數(但並非全部不幸)訪問者將使用比IE6更現代的功能。 但是,正在使用的不同瀏覽器的數量巨大。 各種版本的平板電腦,移動設備和台式機。 而且,值得一看的是,您即將到來的網站(甚至您現有的網站)是否在滿足受眾的最大利益)。

如何使用

該網站的工作流程非常簡單明了,UI儘可能地易於閱讀。

什麼是犬科動物,以及如何使用它來改善您的網站?什麼是犬科動物以及如何使用它來改善您的網站?

查看上面的屏幕截圖,您可以在搜索欄位中輸入所需的任何技術。 我們發現使用您在代碼中使用的特定語法的最佳結果。 不是語義上的,人類可讀的術語。 例如在(1)中,更喜歡使用color-scheme而不是深色模式切換CSS。

CanIUse給出的描述(2)也使得它成為可能,因此,如果您正在研究一項技術,則可以確切地看到它是什麼,它做什麼以及它如何與技術交互。 DOM

CanIUse最有用的部分之一是任何特定條目底部的Notes(3)選項卡。 本質上,這不是技術信息,更提醒您的是,某些注意事項在彩色版本圖中看不到。

犬科動物是什麼以及如何使用它來改善您的網站1什麼是犬科動物以及如何使用它來改善您的網站?

當您將滑鼠懸停在特定的瀏覽器版本上時(以臭名昭著的Internet Explorer 6為例),將顯示一個彈出窗口(4),其中包含很多信息。 該版本的全球總使用率,是否仍由開發人員支持,以及使用以下版本測試技術的能力 瀏覽器堆棧 模擬。 最後一點很重要。 了解不支持的功能如何呈現可能會向您顯示解決問題的方法。

有時,「注釋(5)」選項卡還會向您顯示不贊成使用某種特定功能。 在上面的示例中,@ media查詢已被棄用。 因為有一個暗模式/亮模式查詢可以獨立工作。

如何找到觀眾使用的瀏覽器

考慮到所有這些,您可以查看要使用的任何給定技術所支持的瀏覽器。 但是,這對您的用戶有何必要? 您可以使用 谷歌分析 了解訪問者使用的瀏覽器和操作系統(OS),以便確保儘可能兼容。

首先,導航到左側邊欄的「受眾群體」部分。 然後展開技術,然後單擊瀏覽器和操作系統。

犬科動物是什麼以及如何使用它來改善您的網站2什麼是犬科動物以及如何使用它來改善您的網站?

如您所見,用戶及其用於訪問您的網站的瀏覽器的細目分類。 如今,幾乎每個網站的頂部都將是Chrome和Safari。 Chrome,因為它是台式機用戶的標準配置(在Android設備上是默認配置)。 和Safari,因為iPhone默認使用它。 (以及MacOS)。

單擊瀏覽器(3),可以查看正在使用哪個版本的瀏覽器(文字版本)。 如果您注意到,以下版本會有很多差異。 從12.x一直到604.x。 那是一個很大的差距。 這表明操作系統使用情況有所不同。 因此,單擊其他(4)並在下拉菜單中滾動。 查找操作系統。

犬科動物是什麼以及如何使用它來改善您的網站3什麼是犬科動物以及如何使用它來改善您的網站?

立即按操作系統排序。 現在,您將看到有多少流量是移動流量,有多少流量是桌面流量。

犬科動物是什麼以及如何使用它來改善您的網站4什麼是犬科動物以及如何使用它來改善您的網站?

掌握了這些信息之後,您可以返回到 Caniuse.com 並確保您網站上的所有技術都能為您的最高用戶所用。

用CanIUse結束

因此,下次您查看Divi和我們的甜蜜新功能之一或閱讀CSS教程並找到新玩意時,請查看 caniuse.com。 一些瀏覽器可能需要一段時間才能識別某些技術。 但是,如果您的大多數觀眾來自支持新功能和有趣功能的瀏覽器,那麼「我能不能使用」可以告訴您是否可以使用它。

您發現什麼是「我可以使用」的最佳用法?

Fatmawati Achmad Zaenuri / Shutterstock的文章精選圖片

來源

原創文章,作者:WPJIAN,如若轉載,請註明出處:https://wpjian.com/zh-tw/tips/2021022041942.html