如何檢測瀏覽器中的HTML 5兼容性

檢測HTML 5語法瀏覽器兼容性的最佳方法是什麼？並提示用戶瀏覽器是否不兼容？如何檢測瀏覽器中的HTML 5兼容性

我明白the tutorial which shows how to test browser compatibility for HTML5。但我很想知道這是否是唯一的方法？我是否需要檢查每個元素？

2011-07-18 Chris

什麼_specific_語法？ HTML 5有許多新功能。 – Oded

@Oded不是特定的控件，我想網站會有豐富的HTML 5控件。可能在單個頁面上有多個HTML 5控件。 – Chris

HTML 5不僅僅是一套新的控件。 – Oded

趁着HTML5和CSS3的新功能可能意味着犧牲控制在舊的瀏覽器體驗。 Modernizr 2 是您的最佳網站和應用程序無論瀏覽器或設備訪問您的訪問者使用完全正確的起點。

由於新的媒體查詢測試和內置的作爲Modernizr.load（）的YepNope.js 微庫，您現在可以將功能檢測與媒體查詢和條件資源加載結合起來。那給你力量和靈活性優化爲每個情況。

它有很多內置的方法來測試瀏覽器的功能，並提供了一種有用的方式來提供後備代碼，當你想要使用的功能不被支持。

更多信息：http://www.modernizr.com/

來源

2011-07-18 10:11:48 betamax

這裏是檢測HTML5兼容性&能力的教程：

http://diveintohtml5.ep.io/detect.html

有使用類似的技術替代HTML5探測器，但我建議使用Modernizr的。

總結HTML5的「得分」，你可以設計自己的「打分方案」。總結加權分數會給你總分。

來源

2011-07-18 10:08:55 Raptor

我也會建議modenizr – dknaack

@Shivan Raptor我已經在同一時間更新了這個問題。我已經閱讀過該教程，並且很想知道其他方式或總結測試功能。 – Chris

更新了答案 – Raptor

，我需要每一個元素檢查？

沒有。只有你想使用的部分不能向後兼容。

見Five Things You Should Know About HTML5，尤其是點1和4

來源

2011-07-18 10:12:04

「HTML5兼容性」是一個非常模糊的東西。

當人們詢問關於HTML5的兼容性時，他們通常的意思是「哪些瀏覽器支持我想使用的這些全新的瀏覽器功能X，Y和Z？

在過去的幾年中，瀏覽器中增加了許多功能，現在通常稱爲「HTML5」。

其實並沒有任何瀏覽器支持每新功能在那裏。

你需要做的是找出其特點有足夠寬的支持，使他們值得使用，其特點你想使用，但很高興，如果你遇到不支持瀏覽器來解決，以及您絕對必須使用哪些功能來實現您想要的功能。

新瀏覽器功能的相當全面的列表以及瀏覽器支持圖表全部在http://caniuse.com/（如果您滾動到底部，您會在整體兼容性表中看到當前最好的瀏覽器僅支持他們已經測試功能89％。這將改善隨着新版本的發佈...但當然，也有新的功能也將被引入）

對於在運行時確定用戶的瀏覽器是否支持給定的功能，你可以使用Modernizr。這是一個基於Javascript的工具，它會給你一組CSS類和Javascript標誌，告訴你哪些功能得到支持。如果瀏覽器不支持所需的功能，可以使用它觸發網站中的替代行爲。（Modernizr還包含HTML5Shim功能，它允許IE至少處理包含新的HTML5元素的HTML頁面）。

更多跨瀏覽器兼容性，有一個整體範圍已被寫入，以允許舊的瀏覽器（主要是IE是公平），以支持各種新功能的黑客。你可以在這裏看到一個相當全面的列表：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

顯然，試圖在IE中一次運行多個這些將嚴重影響你的網站的性能，但它可以很方便，如果你需要支持一個或兩個功能。我目前最喜歡的是CSS3Pie，它支持CSS圓角，陰影和漸變的IE6/7/8。

希望有所幫助。

來源

2011-07-18 10:34:54 Spudley

+1綜合性很好的答案。 – Chris

您會發現它只有極少數功能（主要在Safari瀏覽器和Mozilla中）具有不受支持的功能或支持問題。您可以找到依賴關係檢查器，顯示哪些功能受支持，例如使用HTML5字段，如果不支持不會引發錯誤，則會降級爲基本的文本輸入字段。 CSS與HTML5支持不同，不要混淆兩者，因爲瀏覽器是兼容或不兼容HTML5的完全支持。 –

@MarkGiblin - 當然，但在6年前我發佈這個答案時，這是一幅非常不同的圖畫。 – Spudley

最簡單的方法：在JS中創建一個新元素，並將屬性設置爲JS中的colorpicker（HTML5），並返回元素的類型（僅當瀏覽器兼容HTML5時纔是選擇器）：

var element = document.createElement("input"); 
element.setAttribute("type", "color"); 
return element.type !== "text";

來源

2013-08-12 08:10:03 clement

不錯的想法，但它在IE 11上不起作用。也許對於性能而言，您創建的測試元素未被解析，因爲它永遠不會被添加到文檔中。我需要一個不使用Modernizr的解決方案，因爲如果您已經在使用jQuery UI來處理向後兼容性，那麼這是一個完整的gunk負載。實際上，尋求這個答案的唯一原因是爲了快速切換jQuery 1或2（不幸的是，他們現在已經拆分了瀏覽器支持，這使得它變得複雜）。 –

這適用於IE 11（也希望其他瀏覽器）。

// Detect HTML v5 compatibility 
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;

這是一個從克萊門特的答案的紡絲和西瓦（http://diveintohtml5.info/detect.html）的鏈接。克萊門特的回答並沒有在IE 11

工作對我來說，我使用jQuery UI的一切，所以不需要Modernizr的（也似乎慢）。閱讀相當消極的「如何使用Modernizr」博客評論支持這一假設。

但是現在jQuery在v1和v2開發流之間具有拆分瀏覽器兼容性，這對於希望支持非HTML v5瀏覽器在開始時加載v1或v2 jQuery核心腳本的人來說是必需的。所以這個「單行」HTML v5檢測是完美的。以下是我用正確的結果加載的jQuery：

// Use jQuery v2 for HTML v5 browsers else v1 to support old browsers 
var jQueryScriptPath = (isHtml5Compatible) 
    ? "/Scripts/jquery-2.0.3.js" 
    : "/Scripts/jquery-1.10.2.js"; 
document.writeln("<script src=\"" + jQueryScriptPath + "\" type=\"text/javascript\"><\/script>");

如果你投這個答案了，請你也投克萊門特和西瓦的回答太:-)

來源

2013-10-24 11:40:28

我建議你可以嘗試使用<audio>Anything within Audio tag here</audio>。
<audio>和</audio>間內的任何書面文本將顯示在不支持<audio>標籤瀏覽器。
由於音頻標籤是新添加到HTML5中的。

來源

2016-10-15 15:45:58 Reconnect

如何檢測瀏覽器中的HTML 5兼容性

回答

相關問題