检测浏览器支持哪些HTML5新特性的方法
HTML5不能说是一个全新的事物，但是大部分人对HTML5的了解还是比较少的。（如果你想了解HTML5的话，不妨查看IE9发布的HTML5视频。）虽然目前新版的主流浏览器，诸如IE9、Firefox4、Chrome10都已经开始支持HTML5特性了，但是目前所有浏览器对HTML5的支持事不完整的，主要是因为HTML5还处在制定过程中。如果你想检测你的浏览器究竟支持 HTML 5 的哪些特性，可以查看下面我们介绍的一种方法。
当浏览器渲染 web 页面的时候，它会构造一个文档对象模型（Document Object Model，DOM）。这是一组用于表现页面上 HTML 元素的对象。每一个元素，例如每一个
，每一个
，每一个 都有不同的 DOM 对象表示。当然，也有一种全局的对象，例如 window 和 document，不过它们不是用来表示特定元素的。
所有的 DOM 对象都有一些通用属性，也有其自己特有的属性。支持 HTML 5 特性的浏览器就会包含这种独一无二的属性。因此，我们利用这种技术，就可以检测浏览器究竟支持哪些新特性。在本节的后面的部分中，我们将从易到难地详细介绍这种技术。
Modernizr —— HTML 5 检测库
Modernizr是一个开源的，基于 MIT 协议的 JavaScript HTML 5特性检测库。它能够检测很多 HTML 5 和 CSS 3 的特性。你可以在其主页或者这里的地址（modernizr-1.7.min.js，注意修改后缀名）中找到最新版本（当前最新版本是 1.7）。同别的 JS 库一样，你应该在 head 块中将其引入：
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Dive Into HTML5</title> <script src=”modernizr.min.js”></script> </head> <body> … </body> </html>
Modernizr 会自动运行，不需要调用类似 modernizr_init() 的函数。一旦开始运行，它就会创建一个名叫 Modernizr 的全局变量。这个全局变量包含它能够检测到的新特性的布尔值。例如，如果你的浏览器支持 canvas API，那么 Modernizr.canvas 就会是 true；如果不支持则是 false。
if (Modernizr.canvas) {
// let’s draw some shapes!
} else {
// no native canvas support available
}canvas
HTML 5 定义了 元素。这是一个“设备独立的位图画布，可以用于渲染图表、游戏图像或者其他可视图像”。在页面上 canvas 是一块矩形区域，你可以使用 javascript 语句在上面进行绘制。HTML 5 定义了一系列绘制函数（canvas API），用于绘制形状、定义路径、创建渐变或者应用变形等。
我们可以使用上面的 js 库检测 canvas API。如果你的浏览器支持 canvas API，DOM 对象就可以创建一个含有 getContext() 函数的 元素；如果不支持则仅仅会创建一个最原始的 元素，其中不包含任何 canvas 所特有的属性（记得这是 HTML 5 向后兼容的一种体现）。于是，我们利用这个特性，就可以按照如下的方法检测 canvas 特性
function supports_canvas() {
return !!document.createElement(’canvas’).getContext;
}这个函数将创建一个临时的 元素，但并不会将其显示到你的页面上，所以没有人会看到它。这个元素仅仅存在于内存中，哪里也不会去，什么也做不了，就像是静止的河流上面漂着的独木舟。
createElement(‘canvas’) 语句就是用来创建这个对象的。然后，我们测试能不能调用 getContext() 函数。这个函数仅在支持 canvas API 的浏览器中才能使用。最后，我们用两个取非运算符 !! 将 getContext() 函数的返回值转换成 Boolean 值。
这个函数可以用来检测是否支持大多数 canvas API，包括形状、路径、渐变和填充等。它不会检测到任何在IE9 之前版本的 IE 上的模拟库（由于 IE9 才能够支持 canvas API，在早于 IE9 的版本上有很多第三方库来在 IE 上模拟 canvas）。
如果你不愿意自己写函数，当然也可以使用 Modernizr 来检测 canvas API。
if (Modernizr.canvas) {
// 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() 函数；如果不支持，则会创建一个没有任何特殊属性的普通 DOM 对象。下面我们在此基础之上来检测 canvas text API。
function supports_canvas_text() {
if (!supports_canvas()) {
return false;
}
var dummy_canvas = document.createElement(’canvas’);
var context = dummy_canvas.getContext(’2d’);
return typeof context.fillText == ‘function’;
}这个函数首先调用我们前面说过的 supports_canvas() 函数，来检测是否支持 canvas API。如果浏览器连 canvas API 都不支持，更不用谈 canvas text API 了！然后，我们创建一个临时的 元素，获取其 context。这段代码一定是可以工作的，因为我们已经使用 supports_canvas() 判断过了。最后，我们检查是否存在 fillText() 函数。如果存在，则支持 canvas text API。
如果不想自己写代码，那么就使用 Modernizr 吧！
if (Modernizr.canvastext) {
// let’s draw some text!
} else {
// no native canvas text support available
}以上就是检测浏览器支持哪些HTML5新特性的方法的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Coinbase Exchange Login Port 2025
Mar 21, 2025 pm 05:51 PM
Coinbase Security Login Guide: How to Avoid Phishing Sites and Scams? Phishing and scams are becoming increasingly rampant, and it is crucial to securely access the Coinbase official login portal. This article provides practical guides to help users securely find and use the latest official login portal of Coinbase to protect the security of digital assets. We will cover how to identify phishing sites, and how to log in securely through official websites, mobile apps or trusted third-party platforms, and provide suggestions for enhancing account security, such as using a strong password and enabling two-factor verification. To avoid asset losses due to incorrect login, be sure to read this article carefully!
The latest registration portal for Ouyi official website
Mar 21, 2025 pm 05:54 PM
As the world's leading digital asset trading platform, Ouyi OKX attracts many investors with its rich trading products, strong security guarantees and convenient user experience. However, the risks of network security are becoming increasingly severe, and how to safely register the official Ouyi OKX account is crucial. This article will provide the latest registration portal for Ouyi OKX official website, and explain in detail the steps and precautions for safe registration, including how to identify the official website, set a strong password, enable two-factor verification, etc., to help you start your digital asset investment journey safely and conveniently. Please note that there are risks in digital asset investment, please make cautious decisions.
Ouyi Exchange app domestic download tutorial
Mar 21, 2025 pm 05:42 PM
This article provides a detailed guide to safe download of Ouyi OKX App in China. Due to restrictions on domestic app stores, users are advised to download the App through the official website of Ouyi OKX, or use the QR code provided by the official website to scan and download. During the download process, be sure to verify the official website address, check the application permissions, perform a security scan after installation, and enable two-factor verification. During use, please abide by local laws and regulations, use a safe network environment, protect account security, be vigilant against fraud, and invest rationally. This article is for reference only and does not constitute investment advice. Digital asset transactions are at your own risk.
Ouyi Exchange web version registration portal Ouyi registration portal
Mar 20, 2025 pm 05:48 PM
This article details how to register an account on the official website of Ouyi OKX Exchange and start cryptocurrency trading. As the world's leading cryptocurrency exchange, Ouyi provides a wide range of trading varieties, multiple trading methods and strong security guarantees, and supports convenient withdrawal of a variety of fiat and cryptocurrencies. The article covers the search methods for Ouyi official website registration entrance, detailed registration steps (including email/mobile registration, information filling, verification code verification, etc.), as well as precautions after registration (KYC certification, security settings, etc.), and answers common questions to help novice users quickly and safely complete Ouyi account registration and start a cryptocurrency investment journey.
Binance Exchange app domestic download tutorial
Mar 21, 2025 pm 05:45 PM
This article provides a safe and reliable Binance Exchange App download guide to help users solve the problem of downloading Binance App in the country. Due to restrictions on domestic application stores, the article recommends priority to downloading APK installation packages from Binance official website, and introduces three methods: official website download, third-party application store download, and friends sharing. At the same time, it emphasizes security precautions during the download process, such as verifying the official website address, checking application permissions, scanning with security software, etc. In addition, the article also reminds users to understand local laws and regulations, pay attention to network security, protect personal information, beware of fraud, rational investment, and secure transactions. At the end of the article, the article once again emphasized that downloading and using Binance App must comply with local laws and regulations, and at your own risk, and does not constitute any investment advice.
Log in to the latest official website of BitMEX exchange
Mar 21, 2025 pm 06:06 PM
This article provides safe and reliable guides to help users access the latest official website of BitMEX exchange and improve transaction security. Due to regulatory and cybersecurity threats, it is crucial to identify the official BitMEX website and avoid phishing websites stealing account information and funds. The article introduces the search for official website portals through trusted cryptocurrency platforms, official social media, news media, and subscribes to official emails. It emphasizes the importance of checking domain names, using HTTPS connections, checking security certificates, and enabling two-factor verification and changing passwords regularly. Remember, cryptocurrency trading is high risk, please invest with caution.
Detailed explanation of the issuance price and issuance time of LOOM coins
Mar 20, 2025 pm 06:21 PM
LOOM Coin, a once-highly-known blockchain game and social application development platform token, its ICO was held on April 25, 2018, with an issue price of approximately US$0.076 per coin. This article will conduct in-depth discussion on the issuance time, price and important precautions of LOOM coins, including market volatility risks and project development prospects. Investors should be cautious and do not follow the trend blindly. It is recommended to refer to the official website of Loom Network, blockchain browser and cryptocurrency information platform to obtain the latest information and conduct sufficient risk assessment. The information in this article is for reference only and does not constitute investment advice. Learn about LOOM coins, start here!
Coinbase Exchange web version login portal
Mar 21, 2025 pm 05:48 PM
The Coinbase exchange web version is popular for its convenience, but secure access is crucial. This article aims to guide users to log in to the official Coinbase web version safely and avoid phishing websites and hackers. We will explain in detail how to verify the official portal through search engines, trusted third-party platforms and official social media, and emphasize security measures such as checking the address bar security lock, enabling two-factor verification, avoiding public Wi-Fi, changing passwords regularly, and being alert to phishing emails to ensure the security of your digital assets. Correct access to the official Coinbase website is the first step to protecting your digital currency. This article will help you start your digital currency trading journey safely.
