溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度”吧!
HTML5, CSS3 以及其他相關(guān)技術(shù)例如 Canvas、WebSocket 等等將 Web 應(yīng)用開(kāi)發(fā)帶到了一個(gè)新的高度。該技術(shù)通過(guò)組合 HTML、CSS 和 JavaScript 可以開(kāi)發(fā)出桌面應(yīng)用具有的效果。盡管 HTML5 承諾很多，但現(xiàn)實(shí)中對(duì) HTML5 支持的瀏覽器以及 HTML5 標(biāo)準(zhǔn)本身的完善程度都還沒(méi)有到一個(gè)很成熟的程度。現(xiàn)在完全不擔(dān)心瀏覽器支持是不現(xiàn)實(shí)的，還需要時(shí)間，因此當(dāng)我們決定要采用 HTML5 技術(shù)開(kāi)發(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)去檢查，還有更簡(jiǎn)單的方法，下面我們開(kāi)始：
當(dāng)我第一次聽(tīng)到 Moderizr 這個(gè)項(xiàng)目時(shí)，我以為這是一個(gè)讓一些老的瀏覽器能支持 HTML5 的 JS 庫(kù)，事實(shí)上不是，它主要是檢測(cè)的功能。
Modernizr 可以通過(guò)網(wǎng)址 http://modernizr.com 來(lái)訪問(wèn)，該網(wǎng)站同時(shí)還提供一個(gè)定制腳本的功能，你可以確定你需要檢測(cè)什么特性，并依此來(lái)生成相應(yīng)的 JS 文件，這樣可以減少不必要的 JS 代碼。
2015625153003697.png (690×533)
一旦下載了 Modernizr 的 JS 文件后，就可以通過(guò) <script> 標(biāo)簽引入到網(wǎng)頁(yè)中。
復(fù)制代碼
代碼如下:
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
檢測(cè) HTML 元素
一旦我們?cè)陧?yè)面上引入了 Modernizr 后就可以立即使用，我們可以在 <html> 元素中聲明不同的 CSS 類(lèi)，這些類(lèi)定義了所需要支持或者不支持的特性，不支持的特性其類(lèi)名一般是 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">
還可以這樣來(lái)判斷瀏覽器是否啟用了 JavaScript 支持：
復(fù)制代碼
代碼如下:
<html class="no-js">
你可以在 HTML5 Boilerplate (http://html5boilerplate.com) 或者是 Initializr (http://initializr.com) 看到一些入門(mén)的例子，根據(jù)上面的步驟，增加 no-js 類(lèi)可以判斷瀏覽器是否啟用了 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à)，將會(huì)為 <html> 元素增加 boxshadow 這個(gè) CSS 類(lèi)，否則的話(huà)就使用 no-boxshadow 這個(gè)類(lèi)。這樣假設(shè)瀏覽器不支持 box-shadow 的話(huà)，我們可以使用其他的樣式來(lái)進(jìn)行定義。
另外我們也可以使用 Modernizr 的對(duì)象來(lái)操作這個(gè)行為，例如下面的代碼用來(lái)檢測(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)置的腳本加載器,可以用來(lái)測(cè)試一個(gè)功能,并在功能無(wú)效的時(shí)候加載另一個(gè)腳本. 腳本加載器是內(nèi)置在Modernizr中的,并且是有效的獨(dú)立yepnope(http://yepnopejs.com)腳本. 腳本加載器非常容易上手,它根據(jù)特定瀏覽器功能的可用性,真的會(huì)簡(jiǎn)化加載腳本的過(guò)程.
你可以使用Modernizr的load()方法來(lái)動(dòng)態(tài)加載腳本,該方法接受定義被測(cè)功能的屬性(test屬性), 如測(cè)試成功后要加載的腳本(yep屬性), 如測(cè)試失敗后要加載的腳本(nope屬性), 和無(wú)論測(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à), 就會(huì)加載 excanvas.js這個(gè) polyfill腳本來(lái)為IE9之前版本的瀏覽器添加功能支持 . 一旦excanvas.js被加載,myCustomScript.js也會(huì)接著被加載.
由于Modernizr會(huì)處理加載腳本, 所以你可以用它來(lái)做些別的事情. 比如, 在Google或微軟提供的第三方CDN不管用的時(shí)候，你可以用Modernizr來(lái)加載本地的腳本. Modernizr文檔中提供了在CDN掛掉后提供本地jQuery后備過(guò)程的示例:
代碼會(huì)先嘗試從Google CND加載jQuery. 一旦腳本下載完成(或者下載失敗)就會(huì)調(diào)用某個(gè)方法. 這個(gè)方法會(huì)檢查jQuery對(duì)象是否有效,如果無(wú)效就加載本地的jQuery腳本. 并在其后加載一個(gè)名為needs-jQuery.js的腳本.
到此，相信大家對(duì)“如何檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
