HTML5 学习记录之浏览器检测是否支持HTML5_怎么验证浏览器支持html4、html5、ecmascript、css等-CSDN博客

本文链接：https://blog.csdn.net/vecyvecycd/article/details/35268393

HTML 5都出来好几年了，但我都一直没有系统的过一遍W3C教程，一直都是半途而废。近来由于工作的需要需要去重新学习HTML知识。由于之前都没有HTML基础，再加上工作一直使用ActionScript 3.0 开发。即使不会HTML对工作基本也无影响，所以都没能坚持下来。最近接触了很多关于前端开发的知识，也所谓是开了一些眼界，于是趁着三分钟热度还在，就简单的做个学习记录。

关于如何检测浏览器是否支持HTML 5.各人做法不一，W3C教程首页的例子是检查是否坚持HTML 5 VIDEO。搜了一些资料才发现其实各个浏览器对HTML 5 的支持力度不一样。所以也没法统一的用一个判断来做判断。只能是检测是否支持HTML的功能。例如。ie9支持HTML 5的视频但是确没法支持HTML 5的离线应用缓存功能。搜到的资料很多也是基于HTML 5新功能来做判断。在这里推荐大家查看2gua的日志：http://www.guokr.com/blog/472870/。

4种方式检测浏览器是否支持HTML 5功能

1.在全局对象检测属性。

<!doctype html>
<html>
<head>
<title>applicationCache Test</title>
<script>
window.onload = function() {
if (window.applicationCache) {
document.write("Yes, your browser can use offline web applications.");
} else {
document.write("No, your browser cannot use offline web applications.");
}
}
</script>
</head>
<body>

</body>
</html>

2.在创建的元素上检测属性。

<!doctype html>
<html">
<head>
<meta charset="UTF-8">
<title>Simple Square</title>
<script type="text/javascript">
window.onload = drawSquare;

function drawSquare () {
var canvas = document.getElementById('Simple.Square');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "rgb(13, 118, 208)";
context.fillRect(2, 2, 98, 98);
} else {
alert("Canvas API requires an HTML5 compliant browser.");
}
}
</script>
</head>
<body>
<canvas id="Simple.Square"width="100"height="100"></canvas>
</body>
</html>