检测浏览器是否支持HTML5/CSS3神器Modernizr

什么是Modernizr?

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5
的功能。 它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外，Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测，从而实现效率优化。

传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。
它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

Modernizr 简单易用，但不是万能的。 成功使用 Modernizr 很大程度上取决于你的 CSS 和 JavaScript 技能。 通过本指南，你可以了解如何为不支持多栏或投影的浏览器设置可选风格。
此外，你还可以了解如何让老版本浏览器对使用最新 HTML5 要求（required）属性的表单进行验证，以及如何根据浏览器的功能有选择地加载脚本文件。

下载 Modernizr

访问 Moderniz
网站，其地址为 http://www.modernizr.com/

时间： 2024-09-30 06:45:11

检测浏览器是否支持HTML5/CSS3神器Modernizr的相关文章

JS检测浏览器是否支持HTML5视频播放 (标签<video>) ,

function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTest = document.createElement("video"); oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest) { h264Test = vidTest.canPlay

如何检测您的浏览器是否支持HTML5视频

如何检测您的浏览器是否支持HTML5视频,看下面代码: function checkVideo() { if(!!document.createElement('video').canPlayType){ var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest){ h264T

ie8以下版本（包括ie8）的浏览器不支持html5标签属性解决方案（Modernizr 2.6.2插件的使用）

今天脑抽想用html5标签设计一个网页,我本人用的是火狐浏览器,都弄好后我发现一个很严重的问题,除了ie9以下的浏览器都不能支持html5标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu). 我上网找了好多中方法,有网友说使用 <!--[if lt IE9]> <script> (function() { if (! /*@[email protected]*/ 0) return; var e

HTML5+CSS3使用Modernizr介绍

传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况. Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计. 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能. Modernizr下载地址:http://modernizr.com/down

html学习 - 检测浏览器是否支持Canvas

canvas检测 Canvas是html5中的新特性,所以并不是在所有浏览器都有很好的支持,在遇到兼容性的时候,每个人用的浏览器不同,防止出现在有些浏览器发生问题,所以在加载页面的时候就需要提前判断浏览器是否支持Canvas. 判断的方法其实有很多,Javascript本身可以判断,还有很多开发框架也提供了判断的canvas的方法. html代码 首先我们的html代码是需要有canvas的标签的. <!DOCTYPE html> <html lang="en">

如何判断当前浏览器是否支持html5的video标签

如何判断当前浏览器是否支持html5的video标签: html5新增了video标签,用于播放视频,功能非常的强大,但是由于当前很多浏览器还不支持,所以在使用的时候需要判断当前浏览器是否支持此标签,下面就提供一段能够实现此功能的代码,希望能够给需要的朋友带来一定的帮助. 代码如下: //检测是否支持HTML5 function checkVideo() { if(!!document.createElement('video').canPlayType){ var vidTest = docu

让IE完美支持HTML5(css3)解决办法

貌似以前与大家分享过此类问题,HTML5/CSS3那些炫丽实用的效果,真得让人很眼谗,但悲催的IE浏览器,只有IE9才支持HTML5,这让我们很失望啊,但真的就没有一点办法了吗?其实补救方法还是有的,下面介绍的几种方法,可让客户端浏览器完美支持CSS3.HTML5: 第一种方法:IE9以下版本的IE将创建HTML5标签, 非IE浏览器会忽略这段代码,因此不会发生http请求,也就不影响网页执行效率. <!--[if lt IE9]> <script> (function() { i

查询浏览器是否支持html5

js判断 插入js代码====================================================== <script> window.onload = function() { if (window.applicationCache) { alert("你的浏览器支持HTML5"); } else { alert("你的浏览器不支持HTML5"); } } </script> ==================

JavaScript 检测浏览器是否支持 CSS 变量

JavaScript 检测浏览器是否支持 CSS 变量: const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ } JavaScript 操作 CSS 变量的写法如下: // 设置变量 document.body.style.s