Modernizr.js，~讓css兼容性跟歷史說再見！(上篇)

時間 2019-11-13

標籤 modernizr.js modernizr css 兼容性歷史再見上篇欄目 JavaScript 简体版

原文原文鏈接

什麼是Modernizr？javascript

Modernizr是一個開源的JS庫，它使得那些基於訪客瀏覽器的不一樣（指對新標準支持性的差別）而開發不一樣級別體驗的設計師的工做變得更爲簡單。它使得設計師能夠在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其餘不支持這些新技術的瀏覽器的控制。css

當你在網頁中嵌入Modernizr的腳本時，它會檢測當前瀏覽器是否支持CSS3的特性，好比 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持HTML5的特性——好比audio、video、本地儲存、和新的標籤的類型和屬性等。在獲取到這些信息的基礎上，你能夠在那些支持這些功能的瀏覽器上使用它們，來決定是否建立一個基於JS的 fallback，或者對那些不支持的瀏覽器進行簡單的優雅降級。另外，Modernizr還能夠令IE支持對HTML5的元素應用CSS樣式，這樣開發者就能夠當即使用這些更富有語義化的標籤了。html

Modernizr 簡單易用，但不是萬能的。成功使用 Modernizr 很大程度上取決於你的 CSS 和 JavaScript 技能。html5

使用HTML 5和CSS 3的主要問題不是普及程度和瀏覽器之間的差別，而在於首先了解這些差別是什麼。一旦搞清楚，開發人員就可以採用優雅降級(graceful degradation)技術解決這些侷限性。爲此，許多開發人員求助於開源項目Modernizr。java

Modernizr的原理git

Modernizr 使用 JavaScript 檢測瀏覽器所支持的功能，可是，它並非使用 JavaScript 動態地加載不一樣的樣式表，而是使用很是簡單的技術將類添加到頁面的標籤。而後做爲設計者由你決定使用 CSS 層疊爲目標元素提供合適的樣式。github

例如，若是頁面支持 box-shadow 屬性，那麼 Modernizr 會添加 boxshadow 類。若是不支持，那麼它用 no-boxshadow 類做爲替代進行添加。web

因爲瀏覽器忽略它們沒法識別的 CSS 屬性，所以你能夠放心地按照你的基本樣式規則使用 box-shadow 屬性，然而須要按照下面的格式爲舊版本的瀏覽器添加單獨的 descendant selector ：canvas

.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }瀏覽器

只有不支持 box-shadow 的瀏覽器纔會有 no-boxshadow 類，所以其它的瀏覽器不會應用這個樣式規則。

開始給你們分析那個本身製做頁面的心得，

<script src="modernizr-custom.js"></script>

首先你要有一個框架，能夠在github上進行下載

https://github.com/Modernizr/Modernizr/downloads ，要下載最新的版本哦！

好接下來咱們開始進行測試，既然我引入了框架，那我應該如何看到是否成功呢，接下來請往下看

!doctype html>
<html lang="en" class="no-js">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>modernizr</title>
  <script src="modernizr-custom.js"></script>
 </head>
 <style>
 
 .div_1{width:300px;height:150px;background:red;box-shadow:5px 5px 5px green;}
 .no-div.div_1{boxshadow:5px 5px 5px green;}
 </style>
 
 <body>
  <div class="div_1">
  
  </div>

 </body>
</html>

你們請注意這裏面的

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

這裏面的

<html class-="no-js">

這個東西是當Modernizr運行的時候，它會把這個「no-js」的類變爲「js」來使你知道它已經運行。Modernizr並不單單隻作這一件事情，它還會爲全部它檢測過的特性添加class類，若是瀏覽器不支持某個特性，它就爲該特性對應的類名加上「no-」的前綴。因此，你的<html>元素可能會變得看起來像下面這個樣子：

<html class="js canvas canvastext no-geolocation rgba hsla   
multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns   
cssgradients cssreflections csstransforms csstransforms3d csstransitions video   
audio localstorage sessionstorage webworkers applicationcache fontface">

這個是在DW裏面纔會出現的結果，PS 我用的並無這麼一大段代碼，