JavaScript工具庫(kù)—Modernizr

2021-09-15 16:18 更新

概述

隨著HTML5和CSS3加入越來(lái)越多的模塊，檢查各種瀏覽器是否支持這些模塊，成了一大難題。Modernizr就是用來(lái)解決這個(gè)問(wèn)題的一個(gè)JavaScript庫(kù)。

首先，從modernizr.com下載這個(gè)庫(kù)。下載的時(shí)候，可以選擇所需要的模塊。然后，將它插入HTML頁(yè)面的頭部，放在head標(biāo)簽之中。

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://atts.w3cschool.cn/attachments/image/cimg/modernizr.js"></script>
</head>

</html>

CSS的新增class

使用Modernizr以后，首先會(huì)把html元素的class替換掉。以chrome瀏覽器為例，新增的class大概是下面的樣子。

<html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg blobbuilder blob bloburls download formdata">

IE 7則是這樣：

<html class="js no-touch postmessage no-history no-multiplebgs no-boxshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-csstransforms no-csstransitions fontface localstorage sessionstorage no-svg no-inlinesvg wf-loading no-blobbuilder no-blob no-bloburls no-download no-formdata">

然后，就可以針對(duì)不同的CSS class，指定不同的樣式。

.button {
   background: #000;
   opacity: 0.75;
}

.no-opacity .button {
   background: #444;
}

JavaScript偵測(cè)

除了提供新增的CSS class，Modernizr還提供JavaScript方法，用來(lái)偵測(cè)瀏覽器是否支持某個(gè)功能。

Modernizr.cssgradients; //True in Chrome, False in IE7

Modernizr.fontface; //True in Chrome, True in IE7

Modernizr.geolocation; //True in Chrome, False in IE7

if (Modernizr.canvas){
    // 支持canvas
} else {
   // 不支持canvas
}

if (Modernizr.touch){
    // 支持觸摸屏
} else {
   // 不支持觸摸屏
}

加載器

Modernizr允許根據(jù)Javascript偵測(cè)的不同結(jié)果，加載不同的腳本文件。

Modernizr.load({
  test :        Modernizr.localstorage,
  yep  :        'localStorage.js',
  nope :        'alt-storageSystem.js',
  complete :    function () { enableStorgeSaveUI();}
});

Modernizr.load方法用來(lái)加載腳本。它的屬性如下：

  • test：用來(lái)測(cè)試瀏覽器是否支持某個(gè)屬性。
  • yep：如果瀏覽器支持該屬性，加載的腳本。
  • nope：如果瀏覽器不支持該屬性，加載的腳本。
  • complete：加載完成后，運(yùn)行的JavaScript代碼。

可以指定在支持某個(gè)功能的情況，所要加載的JavaScript腳本和CSS樣式。

Modernizr.load({
  test : Modernizr.touch,
  yep :  ['js/touch.js', 'css/touchStyles.css']
});

參考鏈接

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)