如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度
本篇內(nèi)容主要講解“如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度”吧!
目前成都創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、金川網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
HTML5, CSS3 以及其他相關(guān)技術(shù)例如 Canvas、WebSocket 等等將 Web 應(yīng)用開發(fā)帶到了一個(gè)新的高度。該技術(shù)通過組合 HTML、CSS 和 JavaScript 可以開發(fā)出桌面應(yīng)用具有的效果。盡管 HTML5 承諾很多，但現(xiàn)實(shí)中對(duì) HTML5 支持的瀏覽器以及 HTML5 標(biāo)準(zhǔn)本身的完善程度都還沒有到一個(gè)很成熟的程度。現(xiàn)在完全不擔(dān)心瀏覽器支持是不現(xiàn)實(shí)的，還需要時(shí)間，因此當(dāng)我們決定要采用 HTML5 技術(shù)開發(fā) Web 應(yīng)用的時(shí)候，我們需要對(duì)瀏覽器所支持的特性進(jìn)行檢測(cè)。
而 Modernizr 就可以幫助你完成對(duì)瀏覽器所支持 HTML5 特性的檢查。
下面代碼檢測(cè)瀏覽器是否支持 Canvas：
復(fù)制代碼
代碼如下:
<script>
window.onload = function () {
if (canvasSupported()) {
alert('canvas supported');
}
};
function canvasSupported() {
var canvas = document.createElement('canvas');
return (canvas.getContext && canvas.getContext('2d'));
}
</script>
下面代碼檢測(cè)瀏覽器是否支持本地存儲(chǔ)：
復(fù)制代碼
代碼如下:
<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>
上面的兩個(gè)例子中我們可以很直觀的對(duì)瀏覽器的特性進(jìn)行檢查以確保我們?cè)趯?duì)應(yīng)的瀏覽器上應(yīng)用的功能能否正常運(yùn)作。
而使用 Modernizr 的好處還在于你不需要這樣一項(xiàng)項(xiàng)去檢查，還有更簡單的方法，下面我們開始：
當(dāng)我第一次聽到 Moderizr 這個(gè)項(xiàng)目時(shí)，我以為這是一個(gè)讓一些老的瀏覽器能支持 HTML5 的 JS 庫，事實(shí)上不是，它主要是檢測(cè)的功能。
Modernizr 可以通過網(wǎng)址 http://modernizr.com 來訪問，該網(wǎng)站同時(shí)還提供一個(gè)定制腳本的功能，你可以確定你需要檢測(cè)什么特性，并依此來生成相應(yīng)的 JS 文件，這樣可以減少不必要的 JS 代碼。
2015625153003697.png (690×533)
一旦下載了 Modernizr 的 JS 文件后，就可以通過 <script> 標(biāo)簽引入到網(wǎng)頁中。
復(fù)制代碼
代碼如下:
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
檢測(cè) HTML 元素
一旦我們?cè)陧撁嫔弦肓?Modernizr 后就可以立即使用，我們可以在 <html> 元素中聲明不同的 CSS 類，這些類定義了所需要支持或者不支持的特性，不支持的特性其類名一般是 no-FeatureName，例如 no-flexbox。下面是一個(gè)在 chrome 上可運(yùn)行的例子：
復(fù)制代碼
代碼如下:
<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
csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">
還可以這樣來判斷瀏覽器是否啟用了 JavaScript 支持：
復(fù)制代碼
代碼如下:
<html class="no-js">
你可以在 HTML5 Boilerplate (http://html5boilerplate.com) 或者是 Initializr (http://initializr.com) 看到一些入門的例子，根據(jù)上面的步驟，增加 no-js 類可以判斷瀏覽器是否啟用了 JavaScript 支持。
使用 HTML5 和 CSS3 特性
你為 <html> 標(biāo)簽增加的 CSS 屬性，可以直接在 CSS 中定義所需要的樣式，例如：
復(fù)制代碼
代碼如下:
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
如果瀏覽器支持 box-shadows 的話，將會(huì)為 <html> 元素增加 boxshadow 這個(gè) CSS 類，否則的話就使用 no-boxshadow 這個(gè)類。這樣假設(shè)瀏覽器不支持 box-shadow 的話，我們可以使用其他的樣式來進(jìn)行定義。
另外我們也可以使用 Modernizr 的對(duì)象來操作這個(gè)行為，例如下面的代碼用來檢測(cè)瀏覽器是否支持 Canvas 和 本地存儲(chǔ)：
復(fù)制代碼
代碼如下:
$(document).ready(function () {
if (Modernizr.canvas) {
//Add canvas code
}
if (Modernizr.localstorage) {
//Add local storage code
}
});
全局的 Modernizr 對(duì)象同樣可用于測(cè)試 CSS3 特性是否支持：
復(fù)制代碼
代碼如下:
$(document).ready(function () {
if (Modernizr.borderradius) {
$('#MyDiv').addClass('borderRadiusStyle');
}
if (Modernizr.csstransforms) {
$('#MyDiv').addClass('transformsStyle');
}
});
使用Modernizr加載腳本
在出現(xiàn)了瀏覽器不支持某些功能的的情況下,你不僅可以提供一個(gè)不錯(cuò)的備用方案,還可以加載shim/polyfill腳本在適當(dāng)情況下填補(bǔ)缺失的功能 (想了解更多關(guān)于shims/polyfills的信息,請(qǐng)查看 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr擁有一個(gè)內(nèi)置的腳本加載器,可以用來測(cè)試一個(gè)功能,并在功能無效的時(shí)候加載另一個(gè)腳本. 腳本加載器是內(nèi)置在Modernizr中的,并且是有效的獨(dú)立yepnope(http://yepnopejs.com)腳本. 腳本加載器非常容易上手,它根據(jù)特定瀏覽器功能的可用性,真的會(huì)簡化加載腳本的過程.
你可以使用Modernizr的load()方法來動(dòng)態(tài)加載腳本,該方法接受定義被測(cè)功能的屬性(test屬性), 如測(cè)試成功后要加載的腳本(yep屬性), 如測(cè)試失敗后要加載的腳本(nope屬性), 和無論測(cè)試成功還是失敗都要加載的腳本(both屬性). 使用load()及其屬性的示例如下:
復(fù)制代碼
代碼如下:
Modernizr.load({
test: Modernizr.canvas,
yep: 'html5CanvasAvailable.js’,
nope: 'excanvas.js’,
both: 'myCustomScript.js'
});
在這個(gè)例子中Modernizr在加載腳本時(shí)還會(huì)測(cè)試是否支持canvas功能 . 如果目標(biāo)瀏覽器支持HTML5 canvas就會(huì)加載html5CanvasAvailable.js腳本及 myCustomScript.js腳本 (在這個(gè)例子中使用yep屬性有點(diǎn)牽強(qiáng) – 這只是為了演示load()方法中的屬性如何使用 ). 否則的話, 就會(huì)加載 excanvas.js這個(gè) polyfill腳本來為IE9之前版本的瀏覽器添加功能支持 . 一旦excanvas.js被加載,myCustomScript.js也會(huì)接著被加載.
由于Modernizr會(huì)處理加載腳本, 所以你可以用它來做些別的事情. 比如, 在Google或微軟提供的第三方cdn不管用的時(shí)候，你可以用Modernizr來加載本地的腳本. Modernizr文檔中提供了在CDN掛掉后提供本地jQuery后備過程的示例:
代碼會(huì)先嘗試從Google CND加載jQuery. 一旦腳本下載完成(或者下載失敗)就會(huì)調(diào)用某個(gè)方法. 這個(gè)方法會(huì)檢查jQuery對(duì)象是否有效,如果無效就加載本地的jQuery腳本. 并在其后加載一個(gè)名為needs-jQuery.js的腳本.
到此，相信大家對(duì)“如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
文章題目：如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度
文章URL：http://jinyejixie.com/article38/gpsppp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、全網(wǎng)營銷推廣、商城網(wǎng)站、虛擬主機(jī)、服務(wù)器托管、外貿(mào)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 怎樣判斷網(wǎng)站是否被黑 2016-11-04
- 福田網(wǎng)站建設(shè)基礎(chǔ)知識(shí)，網(wǎng)站建設(shè)比較常見的外鏈建設(shè)方法是什么？ 2023-12-07
- 搜索引擎如何判斷網(wǎng)站文章是不是原創(chuàng)？ 2021-04-15
- 三步實(shí)現(xiàn)對(duì)圖片的SEO優(yōu)化 2022-08-18
- “云計(jì)算”的優(yōu)勢(shì)造就物流信息平臺(tái)的不同？ 2021-01-27
- 企業(yè)站如何做好布局工作？ 2014-11-18
- 如何避免我們的網(wǎng)站“被SEO”呢 2021-09-13
- 建網(wǎng)站哪些方面宜盡早操作 2022-10-26
- 如何對(duì)網(wǎng)站關(guān)鍵詞進(jìn)行優(yōu)化 2016-11-16
- 新媒體之微信營銷該如何進(jìn)行 2022-06-08
- 網(wǎng)站優(yōu)化和推廣是網(wǎng)絡(luò)營銷過程的重要部分 2022-12-06
- 網(wǎng)站建設(shè)，網(wǎng)站關(guān)鍵詞優(yōu)化方法 2022-12-08