检测浏览器对HTML5和CSS3 支持度的方法

2020-03-24 16:09:23

字体：大中小

来源：转载

供稿：网友

　　HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。尽管 HTML5 承诺很多，但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有到一个很成熟的程度。现在完全不担心浏览器支持是不现实的，还需要时间，因此当我们决定要采用 HTML5 技术开发 Web 应用的时候，我们需要对浏览器所支持的特性进行检测。

　　而 Modernizr 就可以帮助你完成对浏览器所支持 HTML5 特性的检查。

　　下面代码检测浏览器是否支持 Canvas：

代码如下:<script>

window.onload = function () {

if (canvasSupported()) {

alert('canvas supported');

}

};

function canvasSupported() {

var canvas = document.createElement('canvas');

return (canvas.getContext && canvas.getContext('2d'));

}

</script>

下面代码检测浏览器是否支持本地存储：

代码如下:

<script>

window.onload = function () {

if (localStorageSupported()) {

alert('local storage supported');

}

};

function localStorageSupported() {

try {

return ('localStorage' in window && window['localStorage'] != null);

}

catch(e) {}

return false;

}

</script>

　　上面的两个例子中我们可以很直观的对浏览器的特性进行检查以确保我们在对应的浏览器上应用的功能能否正常运作。

　　而使用 Modernizr 的好处还在于你不需要这样一项项去检查，还有更简单的方法，下面我们开始：

　　当我第一次听到 Moderizr 这个项目时，我以为这是一个让一些老的浏览器能支持 HTML5 的 JS 库，事实上不是，它主要是检测的功能。

　　Modernizr 可以通过网址 http://modernizr.com 来访问，该网站同时还提供一个定制脚本的功能，你可以确定你需要检测什么特性，并依此来生成相应的 JS 文件，这样可以减少不必要的 JS 代码。

　一旦下载了 Modernizr 的 JS 文件后，就可以通过 <script> 标签引入到网页中。

代码如下:<script src="Scripts/Modernizr.js" type="text/javascript"></script>

检测 HTML 元素

一旦我们在页面上引入了 Modernizr 后就可以立即使用，我们可以在 <html> 元素中声明不同的 CSS 类，这些类定义了所需要支持或者不支持的特性，不支持的特性其类名一般是 no-FeatureName，例如 no-flexbox。下面是一个在 chrome 上可运行的例子：

代码如下:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage

websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla

multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity

cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS布局时使用HTML-标签

下一篇：用html-和css写出漂亮正规的Blog