html5 新特性支持的浏览器检测

最新推荐文章于 2021-05-30 19:17:12 发布
最新推荐文章于 2021-05-30 19:17:12 发布
阅读量129 收藏
点赞数
分类专栏： web 文章标签： 网络 javascript ViewUI 

<!Document html>
<html>
	
	<head>
		<meta charset="gbk">
	</head>
	<body>
	<form>
		<!-- html5 forms -->
		<input type="email" required maxLength="100" minLength="18">
		<input type="submit" value="SUBMIT">
	</form>
	<br>
	<br>
	</body>
	<script type="text/javascript">
		
		<!-- html5 canves API -->
		try{
			document.createElement("canvas").getContext("2d");
			document.write("浏览器支持html5 canvas\n");
			
		}catch(e){
			console.log("浏览器不支持html5 canvas\n");
		}
		
		<!-- html5 audio video-->
		var hasVideo = !!(document.createElement('video').canPlayType);
		if(hasVideo){
			document.write("浏览器支持html5 audio video\n");
		}else{
			document.write("浏览器不支持html5 audio video\n");
		}
		
		<!-- html5 geolocation API -->
		if(navigator.geolocation){
			document.write("浏览器支持html5 geolocation API\n");
		}else{
			document.write("浏览器不支持html5 geolocation API\n");
		}
		
		<!-- html5 跨文档消息通讯 communication API-->
		if(typeof window.postMessage === undefined){
			document.write("浏览器支持html5跨文档消息通讯\n");
		}else{
			document.write("浏览器不支持html5 跨文档消息通讯\n");
		}
		
		<!-- html5 XMLHttpRequest Level2的跨源请求支持-->
		var xhr = new XMLHttpRequest();
		if(typeof xhr.withCredentials === undefined){
			document.write("浏览器支持html5XMLHttpRequest Level2的跨源请求支持\n");
		}else{
			document.write("浏览器不支持html5 XMLHttpRequest Level2的跨源请求支持\n");
		}
		
		<!-- html5 websocket-->
		if(window.WebSocket){
			document.write("浏览器支持html5websocket\n");
		}else{
			document.write("浏览器不支持html5 websocket\n");
		}
		
		<!-- html5 web workers API -->
		if(typeof(Worker)!=="undefined"){
			document.write("浏览器支持html5web workers API\n");
		}else{
			document.write("浏览器不支持html5web workers API\n");
		}
		
		<!-- html5 web storage API -->
		if(window.sessionStorage){
			document.write("浏览器支持html5 sessionStorage\n");
		}else{
			document.write("浏览器不支持html5 sessionStorage\n");
		}
		if(window.localStorage){
			document.write("浏览器支持html5localStorage\n");
		}else{
			document.write("浏览器不支持html5 localStorage\n");
		}
		
		<!-- html5 离线Web应用 -->
		if(window.applicationCache){
			document.write("浏览器支持html5离线Web应用\n");
		}else{
			document.write("浏览器不支持html5 离线Web应用\n");
		}
		
	</script>
	
</html>

 

 

在我的chrome浏览器上查看

 


