admin 管理员组文章数量: 1184232
2023年12月17日发(作者：未初始化的局部变量)
HTML5中国：
检测浏览器支持哪些HTML5新特性的方法
HTML5不能说是一个全新的事物，但是大部分人对HTML5的了解还是比较少的。（如果你想了解HTML5的话，不妨查看IE9发布的HTML5视频。） 虽然目前新版的主流浏览器，诸如IE9、Firefox4、Chrome10都已经开始支持HTML5特性了，但是目前所有浏览器对HTML5的支持事不 完整的，主要是因为HTML5还处在制定过程中。如果你想检测你的浏览器究竟支持 HTML 5 的哪些特性，可以查看下面我们介绍的一种方法。
当 浏览器渲染 web 页面的时候，它会构造一个文档对象模型（Document Object Model，DOM）。这是一组用于表现页面上 HTML 元素的对象。每一个元素，例如每一个
，每一个
window 和 document，不过它们不是用来表示特定元素的。
所有的 DOM 对象都有一些通用属性，也有其自己特有的属性。支持 HTML 5 特性的浏览器就会包含这种独一无二的属性。因此，我们利用这种技术，就可以检测浏览器究竟支持哪些新特性。在本节的后面的部分中，我们将从易到难地详细介绍这种技术。
Modernizr —— HTML 5 检测库
Modernizr 是一个开源的，基于 MIT 协议的 JavaScript HTML 5特性检测库。它能够检测很多 HTML 5 和 CSS 3 的特性。你可以在其主页或者这里的地址（，注意修改后缀名）中找到最新版本（当前最新版本是 1.7）。同别的 JS 库一样，你应该在 head 块中将其引入：
…
Modernizr 会自动运行，不需要调用类似 modernizr_init() 的函数。一旦开始运行，它就会创建一个名叫 Modernizr 的全局变量。这个全局变量包含它能够检测到的新特性的布尔值。例如，如果你的浏览器支持 canvas API，那么 就会是 true；如果不支持则是 false。
if () {
// let’s draw some shapes!
} else {
// no native canvas support available
HTML5中国：
}
canvas
HTML 5 定义了 元素。这是一个“设备独立的位图画布，可以用于渲染图表、游戏图像或者其他可视图像”。在页面上 canvas 是一块矩形区域，你可以使用 javascript 语句在上面进行绘制。HTML 5 定义了一系列绘制函数（canvas API），用于绘制形状、定义路径、创建渐变或者应用变形等。
我们可以使用上面的 js 库检测 canvas API。如果你的浏览器支持 canvas API，DOM 对象就可以创建一个含有 getContext() 函数的 元素；如果不支持则仅仅会创建一个最原始的 元素，其中不包含任何 canvas 所特有的属性（记得这是 HTML 5 向后兼容的一种体现）。于是，我们利用这个特性，就可以按照如下的方法检测 canvas 特性
function supports_canvas() {
return !!Element(’canvas’).getContext;
}
这个函数将创建一个临时的 元素，但并不会将其显示到你的页面上，所以没有人会看到它。这个元素仅仅存在于内存中，哪里也不会去，什么也做不了，就像是静止的河流上面漂着的独木舟。
createElement(‘canvas’) 语句就是用来创建这个对象的。然后，我们测试能不能调用
getContext() 函数。这个函数仅在支持 canvas API 的浏览器中才能使用。最后，我们用两个取非运算符 !! 将 getContext() 函数的返回值转换成 Boolean 值。
这个 函数可以用来检测是否支持大多数 canvas API，包括形状、路径、渐变和填充等。它不会检测到任何在IE9 之前版本的 IE 上的模拟库（由于 IE9 才能够支持 canvas API，在早于 IE9 的版本上有很多第三方库来在 IE 上模拟 canvas）。
如果你不愿意自己写函数，当然也可以使用 Modernizr 来检测 canvas API。
if () {
// let’s draw some shapes!
} else {
// no native canvas support available
}
注意，这种检测仅仅用来检测形状、路径、渐变和填充等，如果要检测是否支持文本渲染，我们需要另外的方法。
canvas text
即使浏览器支持 canvas API，它也不一定支持 canvas text API。canvas text API 直到很晚的时候才被加入 HTML5，因此有些浏览器实际是在 canvas text API 完成之前就已经支持 canvas
API。
当 然，我们可以使用前面说的技术检测 canvas text API。前面说过，如果浏览器支持 canvas
API，那么就可以创建一个表示 元素的DOM 对象，并且能够调用 getContext() 函数；如果
HTML5中国：
不支持，则会创建一个没有任何特殊属性的普通 DOM 对象。下面我们在此基础之上来检测 canvas text API。
function supports_canvas_text() {
if (!supports_canvas()) {
return false;
}
var dummy_canvas = Element(’canvas’);
var context = dummy_text(’2d’);
return typeof xt == ‘function’;
}
这 个函数首先调用我们前面说过的 supports_canvas() 函数，来检测是否支持 canvas API。如果浏览器连 canvas API 都不支持，更不用谈 canvas text API 了！然后，我们创建一个临时的 元素，获取其 context。这段代码一定是可以工作的，因为我们已经使用
supports_canvas() 判断过了。最后，我们检查是否存在 fillText() 函数。如果存在，则支持
canvas text API。
如果不想自己写代码，那么就使用 Modernizr 吧！
if (text) {
// let’s draw some text!
} else {
// no native canvas text support available
}
更多详情可访问html5中国：
版权声明：本文标题：检测浏览器支持哪些HTML5新特性的方法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702793002a431141.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
智慧农业的守护神：西瓜病害智能识别系统研发
西瓜叶片病害识别数据集 README 往期热门主题 主题搜两字"关键词"直达 代码数据获取： 获取方式：***文章底部卡片扫码获取***覆盖了YOLO相关项目、OpenCV项目、CNN项目等所有类
Win10新手必看：32位及64位版本的真正区别是什么？
in10专业版发布已有三年多，很受大家的青睐，据了解不好网友还在被安装win10选择32位还是64位所困扰着，很多用户在纠结到底安装32位还是64位，那么win10 32位和64位有什么区别呢？下面，小编就来跟大家讲解win10 32
打造高效家庭网络环境：路由器配置全面解析
一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。 二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用
解锁家庭娱乐新体验：轻松配置路由器与Adobe Flash Player
一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。 二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用
家庭网络新手必读：路由器设置全攻略
一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。 二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用
让你的Android视频瞬间变得酷炫的秘诀！
各种帮助类汇总：常用的 ios 风格 dialog 和 meterial design 风格的 dialog：提高 android 应用的颜值，酷炫 UI 组件汇总： - MaterialDesignC
从入门到精通：Android UI框架的全面教程
1、 github排名,github搜索：2、-ui目录具体内容 ============================= UI- MaterialDesignCe
Android开发者必备：热门UI框架提升你的应用颜值
- 可以显示水位上升下降的TextView。 - 滑动Layout，支持单个View，ListView，GridView，。 - Android Typeface Helper 可以帮你轻
Android开发者进阶：7个经典框架深入解析
UI 框架 阿里新开源Android库V - Layout：淘宝、天猫都在用的UI框架V- Layout 是阿里出品的基础 UI 框架，用于快速实现页面的复杂布局，在手机天猫 Android版 内广泛使用：
Windows 11的Linux和安卓子系统：微软引领生态融合新篇章！
微软开放的 Windows Subsystem for Android（WSA）是 Windows 11 原生的系统级组件，让你在电脑上直接运行 Android 应用，无需第三方模拟器。、。（
5分钟玩转LibreSpeed：解锁你的网络测试新技能
5分钟掌握LibreSpeed：终极网速测试解决方案指南 想要快速了解你的网络性能表现吗？LibreSpeed是一款基于Go语言开发的轻量级网速测试工具，提供下载、上传、延迟、抖动等全方位网络性能检测。无论你是普通用户还是网络
Android10.0里的MediaPlayer难题：OMX服务不可用，如何突破？
前言 前边分析了MediaPlayer从java通过jni到native层的过程，其实mediaplayer的真正的逻辑存在是在mediaPlayerService中处理的，那么今天我们就从源码看下mediaplayerSer
超实用Office 2016安装教程，免费快速上手
Office 2016 安装系统资源下载 资源描述 本仓库提供Office 2016正式版的安装资源下载。Office 2016是一款功能强大的办公软件套件，支持Windows 7、Windows 8和Windows
VSCode图片加载失败，是代码问题还是环境问题？
问题描述：VSCode加载图片出错 在开发过程中，Visual Studio Code（VSCode）加载图片时可能出现错误，例如图片无法显示、路径无效或格式不支持。这类问题通常由文件路径、扩展支持或配置问题导致。以下将分析常
Windows 11与Windows 10：未来与过去的选择
全新 Windows 11 将于 10 月 5 日上市，微软宣布了运行新操作系统所需的最低配置要求。了解这一点后，你就可以查看你的 Windows10 系统是否能够完成升级Windows 10Windows
搭建DLINK DSN1100与VMware ESXi iSCSI存储：配置与故障排查实战手册，让你的存储系统稳定运行
1. 开箱与初识：DLINK DSN1100这台“老将” 前段时间我在二手市场淘了一台DLINK DSN1100，价格非常香，算上运费也就三百多块。这玩意儿当年可是正经的入门级企业iSCSI存储阵列，五盘位设计，支持RAID
DLINK DSN1100路由器初体验：安装与操作全攻略
网上淘了一套DSN1100存储，说是企业级存储，支持ISCSI，我这边正好想搭一套VMWARE的环境，正好上手试试。先说这个存储的做工，硬件在这个价位上可以说是超值，加上运费300多，不过我这台是二手的，不是全新。比那个蜗
实用技巧：DLINK DSN1100与VMware ESXi iSCSI存储配置实战与问题解决方案
1. 开箱与初识：DLINK DSN1100这台“老将” 前段时间我在二手市场淘了一台DLINK DSN1100，价格非常香，算上运费也就三百多块。这玩意儿当年可是正经的入门级企业iSCSI存储阵列，五盘位设计，支持RAID
USB无线网卡新趋势：聚焦于抓取无线网络数据的最新产品
无线抓包网卡测试收录无线抓包需要网卡启用监听（Monitor）模式以监听无线中的报文，而网卡是否支持监听模式跟网卡芯片与驱动有关系。笔者经过较长时间的测试，统计了目前市面上能买到的一些支持抓包的网卡与测试情况。
USB无线抓包网卡：从新手到高手的进阶之路
无线抓包网卡测试收录无线抓包需要网卡启用监听（Monitor）模式以监听无线中的报文，而网卡是否支持监听模式跟网卡芯片与驱动有关系。笔者经过较长时间的测试，统计了目前市面上能买到的一些支持抓包的网卡与测试情况。
发表评论