您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“基于Modernizr怎么讓網(wǎng)站進(jìn)行優(yōu)雅降級(jí)”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“基于Modernizr怎么讓網(wǎng)站進(jìn)行優(yōu)雅降級(jí)”吧!
如今一個(gè)網(wǎng)頁(yè)展現(xiàn)的內(nèi)容是越來(lái)越豐富,其中不乏一些HTML5、CSS3的功能特效。那么如果客戶端的瀏覽器支持HTML5。頁(yè)面訪問(wèn)效果很好沒有問(wèn)題。如果不支持HTML5,還是IE6,7,8等瀏覽器的時(shí)候呢?這個(gè)時(shí)候往往是作為一個(gè)前段人員非常頭痛的事情了,兼容。
此時(shí)的兼容。無(wú)非是讓用戶能夠盡可能的在所有的瀏覽器的里面看上去,使用上都是一致的。但是頁(yè)面使用了HTML5標(biāo)簽,使用了CSS3樣式??蛻舳藶g覽器不支持HTML5,怎么辦呢?對(duì)于這樣的問(wèn)題,我們只能做到,能支持多少給支持多少。不能支持得給個(gè)友好提示和建議。讓用戶升級(jí)到更高版本的瀏覽器。所以在制作的編碼過(guò)程中我們要進(jìn)行一些功能性的檢測(cè).假設(shè)我們要做一個(gè)圓角效果。使用CSS3,HTML5 非常方便。
<style>
article
{
background: lightblue;
margin: 20px;
padding: 5px;
width: 350px;
border-radius: 10px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
article h2 { font-size: 12px; }
</style>
<article>
<header><h2>我的標(biāo)題</h2></header>
<p>這個(gè)地方是內(nèi)容</p>
</article>
出現(xiàn)的效果也我們預(yù)期的是一樣的
如果客戶端瀏覽器不支持HTML5? 我們來(lái)用IE的F12工具測(cè)試一下
注意:瀏覽器模式和文檔模式都必須進(jìn)行選擇
在不支持HTML5的瀏覽器中頁(yè)面效果是非常殘酷的
對(duì)于這樣的問(wèn)題是我們必須進(jìn)行修復(fù)的。所以沒有辦法,針對(duì)于不支持HTMl5的瀏覽器要多做一些工作。怎么解決這樣一個(gè)圓角效果的兼容呢?肯定是對(duì)不支持HTMl5的瀏覽器做判斷。如果不支持HTML5圓角我們用第三方的圓角js來(lái)做。問(wèn)題又來(lái)了?如何進(jìn)行這樣一個(gè)圓角功能做判斷呢?這個(gè)時(shí)候又遲疑了。有沒有一個(gè)針對(duì)HTML5比較高效全面簡(jiǎn)潔的功能判斷js呢?
http://modernizr.com/ Modernizr 一個(gè)HTML5功能檢測(cè)插件。
還是上方圓角特效,稍作修改
注意:pie.js 為第三方的圓角插件
<script type="text/javascript" src="Scripts/modernizr-2.0.6.min.js"></script>
<style>
article
{
background: lightblue;
margin: 20px;
padding: 5px;
width: 350px;
border-radius: 10px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
article h2 { font-size: 12px; }
</style>
<article>
<header><h2>我的標(biāo)題</h2></header>
<p>我的內(nèi)容</p>
</article>
<script>
Modernizr.load([{
load: 'Scripts/jquery-1.6.1.min.js',
complete: function () {
if (!window.jQuery) {
Modernizr.load('Scripts/jquery-1.6.1.min.js');
}
}
},
{
test: Modernizr.borderradius || Modernizr.boxshadow,
nope: 'Scripts/PIE.js',
callback: function () {
$('article').each(function () {
PIE.attach(this);
});
}
}]);
</script>
到此,相信大家對(duì)“基于Modernizr怎么讓網(wǎng)站進(jìn)行優(yōu)雅降級(jí)”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jì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)容。