zhongweij
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
检测浏览器支持哪些HTML5新特性的方法
开源控Meteor的博客
08-28 972
检测浏览器支持哪些HTML5新特性的方法 HTML5不能说是一个全新的事物，但是大部分人对HTML5的了解还是比较少的。（如果你想了解HTML5的话，不妨查看IE9发布的HTML5视频。） 虽然目前新版的主流浏览器，诸如IE9、Firefox4、Chrome10都已经开始支持HTML5特性了，但是目前所有浏览器对HTML5的支持事不 完整的，主要是因为HTML5还处在制定过程中。如果你想检测
测试你的浏览器对HTML5标准的兼容得分
06-08 493
<br />浏览该地址：http://html5test.com/
各大浏览器对HTML5和CSS3的特性的支持力度
熊诗言的博客
11-09 3687
支持CSS 3和HTML 5的浏览器越来越多，甚至包括最新版的IE，当然，所谓支持仅仅是部分支持，因为CSS 3和HTML 5的W3C规范都尚未形成。 尽管CSS 3和HTML 5的W3C规范都尚未成形，但目前支持CSS 3和HTML 5的浏览器越来越多，包括google的Chrome，以及最新版本的IE 9。 需要指出的是，即使同一个浏览器的同一个版本，在Mac和Windows两
原生 和html5 性能,五大国际知名浏览器HTML5性能支持大PK
weixin_34092535的博客
05-30 329
HTML5是近十年来Web标准最巨大的飞跃。随着HTML5功能的逐渐丰富，它任重而道远，致力于将Web带入一个更为成熟的应用平台。在所有超级特性中，最让小编喜欢的是HTML5推出的"WebStorage"(Web存储)API，它弥补了cookie容量小存在的缺陷，让网络开发者们如获至宝。或许对于很多普通用户来说，这些专业词汇根本不了解也无需了解，用户只需知道就是哪一款浏览器反应快速，简单好用，仅此...
使用js检测浏览器是否支持html5中的video标签的方法
10-26
在现代Web开发中，HTML5引入了许多新的特性，其中之一就是`<video>`标签，它使得在网页中嵌入和播放视频变得更为简单。然而，并非所有浏览器都支持HTML5的`<video>`标签，尤其是老版本或者一些特定的移动设备浏览器...
处理HTML5新标签的浏览器兼容版问题
09-27
然而，由于HTML5是一门相对较新的技术，一些较旧的浏览器，特别是微软公司的Internet Explorer 8及以下版本，它们并不完全支持HTML5的新标签和特性。这导致了开发者在使用HTML5的新标签时遇到了浏览器兼容性的问题。...
HTML5CSS3新特性的浏览器支持情况.pdf
10-04
Modernizr是一个强大的JavaScript库，它可以帮助检测浏览器对HTML5和CSS3新特性的支持，并根据支持情况添加自定义的类到`<html>`元素，以便于在CSS中实现浏览器兼容性。 此外，考虑到IE11移除了"MSIE"标识并开始...
js判断浏览器是否支持html5
10-25
不过，由于不同浏览器对HTML5的支持程度不一，因此在开发时常常需要检测浏览器对HTML5的支持情况。 要检测浏览器是否支持HTML5，我们通常可以通过JavaScript来进行。下面，我们详细解析了三种常用的方法，并且会...
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
09-28
Modernizr是一个强大的JavaScript库，它可以检测浏览器对HTML5和CSS3特性的支持情况，并根据检测结果提供相应的polyfills（即在不支持新特性的浏览器中模拟新特性）。这样，即使在不支持HTML5的浏览器中，开发者也能...
当前浏览器对HTML5支持状况(全平台)
热门推荐
CRPER
08-24 1万+
题记HTML5test 这个网站专门测试浏览器对HTML5支持状况,只要你的浏览器打开HTML5test这个页面,就会得到一个测评的分数,然后会列出你当前浏览器对哪些特性支持良好,哪些不支持简易测试如图:360极速浏览器测试的(内核是chromium 42) – 极速模式;我稍微看了下不支持的特性…都是比较少用到的特性…. 所以总体来说,在H5和CSS3下的体验是相当良好的而我本地的chrome 4
html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
palette_的博客
05-02 3987
（Q1）  HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 (1)绘画 canvas; (2)用于媒介回放的 video 和 audio 元素; (3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; (4)sessionStorage 的数据在浏览器关闭后自动删除; (5)语意化更好的内容元素，比如 arti
HTML5 - 各大浏览器对html5的支持情况
u014063717的博客
03-17 1328
1，主流浏览器对html5的支持情况 （1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。 （2）Safari，Opera：同样支持html5很多年，支持也很好。 （3）IE：IE10起比较好了，之前很差。2，查看具体的支持情况 在http://caniuse.com上，我们可以查询HTML5里具体功能在各个浏览器下的支持情况。3，查看各浏览器装机情况统计
html5有哪些新特性
dengzi8217的博客
04-22 277
新特性： HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签（header,nav,footer,aside,article,section） 3. 音频、视频API(audio,video) 4. 画布(Canvas) API 5. 地理...
html5 检测浏览器是否支持新特性
zxcasd753651的博客
10-12 992
if (Modernizr.***){ //浏览器提供***支持 }else{ //浏览器没有提供***支持 } 1.检测浏览器是否支持canvas API   function supports_canvas(){ return !!document.createElement('canvas').getContext; }该函数 创建一个虚拟的元素 ；!!是双重否定来强制
HTML5 特性检测：本地存储（Local Storage ,sessionStorage）
weixin_34087503的博客
05-31 118
如果你的浏览器支持该特性的话，那么全局对象：window上会有一个localStorage的属性，反之，你的浏览器不支持的话，那么该属性值为undefined function supports_local_storage(){ return !!window.localStorage; } &lt;input type="button" onclick="Supports_l...
HTML5 - 判断浏览器是否支持html5某个功能（使用modernizr.js）
u014063717的博客
03-17 869
1，modernizr.js介绍 http://modernizr.com/download/提供了个js小工具，将这个js引入到网页就可以测试浏览器对HTML5，CSS3相关功能的支持情况。 （1）如果开发测试的话，下载 Development version 。这个包含所有的检测，比较大。 （2）如果发布版本，则选择需要检测的功能，创建定制的modernizr使用。2，使用样例 下面代码
各浏览器对HTML5的支持情况
weixin_33709590的博客
05-09 133
最近可能要把巴士电台的所有歌曲进行一次转码，以更好地利用html5特性。 目前全部是mp3，杯具的是，各大浏览器本地提供对mp3支持的只有ie9和chrome，更杯具的是，chrome自12以来也不支持mp3了，也印证了chrome号称不再支持MPEG的说法，所以现在虽然在支持html5的audio标签的浏览器上我们有html5方案，但是其实大部分都会检测到不支持mp3而调用了flash pla...
HTML5入门指南：特性与浏览器支持
- **何时能用**：这是一个跟踪浏览器对HTML5支持进度的网站。 - **网页设计师的浏览器支持列表**：提供关于不同浏览器对HTML5元素和API支持的详细信息。 - **HTML5测试**：这个网站可以帮助你测试特定设备或浏览器对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值