傳統(tǒng)瀏覽器目前不會(huì)被完全取代，令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網(wǎng)站。 Modernizr 正是為解決這一難題應(yīng)運(yùn)而生，作為一個(gè)開(kāi)源的 JavaScript 庫(kù)，Modernizr 檢測(cè)瀏覽器對(duì) CSS3 或 HTML5 功能支持情況。 Modernizr 并非試圖添加老版本瀏覽器不支持的功能，而是令你通過(guò)創(chuàng)建可選風(fēng)格配置修改頁(yè)面設(shè)計(jì)。 它也可以通過(guò)加載定制的腳本來(lái)模擬老版本瀏覽器不支持的功能。
Modernizr 簡(jiǎn)單易用，但不是萬(wàn)能的。 成功使用 Modernizr 很大程度上取決于你的 CSS 和 JavaScript 技能。 通過(guò)本指南，你可以了解如何為不支持多欄或投影的瀏覽器設(shè)置可選風(fēng)格。 此外，你還可以了解如何讓老版本瀏覽器對(duì)使用最新 HTML5 要求（required）屬性的表單進(jìn)行驗(yàn)證，以及如何根據(jù)瀏覽器的功能有選擇地加載腳本文件。
Modernizr 是一個(gè)用來(lái)檢測(cè)瀏覽器功能支持情況的 JavaScript 庫(kù)。 目前，通過(guò)檢驗(yàn)瀏覽器對(duì)一系列測(cè)試的處理情況，Modernizr 可以檢測(cè)18項(xiàng) CSS3 功能以及40多項(xiàng)關(guān)于HTML5 的功能。 它比傳統(tǒng)檢測(cè)瀏覽器名稱(chēng)（瀏覽器嗅探）的方式更為可靠。 一整套測(cè)試的執(zhí)行時(shí)間僅需幾微秒。 此外，Modernizr 網(wǎng)站通過(guò)定制腳本只對(duì)你感興趣的元素進(jìn)行檢測(cè)，從而實(shí)現(xiàn)效率優(yōu)化。
當(dāng)使用 Modernizr 檢測(cè) CSS3 支持情況時(shí)，你無(wú)需具備任何 JavaScript 的知識(shí)。 你僅需在網(wǎng)頁(yè)中插入文件，它隨即根據(jù)瀏覽器的功能情況在頁(yè)面的<html>標(biāo)簽上添加一組類(lèi)。 相應(yīng)類(lèi)的名稱(chēng)已經(jīng)符合標(biāo)準(zhǔn)化的要求并淺顯易懂。 例如，如果瀏覽器支持 box-shadow 屬性，則需要添加相應(yīng)的 boxshadow 類(lèi)；否則，添加一個(gè) no-boxshadow類(lèi)即可。 你所要做的一切只不過(guò)是創(chuàng)建一個(gè)使用這些類(lèi)的式樣表，以便為相應(yīng)瀏覽器提供合適的式樣。
Modernizr 可輕松實(shí)現(xiàn) JavaScript 解決方案，即人們熟知的 polyfills——它模擬HTML5 相關(guān)功能和技術(shù)，如地理定位。 然而，你的確需要對(duì) JavaScript 有基本了解以便使用這些功能和技術(shù)。 術(shù)語(yǔ)polyfill 來(lái)源于一種填補(bǔ)裂縫的黏土的英國(guó)品牌Polyfilla（即美國(guó)人熟知的填泥料）。 這里，polyfill 用來(lái)填補(bǔ)瀏覽器功能上的漏洞。 有時(shí)，Modernizr 可無(wú)縫地執(zhí)行這項(xiàng)任務(wù)。 但本質(zhì)上，這只是一種修補(bǔ)工作，所以，不能依賴(lài)它產(chǎn)生無(wú)漏洞瀏覽器所實(shí)現(xiàn)的完全相同結(jié)果。
與其它 JavaScript 庫(kù)相同的是，Modernizr 可提供 development 和 production 版本。 與大多數(shù)庫(kù)相比，唯一的不同之處是，空格和注釋已經(jīng)從 production 版本中刪除了，這樣可以減少下載量的大小。 Modernizr 采取了不同的方法。 development 版本在某種意義上可稱(chēng)為是“廚房中的水槽”—它幾乎包含了一切。 production 版本只包含了你選擇的那些元素，這樣能夠顯著降低下載量。 在很多情況下，production 版本可以縮小為development版本大小的二十分之一。
當(dāng)使用 Modernizr 進(jìn)行測(cè)試時(shí)，我建議你下載 development 版本。 一旦你掌握了它是如何運(yùn)作的以及它的能力，你就可以下載一個(gè)自定義 production 版本以便在你的網(wǎng)站進(jìn)行部署。
本教程的示例文件包含的是 Modernizr的development 2.0.6 版本，但是我建議你從 Modernizr 站點(diǎn)上用最新更新的版本替代它。
注： 如果你錯(cuò)誤地單擊了主導(dǎo)航菜單中的 Download 鏈接，那么你將看到大量的復(fù)選框出現(xiàn)，要求你去選擇你想要的工具。 這是為定制的 production 版本所設(shè)置。 單擊面板頂部的 Development 版本的鏈接，或者單擊瀏覽器的 Back 按鈕返回主頁(yè)并選中圖1所示的 Development 按鈕。
如前所述，Modernizr 并沒(méi)有嘗試在舊版本的瀏覽器中添加新的功能，但是它允許你按照你的風(fēng)格去彌補(bǔ)那些缺失的功能。 為了展示這是如何運(yùn)作的，示例文件中包含了一個(gè)叫做 css_support_begin.html 的頁(yè)面。如果你在新式瀏覽器中加載這個(gè)頁(yè)面，它應(yīng)該看起來(lái)如圖2所示。
該頁(yè)面的風(fēng)格是使用了CSS3的 column-count 和 box-shadow 屬性，以便以多欄的格式顯示文本并在圖像中添加陰影。 舊版本的瀏覽器不支持這些屬性中任何一項(xiàng)，因此在 Internet Explorer (IE) 7 中同一頁(yè)面看起來(lái)如圖3所示。
在IE9中，同一頁(yè)面顯示了圖像陰影，但是文本和圖3中所示的布局是一樣的。
你在嘗試彌補(bǔ)缺失的功能上采取什么方式取決于你的設(shè)計(jì)大綱的要求。 要嘗試使頁(yè)面在所有的瀏覽器中看起來(lái)完全一樣將要涉及大量工作，但是你可以做一些簡(jiǎn)單的改進(jìn)，比如在圖像周?chē)h(huán)繞文字，調(diào)整圖像與文本的左邊距，以及在圖像底部和右邊緣添加隱約的邊界，以便使它更具三維立體的感覺(jué)。
Modernizr 使用 JavaScript 檢測(cè)瀏覽器所支持的功能，但是，它并不是使用 JavaScript 動(dòng)態(tài)地加載不同的樣式表，而是使用非常簡(jiǎn)單的技術(shù)將類(lèi)添加到頁(yè)面的<html>標(biāo)簽。然后作為設(shè)計(jì)者由你決定使用 CSS 層疊為目標(biāo)元素提供合適的樣式。例如，如果頁(yè)面支持 box-shadow 屬性，那么 Modernizr 會(huì)添加 boxshadow 類(lèi)。如果不支持，那么它用 no-boxshadow 類(lèi)作為替代進(jìn)行添加。
由于瀏覽器忽略它們無(wú)法識(shí)別的 CSS 屬性，因此你可以放心地按照你的基本樣式規(guī)則使用 box-shadow 屬性，然而需要按照下面的格式為舊版本的瀏覽器添加單獨(dú)的 descendant selector ：
.no-boxshadow img { /* styles for browsers that don't support box-shadow */} 只有不支持 box-shadow 的瀏覽器才會(huì)有 no-boxshadow 類(lèi)，因此其它的瀏覽器不會(huì)應(yīng)用這個(gè)樣式規(guī)則。
讓我們將 Modernizr 添加到示例頁(yè)面并檢查它添加到<html> 標(biāo)簽中的類(lèi)。
<!DOCTYPE HTML><html> <!DOCTYPE HTML><html class="no-js"> Modernizr 依賴(lài)于在瀏覽器中啟用的 JavaScrip。 當(dāng)它啟用時(shí)，這種類(lèi)會(huì)被動(dòng)態(tài)地刪除。 但是，在極少數(shù)情況下，當(dāng) JavaScrip 沒(méi)有啟用時(shí)，它依然存在于 HTML makup 中，如果必要，它允許你為這樣的訪(fǎng)問(wèn)者創(chuàng)建特殊的樣式規(guī)則。
</style><script src="js/modernizr.js"></script></head> 注： 如果你使用 Insert 面板或者Insert菜單，則 Dreamweaver 會(huì)添加 type="text/javascript" 到開(kāi)始的 <script> 標(biāo)簽中。 這在 HTML5 中不再要求，但是留著它并不會(huì)造成危害。
注：如果你的 Dreamweaver 版本沒(méi)有 Live Code（或者你正使用不同的 HTML 編輯器），那么你可以使用大多數(shù)新式瀏覽器提供的開(kāi)發(fā)工具或者 Firefox 瀏覽器提供的 Firebug 檢查生成的代碼。
如圖4所示， no-js 類(lèi)已經(jīng)被js類(lèi)替代，這表明 JavaScript 已經(jīng)啟用。
表1列舉了 Modernizr 使用的類(lèi)名稱(chēng)以表明對(duì) CSS3 的支持。 如果某個(gè)功能不支持，那么相應(yīng)類(lèi)的名稱(chēng)用no-作前綴。
表1. Modernizr 檢測(cè)的 CSS3 功能
CSS 功能 | Modernizr 類(lèi)（屬性） |
@font-face | fontface |
::before and ::after pseudo-elements | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
CSS animations | cssanimations |
CSS 2D transformations | csstransforms |
CSS 3D transformations | csstransforms3d |
CSS transitions | csstransitions |
flexible box layout | flexbox |
gradients | cssgradients |
hsla() | hsla |
multi-column layout | csscolumns |
multiple backgrounds | multiplebgs |
opacity | opacity |
reflection | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
無(wú)論在哪對(duì)特定的CSS屬性進(jìn)行測(cè)試，類(lèi)的名稱(chēng)和屬性名稱(chēng)都是一樣的，然而這要求去除任何連字號(hào)或是括號(hào)。 其它類(lèi)是按照它們參考的CSS3模塊而命名。
參見(jiàn)表1，你可以看到Modernizr使用boxshadow 和 csscolumns 分別表明了對(duì)box-shadow 屬性和多欄布局的支持。 因此，你可以使用no-boxshadow 和 no-csscolumns 類(lèi)為不支持這些功能的瀏覽器創(chuàng)建特殊的樣式規(guī)則。
為了保證指令簡(jiǎn)單，我將演示只有CSS 聲明的范例。 你可以直接地將它們鍵入到Code視圖中或者使用New CSS Rule對(duì)話(huà)框。
.no-boxshadow img創(chuàng)建一個(gè)新的descendant (compound) selector。 #8A8A8A）。 由此產(chǎn)生的樣式規(guī)則應(yīng)該如下所示：.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; } 這不像半透明的陰影那樣有吸引力，但是盡管如此，它仍然使得圖像能夠從背景中略微地突起。
.no-csscolumns img創(chuàng)建一個(gè)新的descendant selector。.no-csscolumns img { margin: 3px 8px 3px 0; float: left;} .columns img規(guī)則。兩個(gè)規(guī)則有著相同的特殊性，因此，如果它們順序顛倒，則.columns img 的10像素的左邊距可能會(huì)覆蓋你剛剛創(chuàng)建的新規(guī)則。你可以將.no-csscolumns img重命名為.no-csscolumns .columns img以便于給它更高的特殊性，但是最好是保證selector越簡(jiǎn)單越好。（順便說(shuō)一下，如果你不確定什么是特殊性，查閱Adrian Senior的文章，Understanding Specificity。它雖然發(fā)表時(shí)間很長(zhǎng)，但是很有價(jià)值。）
在這個(gè)的簡(jiǎn)單范例中，我只用了前綴為no-的類(lèi)就為舊版本的瀏覽器創(chuàng)建了特殊的樣式。 但是，按照它們的能力,你不同時(shí)使用這兩個(gè)類(lèi)（帶或不帶前綴）為瀏覽器創(chuàng)建不同的樣式是絕對(duì)沒(méi)有道理的。 例如：
.csscolumns { /* rules for browsers that support multi-column layout */}.no-csscolumns { /* rules for browsers that don't support multi-column layout */} 有時(shí)這種方法是合理的，例如，如果你想為每一級(jí)支持都創(chuàng)建一個(gè)完全不同的布局。 但是如果它僅僅是一個(gè)為舊版本瀏覽器提供可選擇的樣式的問(wèn)題，不要忘記，瀏覽器會(huì)忽略它們無(wú)法識(shí)別的屬性。 如果你對(duì)所有的樣式都使用 Modernizr 類(lèi)，那么在 JavaScript 禁用的瀏覽器中你的頁(yè)面將完全非樣式化。
Modernizr 為開(kāi)始的<html>標(biāo)簽添加的類(lèi)名稱(chēng)起著雙重目的作用。當(dāng)頁(yè)面加載時(shí)，它們也是 Modernizr 對(duì)象創(chuàng)建的 JavaScript 屬性的名稱(chēng)。表1列舉了與 CSS 有關(guān)的類(lèi)和屬性的名稱(chēng)。表2列舉了剩下的與 HTML5 和相關(guān)技術(shù)有關(guān)的類(lèi)和屬性，例如地理位置。
表2. Modernizr 檢測(cè)的與 HTML5 有關(guān)的功能
HTML5 有關(guān)功能 | Modernizr 類(lèi)（屬性） |
Application cache | applicationcache |
Audio | audio.type (ogg, mp3, wav, m4a) |
Canvas | canvas |
Canvas text | canvastext |
Drag and drop | draganddrop |
Form input attributes | input.attributeName |
Form input elements | inputtypes.elementName |
Geolocation | geolocation |
hashchange event | hashchange |
History management | history |
IndexedDB | indexeddb |
Inline SVG | inlinesvg |
Local storage | localstorage |
Messaging | postmessage |
Session storage | sessionstorage |
SMIL | smil |
SVG | svg |
SVG clip paths | svgclippaths |
Touch events | touch |
Video | video.type (ogg, webm, h264) |
WebGL | webgl |
Web sockets | websockets |
Web SQL database | websqldatabase |
Web workers | webworkers |
在大多數(shù)情況下，表1和表2列舉的所有屬性返回的都是 true 或者 false 。所以，你可以按照如下所示使用 JavaScript 對(duì)本地存儲(chǔ)進(jìn)行測(cè)試：
if (Modernizr.localstorage) { // script to run if local storage is supported} else { // script to run if local storage is not supported} 然而,就 audio 和 video 而言，返回值是一個(gè)字符串，它表明著瀏覽器能夠處理特定類(lèi)型的置信水平。 根據(jù) HTML5 規(guī)范，空的字符串表示該類(lèi)型不支持。 如果支持該類(lèi)型，那么返回值是“maybe”或是“probably”。 例如：
if (Modernizr.video.h264 == "") { // h264 is not supported} HTML5 添加了許多新的表單屬性，例如 autofocus，當(dāng)頁(yè)面第一次加載時(shí)它會(huì)自動(dòng)地將光標(biāo)放在某個(gè)指定的字段。 另一個(gè)有用的屬性是 required, 如果某個(gè)必需的字段留有空白，那么它將阻止HTML5兼容的瀏覽器提交表單（參見(jiàn)圖6）。
這很好，但是它會(huì)給你留下一個(gè)問(wèn)題：舊版本的瀏覽器該怎么辦？
一個(gè)解決方法是忽略它們，并留給服務(wù)器側(cè)的驗(yàn)證功能進(jìn)行最終的檢查。 如果瀏覽器無(wú)法識(shí)別 required 屬性，那么另外一個(gè)處理這種情況的用戶(hù)界面更為友好的方法是創(chuàng)建一個(gè)小小的腳本對(duì)必需字段進(jìn)行檢查。 如下的指令顯示了在Modernizr幫助下如何進(jìn)行相應(yīng)的操作。
</style><script src="js/modernizr.js"></script></head> <script> 塊，并且在頁(yè)面一加載完就創(chuàng)建一個(gè)事件處理程序以便于執(zhí)行代碼：<script src="js/modernizr.js"></script><script>window.onload = function() { // code to execute when page loads};</script></head autofocus 和 required 屬性的瀏覽器中模擬它們。處理autofocus 的方式很簡(jiǎn)單：window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it} 該條件測(cè)試了 Modernizr.input.autofocus，如果不支持 autofocus，那么返回的值是 false。 然而，邏輯運(yùn)算符NOT（一個(gè)感嘆號(hào)）卻能使意思顛倒，因此如果不支持 autofocus，那么該條件的求值結(jié)果為 true，并且 inputs[0].focus() 將光標(biāo)放在第一個(gè)輸入字段。
required，那么現(xiàn)在添加代碼以便于檢查必需字段。 事件處理程序的完整代碼如下所示：window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }} 新代碼產(chǎn)生了一個(gè)函數(shù)，當(dāng)提交表單時(shí)它能夠遍歷所有的輸入元素，以便于找到具有 required 屬性的字段。 當(dāng)它找到某個(gè)字段時(shí)，它會(huì)從值中除去開(kāi)頭和結(jié)尾的空白，并且如果結(jié)果是一個(gè)空的字符串，那么它會(huì)把結(jié)果添加到 required 數(shù)組中。 在所有的字段都已經(jīng)得到檢查后，如果數(shù)組中包含某些元素，那么瀏覽器會(huì)顯示一個(gè)與缺失字段名稱(chēng)有關(guān)的警告，并阻止提交表單。
注意： Safari 5.1 錯(cuò)誤地報(bào)告了它支持 required 屬性，所以它在沒(méi)有驗(yàn)證必需字段的情況下就提交了表單。 這是 Safari 的缺陷，然而在 Modernizr 里它是不存在的。
當(dāng)你準(zhǔn)備好對(duì)你的網(wǎng)站進(jìn)行部署時(shí)，推薦創(chuàng)建一個(gè) Modernizr 的自定義 production 版本，它只包含那些你實(shí)際需要的元素。 這可以按照你所選的功能將 Modernizr 庫(kù)的大小從 44KB 縮小到 2KB。當(dāng)前選項(xiàng)的范圍如圖8所示。
選項(xiàng)可以便捷地按照如下類(lèi)別進(jìn)行分組：CSS3、HTML5、Misc(ellaneous) 和 Extra。 單擊前三個(gè)標(biāo)題旁邊的 Toggle 按鈕可任意地選擇或者放棄選擇分類(lèi)中的所有復(fù)選框。
在默認(rèn)情形下，Extra 分類(lèi)將會(huì)選中如下三個(gè)條目：
如果你在 CSS3 分類(lèi)中選中任何選項(xiàng)，那么如下 Extra 分類(lèi)中的選項(xiàng)也會(huì)被選中：
Modernizr.testProp()Modernizr.testAllProps()Modernizr._domPrefixes()不要取消選擇這些選項(xiàng)。 這樣做將會(huì)自動(dòng)地取消你在 CSS3 分類(lèi)中已經(jīng)選擇的任何選項(xiàng)。
Extra 分類(lèi)中的MQ Polyfill (respond.js) 添加了一個(gè)腳本，它可以使IE 6-8中的 media queries 獲得有限的支持。當(dāng)你選中這個(gè)選項(xiàng)時(shí)，它會(huì)自動(dòng)地選中Media Queries 和 Modernizr.testStyles()。如需知道更多關(guān)于media queries polyfill (respond.js)的信息，請(qǐng)?jiān)L問(wèn)https://github.com/scottjehl/Respond。
只有高級(jí)用戶(hù)才會(huì)對(duì) Extra 分類(lèi)中的其它選項(xiàng)感興趣。關(guān)于它們是什么和如何使用它們的更多細(xì)節(jié)，參見(jiàn) Modernizr 文檔的擴(kuò)展性部分（Extensibility section of the Modernizr documentation）。
下面的說(shuō)明描述了如何為范例文件創(chuàng)建一個(gè) Modernizr 的自定義production版本。 后續(xù)的練習(xí)需要使用這一自定義版本，它將展示如何使用 Modernizr.load() 加載外部 JavaScript 文件。
當(dāng)創(chuàng)建Modernizr的自定義production版本時(shí)，在默認(rèn)情形下，必須選中包含 Modernizr.load() 的選項(xiàng)。 Modernizr.load() 是 yepnope() 的別名，它是與 Modernizr 同步開(kāi)發(fā)的獨(dú)立腳本加載器。 為了說(shuō)明如何使用它，我給出一個(gè)簡(jiǎn)單范例。我已經(jīng)將相應(yīng)的腳本從 required.html 移到了 check_required.js，并且做了三個(gè)微小的改動(dòng)以便于去除 Modernizr 測(cè)試以及將它賦值到一個(gè)名為 init 的變量中。 修訂的腳本如下所示：
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } };}; Modernizr.load() 的一個(gè)很大的優(yōu)點(diǎn)是，根據(jù)測(cè)試瀏覽器能力的結(jié)果，它可以有條件地加載腳本—這就是為什么起初叫它 yepnope() 的原因。 它可以異步地加載外部腳本—換句話(huà)說(shuō)，就是能夠在瀏覽器已加載 Document Object Model (DOM) 之后加載外部腳本—因此它可以有助于提升你的網(wǎng)站性能。
Modernizr.load() 的基本語(yǔ)法是將一個(gè)具有如下屬性的對(duì)象傳遞給它：
test: 你希望檢測(cè)的 Modernizr 屬性。 yep: 如果測(cè)試成功，你希望加載的腳本的位置。 使用一個(gè)多腳本數(shù)組。 nope: 如果測(cè)試失敗，你希望加載的腳本的位置。 使用一個(gè)多腳本數(shù)組。 complete: 外部腳本一經(jīng)加載就運(yùn)行的函數(shù)（可選）。 yep 和 nope 兩者都是可選的，只要你提供了其中一個(gè)即可。
為了在 check_required.js 中加載和執(zhí)行腳本，需要在 modernizr.adc.js 已附著到頁(yè)面之后添加如下<script> 塊（代碼位于required_load.html 中）：
<script>Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); }});</script> 這樣就與之前運(yùn)行的完全一致，但是卻可以降低已支持 required 屬性的瀏覽器的下載負(fù)荷。
為了測(cè)試多種條件，你可以給 Modernizr.load()傳遞一組對(duì)象。如需獲得更多細(xì)節(jié)信息，參見(jiàn) Modernizr 文檔上的Modernizr.load() 教程。
Modernizr 是一個(gè)強(qiáng)大而有用的工具，但是這并不意味著你就應(yīng)該使用它。 并不是在所有情形下均必須使用 Modernizr 給瀏覽器提供多種樣式。 如果你主要關(guān)注的對(duì)象是 Internet Explorer，那么考慮使用IE conditional comments。 你也可以使用CSS層疊覆蓋一些樣式。 例如，先使用hexadecimal color，然后使用 rgba() 或 hsla() 覆蓋它。 舊版本的瀏覽器會(huì)使用第一個(gè)值并且忽略第二個(gè)值。
Modernizr 真正地變成現(xiàn)實(shí)是當(dāng)它與 polyfills 和其它 JavaScript 相結(jié)合的時(shí)候。但是記住，通常很容易創(chuàng)建屬于你自己的適合支持功能的測(cè)試。例如，下面就是你測(cè)試某個(gè)瀏覽器是否支持 required 屬性的全部代碼（代碼位于required_nomodernizr.html 中）：
var elem = document.createElement('input');if (typeof elem.required != 'boolean') { // required is not supported} 本教程已經(jīng)涵蓋了 Modernizr 的所有主要功能 如需了解關(guān)于這些功能的更多信息，請(qǐng)查閱相應(yīng)的官方文檔，其網(wǎng)站地址為 http://www.modernizr.com/docs/。 此外，你還可以找到下列有用資源：
yepnope()的深入討論，它已經(jīng)在 Modernizr 中被合并為Modernizr.load()。+
本產(chǎn)品經(jīng) Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 許可。Adobe 提供超出該許可范圍、與本產(chǎn)品包含的代碼示例相關(guān)的權(quán)限。
聯(lián)系客服
