溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Modernizr是一個用來檢測的下一代Web技術，主要是指HTML5和CSS3的特性在原生支持的可用性一個小的JavaScript類庫。其中大部分的特性已經在至少一種主流的瀏覽器中得到支持（其中大多數是在兩個或更多個）。Modernizr是什么，很簡單，就是告訴你當前瀏覽器是否原生的支持某個特性。
不像傳統的——最不靠譜的“瀏覽器嗅探”，那樣檢測一個瀏覽器依據用戶可配置的navigator.userAgent屬性；Modernizr實際上的特性檢測可以可靠的識別不同瀏覽器可以做什么，不能做什么。總之，相同的渲染引擎不一定支持相同的東西；而且，一些用戶通過更改用戶代理字符串來繞過一些不然他們通過的不發達的網站。
Modernizr旨在結束UA嗅探技術的做法；采用特征檢測是一種比較可靠的方式來確認你可以在當前的瀏覽器中能做什么，不能做什么。總之，Modernizr通過許多方式可以方便你：
（1） 能在幾毫秒內，測試40幾種下一代特征；
（2） 它創建了一個javascript對象(名字叫Modernizr);這個對象包含了這些測試結果作為布爾屬性；
（3） 給HTML元素增加了一個樣式類，這個類說明瀏覽器原生支持和不支持的特性；
（4） 提供了一個腳本加載器，可以通過polyfills這種方式在舊的瀏覽器中實現一些功能。
有個這些Modernizr給你的知識，你可以充分利用這些新功能；你可以在在瀏覽器中呈現和使用他們，而且，提供了一種簡單，可靠的方式來控制瀏覽器不支持的場景。
安裝Modernizr
前往下載頁面，并選擇你準備在你的項目中使用的特性；通過這種方式，我們可以提供給你，你需要的最小比特的代碼；打包生成，然后你就有了你自定義構建的Modernizr。如果你也不知道你將會用到那些特性；最好獲取包含所有，但是沒有解壓的開發版本。
將Modernizr放在放在你的html頁面的head標簽內的script標簽中；為了獲得最佳的性能；你應當將他們放在樣式表引用的后面；我們建議把Modernizr放在頭部有2個原因：html5shiv（想知道html5shiv請猛戳這里）（使IE瀏覽器中的HTML5元素）必須在<body>之前執行，同時，如果你使用了任何Modernizr添加的CSS類，你也要防止FOUC（瀏覽器樣式閃爍）。（想知道FOUC請猛戳這里）
注：如果你不支持IE8，你就不必擔心FOUC，隨意放在包含Modernizr的地方。
Polyfills and Modernizr
這個Modernizr名字，可能會引起你兩秒鐘的思考，我們承認；這個類庫容許你使用心得HTM5片段在IE中；但除此之外，它并沒有其他任何現代化的其他功能。這個Modernizr名字實際上起源于我們現代化開發（和我們自己）的目標。但是，Modernizr還是很好的和腳本相結合，對瀏覽器原生不支持的情況提供了支持；通常，這些腳本叫做polyfills。（想知道什么是polyfills請猛戳這里）。
“polyfill（N）：可復制的標準API，用于舊版本瀏覽器JavaScript的墊片”
所以，一個WebSocket的polyfill將創建一個相同屬性和方法的全局window.WebSocket作為一個原生的實現。這意味著你可以開發面向未來的我真正API，并且只加載你的兼容性的polyfill在不支持該API和特性的瀏覽器上。
有個好消息告訴你，這里有一個Modernizr可以檢測的集合所有的HTM5特性的polyfill。在大多數情況下，你可以使用HTM5，CSS3特性，并且能夠可復制它在不支持的瀏覽器上；所以，你不僅可以在今天使用HTML5；同時，你也可以在過去使用它。
這產生了一個很中肯的警告：只因為你可以使用并不意味著你應該。要提供最佳的用戶體驗，意味著它必須快；為了IE7加載5中兼容性的腳本，使它外觀，行為和Chrome和Opera完全相同是不是一個明智的選擇。這里沒有硬性規定，但是要記住的是，加載更多的腳本會影響用戶的體驗。要記住，沒有一個用戶會在多個瀏覽器中查看你的網站；所以，如果你的外觀和行為不一致；這不要緊的。
現在，更多關于如何有效地使用和服務polyfills針對所有你的不同的用戶，往下閱讀...
Modernizr.load教程
Modernizr.load是專門用了與modernizr并行工作的一個資源加載器（主要是加載CSS和js）;當然，這是一個可選的，在你構建的時候；單如果你要加載polyfills，這將是個好的機遇；因為它可以為你節省一些寬帶，也可以挺高一點性能。
Modernizr.load語法很容易理解；下面，我們先從一個簡單的例子開始。
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});在這個例子中，我們想要根據本地主機的瀏覽器是否支持地理位置來加載不同的腳本。通過這種方式，用戶的瀏覽器不必下載并不需要的代碼；節省了流量；也提高了，頁面的性能；同時，提供了一個清晰明了的片段來構建一個健壯的polyfills的抽象（比如：geo.js和geo-polyfill.js似乎看起來和應用程序的其他部分相同，即使它們的實現方式不同）。
如果你不是非常不滿意你的腳本現在的下載速度，那說明你運氣好；但是，你將會很高興的知道，Modernizr.load不會減慢任何東西；同時，有可能通過提供一個異步和并聯加載腳本的方式提高一些性能。有很多的指標來衡量性能，所以我們建議大家嘗試一些東西，以確保在具體情況下，你可以得到最大的性能。
Modernizr.load是小而簡單，但它可以為你做不少繁重的工作。下面是使用Modernizr.load當你的腳本依賴于多個Modernizr的功能測試一個稍微復雜的例子。一個很好的技術是將多個polyfill腳本包成一個單一的'oldbrowser'類型的腳本，這樣你就不會結束一次加載了太多的腳本。下面是如何可能的工作：
// Give Modernizr.load a string, an object, or an array of strings and objectsModernizr.load([ // Presentational polyfills
{ // Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients, // Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
}, // Functional polyfills
{ // This just has to be truthy
test : Modernizr.websockets && window.JSON, // socket-io.js and json2.js
nope : 'functional-polyfills.js', // You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () { // Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
}, // Run your analytics after you've already kicked off all the rest
// of your app.
'post-analytics.js'
]);你可以用Modernizr.load做很多事情；它被單獨發布了，叫yepnope.js；但是，它的中心思想還是和modernizr做特性檢測。你可以在yepnopejs.com上查閱Modernizr.load相關的完整的文檔。
Modernizr.load有一個很酷的功能，它實現了加載和執行腳本的完全解耦。這也許沒有多大的意義給你，但HTML5的樣板用戶可能熟悉的jQuery備用的谷歌CDN副本。它看起來是這樣的：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>它的工作原理是，嘗試在腳本加載后，立即測試；看一看jQuery對象是否可用；如果不可用，將會加載本地的jQuery副本備用；這通常在腳本加載器中不容易實現；但是Modernizr.load已經得到想到了這一點；你可以使用相同的邏輯，同時，Modernizr將為你處理執行的順序。
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
{ // This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);需要注意的是：僅能使用此方法作為一個應急的備份方案；因為這會迫使腳本串行加載，而不是并行；從而影響性能。
Modernizr.load是可擴展的也很好。你可以加載自己的前綴和過濾器腳本。有關更多先進的信息，你可以檢查出的yepnopejs.com主頁上的文檔。你甚至可以去盡可能更換加載過程的整個步驟，并將它們與定制邏輯取代。所以開始使用它，節省那些珍貴，珍貴的字節。
經過大量的測試，Modernizr通過創建一個元素，在該元素設置特定的樣式說明，然后立刻獲取這個特定樣式的方式來展現它神奇的魔力。如果瀏覽器可以解析或支持那些說明，將返回一些合理的信息；如果不能解析或者不支持，將不返回，或者返回undefined;
在開發文檔中的許多測試，都將有一段小代碼實例告訴你，如何使用特性檢測在你的web開發工作流程。實際上，這些案例可以有很多很多的變種；雖然，你想象的Modernizr可能的運用是有限的。
如果你對Modernizr是如何工作的詳細細節很感興趣，那就閱讀modernizr.js的源碼，以及各種特性檢測，并到GitHub深入了解這個項目。
Modernizr像一個環一樣貫穿于js中，確保HTML5相關的元素是否可以在IE瀏覽器中呈現出來；請注意，這并不意味著它可以突然讓IE瀏覽器支持audio或者video元素;它只是意味著你可以使用section來替代div，以及在css中定義樣式。你可能想要設置很多元素的display屬性為:block；閱讀以下HTML5樣式CCS的相關例子；如，Modernizr1.5版本，它的腳本等同于在流行的html5shim/htmlshiv庫中可以用什么；同時，還還可以檢測在IE6-8瀏覽器中的HTML5的支持情況；；你可以想嘗試一些它的性能損失，除非你的CCS樣式超過100KB。
我們支持IE6+,Firefox3.5+，Opera9.6+,safari2+,chrome。在移動端，我們支持iOS移動平臺的Safari，Android移動平臺的WebKit瀏覽器；Opera移動，Firefox移動等；同時，我還在做更多的測試，我們相信我們會支持Blackverry6+。
css特性
靈活的flexboxhe盒模型提供了一種不同的方式定位元素；解決了一些基于浮動布局的缺點。
在大多數情況下，你不需要使用GRBA和HSLA類，瀏覽器可以做到優雅降級。
.my_container { /* no .hsla use necessary! */
background-color: #ccc; /* light grey fallback */
background-color: hsla(0, 0%, 100%, .5); /* white with alpha */
}
在這個測試中FireFox出現誤報，但目前還沒有已知修復了這一點。 所有的IE，包括IE9，不支持text-shadow；因此很抱歉。
.glowy { /* ghosted letters */
color: transparent;
text-shadow: 0 0 10px black;
}
.no-textshadow {
color: black;
}
Android的2.1-3會通過這個測試，但只支持動畫這一個屬性。安卓4+行為與預期相同。
WebKit有一個誤報，會導致不必要的下載背景圖像的資源；這有一個最佳的途徑，即通過CSS漸變的方式來實現combo'ing背景圖像，所以，每個人都將得到正確的經驗，不需要開銷額外的HTTP。
.no-js .glossy,
.no-cssgradients .glossy {
background: url("p_w_picpaths/glossybutton.png");
}
.cssgradients .glossy {
background-p_w_picpath: linear-gradient(top, #555, #333);
}
Transitions通常可以不依賴與Modernizr特定的CSS樣式類或者javaScript屬性；但，對于你想要你的網站的部分外觀或者行為不同，他們倒是可以派上用場。一個很好的例子是構建動畫引擎中使用Modernizr。這樣的引擎使用了瀏覽器中的原生CSS的Transitions；并且在瀏覽器中不依賴與javascript動畫。
Isotope使用Modernizr特性檢測來使用transitions和transforms ，從而實現全硬件加速；如果不可行，就會優雅降級，使用jQuery的動畫。
HTML5特性
如果audio檢測通過，Modernizr還將評定那些格式的音頻可以在當前瀏覽器中播放；目前，Modernizr測試了ogg,mp3,wav和m4a。
重要：這些屬性的值不是布爾型的；而是，Modernizr這個對象匹配HTML5規范通過返回一個字符串代表×××可以處理的瀏覽器的級別。這些返回的是一個空字符串，可能或者是沒有響應的時候；空字符串是false，換句話說就是：
Modernizr.audio.ogg == '' and '' == false
var audio = new Audio(); audio.src = Modernizr.audio.ogg ? 'background.ogg' : Modernizr.audio.mp3 ? 'background.mp3' : 'background.m4a'; audio.play();
Kroc Camen使用了少量js的方式，結合HTML5video;并通過優雅降級的方式支持所有瀏覽器。通過Modernizr的的Video 檢測，您可以使用CSS和JavaScript的造型，進一步提升外觀和/或交互，當瀏覽器不支持Video。
如果Video檢測通過，Modernizr還將評定那些格式的視頻可以在當前瀏覽器中播放；目前，Modernizr測試了OGG，WEBM和H264。
當然，閱讀上面的重要注意事項部分，同樣返回使用的video格式。
Input Attributes 屬性
HTML5給表單元素引入了許多新的屬性；Modernizr包含了這些測試：autocomplete, autofocus, list, placeholder, max, min, multiple,pattern, required, step.
這些新的特性可以做很多事情，諸如，autocomplete, 在頁面加載后模塊elem.focus，以及表單字段的tips提示,客戶端表單驗證。
Input Types 類型
HTML5引入了13個新的input的type值，他們分別是：search, tel, url, email, datetime, date, month, week, time,datetime-local, number, range, color.
這些屬性可以使用原生的datepickers,colorpickers, URL validation等等。如果一個瀏覽器不支持給定的類型，他會呈現為你一個文本字段。Modernizr無法檢測創建了日期選擇器的type為日期的input；還有顏色選擇器等等。它檢測都的值是基于規范過濾的值；在WebKit中，我們已經確認，過濾器不會在沒有UI部件的地方添加。
其他
該Modernizr.touch測試僅指示瀏覽器是否支持觸摸事件，這不一定值觸摸屏設備。例如，Palm Pre的/ WebOS的（觸摸）手機不支持觸摸事件，因而不能這個測試。此外，chrome使用偽裝了實現支持；但這個bug已經不糾正。 Modernizr也通過媒體特性多點觸控的支持，如火狐4公開，對于Windows 7的平板電腦的支持。
if (Modernizr.webgl){
loadAllWebGLScripts(); // webgl assets can easily be > 300k} else {
var msg = 'With a different browser you’ll get to see the WebGL experience here: \ get.webgl.org.';
document.getElementById( '#notice' ).innerHTML = msg;
}附加現有測試通過的插件
除了在Modernizr的“核心”的測試，其他的許多常見的測試可作為插件的Modernizr在GitHub庫的/功能檢測/文件夾。如果你沒有在這個頁面上找到你要找測試，可以提問跟蹤。
Modernizr Methods
這有一些可用的方法，給你一些額外的功能。如果你做了很多CSS3和響應式設計的你可能會喜歡。
Modernizr.prefixed()
1.檢測CSS的前綴
Modernizr.prefixed()方法返回您輸入的前綴或非前綴屬性名稱的變體
Modernizr.prefixed('boxSizing')// 'MozBoxSizing'屬性必須是DOM風格的駝峰形式，而不是像這樣box-sizing
當然，返回值也是駝峰形式；如果你想要轉換成復姓風格，可以使用：
str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');當然你也可以像這樣：
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser
'MozTransition' : 'transitionend', // only for FF < 15
'transition' : 'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];// ... bind to the transEndEventName event...2.檢測DOM的前綴
Modernizr. prefixed(str, obj [, scope] )
您可以像下面這樣使用Modernizr.prefixed，找到對應的DOM屬性和方法。
Modernizr.prefixed('requestAnimationFrame', window) // fn第二個參數，用于聲明在那個對象上查找方法和屬性。如果他發現了屬性或者方法；但是不是一個函數，那么他會返回對象，布爾型，整型或者值；例如，下面這樣：
Modernizr.prefixed('StorageInfo', window) // object.如果找到一個函數，它會返回一個綁定功能。默認情況下，功能將被綁定到第二個參數。但是你可以通過聲明第三個參數，它應該被綁定到改變這種狀況。
// basic useModernizr.prefixed('requestAnimationFrame', window) // fn// creating a rAF polyfillwindow.rAF = Modernizr.prefixed('requestAnimationFrame', window) || function(){ ... // passing a scopevar ms = Modernizr.prefixed("matchesSelector", HTMLElement.prototype, document.body)
ms('body') // true最后，如果你要搜索一個DOM的特性，只希望返回它的名字，可以這樣做：傳遞false作為第三個參數：
Modernizr.prefixed('requestAnimationFrame', window, false) // 'webkitRequestAnimationFrame'如果您想了解更多，請閱讀我們的GitHub上相關的特性。此外，我們實現了在Modernizr的2.5默認情況下Function.prototype.bind polyfill；支持此功能，所以，歡迎您使用它在你的應用程序代碼。
可擴展性
在Modernizr的的核心檢測可能無法覆蓋所有的情況下，更是有一整套的API供您在Modernizr中插入自己的功能檢測。此外，新的檢測接口收錄已經在/feature-detects/f/文件夾，并在維基收集了。
addTest() Plugin API
Modernizr.addTest(str, fn)
Modernizr.addTest(str, bool)
Modernizr.addTest({str: fn, str2: fn2})
Modernizr.addTest({str: bool, str2: fn})您可能希望測試Modernizr的目前不支持其他功能。對于這一點，你可以使用addTest功能。例如，一些用戶曾要求測試IE的浮動doublemargin錯誤，并支持位置：固定的。在GitHub的所有可用的，我們已經編撰了當前的測試。使用addTest，您可以添加這些自己，得到確切的相同的API完全支持測試。
// Test for <track> element supportModernizr.addTest('track', function(){
var video = document.createElement('video');
return typeof video.addTextTrack === 'function'
});假設上述測試通過，現在將有HTML元素上.track類Modernizr.track將是真實的。IE6，當然，將現在沒有track類。
注：我們建議使用測試名稱沒有破折號。這是為了避免一個場景，其中用戶將通過別扭語法訪問屬性。
Modernizr.testStyles(str,fn[, nodes, testnames])
Modernizr.testStyles()允許您自定義樣式添加到文檔中，然后檢驗的元素。一個id為“Modernizr”的元素插入到頁面。
Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule){
Modernizr.addTest('width', elem.offsetWidth == 9);
});當不是單一的時候，你可以這樣
Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule){
Modernizr.addTest('width', elem.offsetWidth == 9);
}, 2, ["video", "p_w_picpath"]);Modernizr.testProp(str)
Modernizr.testProp()檢測一個給定的樣式屬性是否被支持。請注意，屬性名
必須在駝峰變體來提供。
Modernizr.testAllProps('boxSizing') // trueModernizr.hasEvent()檢測支持一個給定的事件，第二個參數接受，一個可選的元素來測試
Modernizr._prefixes Modernizr._domPrefixes
供應商前綴，你就必須要測試的。看Modernizr的源碼或以下，看看如何有效地join()數組中，以測試你的風格屬性。
Modernizr._prefixes.join('prop' + ':value; ');/* prop:value; -webkit-prop:value; -moz-prop:value;
-o-prop:value; -ms-prop:value; -khtml-prop:value; */'prop:' + Modernizr._prefixes.join('value; prop:') + 'blah';/* prop:value; prop:-webkit-value; prop:-moz-value;
prop:-o-value; prop:-ms-value; prop:-khtml-value; prop:blah; */'prop:value; ' + Modernizr._domPrefixes.join('Prop' + ':value; ') + ':value';/* prop:value; WebkitProp:value; MozProp:value;
OProp:value; msProp:value; Khtml:value */免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
