首頁>網頁設計教程>HTML教程

說說Modernizr的幾點使用方法

作者：Eve Cole 更新時間：2025-08-23 02:32:01

關於Modernizr的中文介紹已經有很多了，可以通過百度或者谷哥搜索一下。也可以去藍色理想上看一看，這篇相對較全面:Modernizr-為HTML5和CSS3而生;

Modernizr除了為HTML5和CSS3提供基礎環境判定、語義支持外，還有哪些用途呢?今天一起來學一學。

一、從應用Modernizr開始

這部分在Modernizr-為HTML5和CSS3而生一文中有詳細的講解，包括Modernizr運行後HTML元素的變化等，建議新同學可以仔細閱讀閱讀。

也可以直接至官方網站http://modernizr.com/docs/進一步了解。

二、Modernizr.load的使用

1、載入jquery

先來看看官網上關於載入jquery的方法與代碼：

  1. Modernizr.load([{
  2. load:'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
  3. complete:function(){
  4. if(!window.jQuery){
  5. Modernizr.load('js/libs/jquery-1.7.1.min.js');
  6. }
  7. }
  8. }]);

這段代碼經實際測試使用發現，如果無法正常訪問google提供的cdn時，瀏覽器會報錯，信息為

  1. GEThttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404(NotFound)
  2. modernizr.custom.js:4ResourceinterpretedasImagebuttransferredwithMIMEtypeapplication/x-javascript:js/libs/jquery-1.7.1.min.js.

由反饋的信息可以看出，Modernizr在重新載入本地jQuery時所解析的文件格式存在錯誤，我不知道是不是都會遇到這樣的情況，但這的確影響了使用。在所有中文搜索結果中，沒能發現針對這一現象的說明或研究，個人能力有限，所以也沒法深究。只是從stackoverflow得到了暫時的解決方法，代碼如下：

  1. <scripttype=text/javascript>//<![CDATA[
  2. Modernizr.load([{
  3. load:'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
  4. complete:function(){
  5. if(!window.jQuery){
  6. Modernizr.load([{
  7. load:'js/jquery.min.js',
  8. callback:function(url,result,key){
  9. //console.log('jqueryonlocalwasloaded!');
  10. init();
  11. }
  12. }]);
  13. }else{
  14. //console.log('jqueryongooglewasloaded!');
  15. init();
  16. }
  17. }
  18. }]);
  19. functioninit(){
  20. jQuery(document).ready(function(){
  21. $('body').prepend('helloworld!');
  22. });
  23. }
  24. //]]></script>

2、針對低版本IE截入PNG圖支持

在yepnopejs的文檔說明中，有一節關於ie! Prefix的插件使用介紹。

大多數時候我們在做前端界面兼容的時候，不得不考慮IE不同版本的細節調整，雖然現在高調強調拋棄IE6，但仍有大多數客戶端在使用著這個版本。為了能保證界面的一致性，我們通常能看到下列格式的代碼：

  1. <!--[ifltIE7]><htmlclass=ie6><![endif]-->
  2. <!--[ifIE7]><htmlclass=ie7><![endif]-->
  3. <!--[ifIE8]><htmlclass=ie8><![endif]-->
  4. <!--[ifIE9]><htmlclass=ie9><![endif]-->
  5. <!--[if(gtIE9)|!(IE)]><!--><!--<![endif]-->

這是html中允許的過濾篩選的條件格式語句，通過篩選，我們可以達到針對不同版本的IE進行一些css hacks。這部分內容可以至paulirish.com進一步閱讀與學習。

png圖透明的解決方案，有很多很多種，這裡針對如何通過modernizr引入解決png透明的js代碼段，進行一些嘗試，具體代碼如下：

  1. <scripttype=text/javascript>//<![CDATA[
  2. Modernizr.load([
  3. {
  4. load:'js/yepnope.ie_prefix.js',//載入yepnope的ie!prefix的插件
  5. complete:function(){
  6. yepnope([{
  7. load:'ielt8!js/ie_png.js',//插件正常載入後才能進行篩選(針對低於IE8版本載入ie_png.js)
  8. complete:function(){
  9. ie_png.fix('img');
  10. }
  11. }]);
  12. }
  13. }
  14. ]);
  15. //]]></script>

這是個有意思的嘗試。

3、判斷瀏覽器對css3或html5的支持

這部分是modernizr的基本特性，利用這些基本特性，我們不僅可以進行css3或html5的新功能嘗試，而且可以保證在不支持的環境下給出友好的提示。看看以下代碼：

  1. <scripttype=text/javascript>//<![CDATA[
  3. Modernizr.load({
  4. test:Modernizr.csstransforms3d&#038;&Modernizr.csstransitions,//判斷當前客戶端是否支持3維變型和漸變過渡
  5. yep:['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],//如若支持，載入相關js
  6. nope:'css/fallback.css',//否則載入用於友情提醒的相關樣式
  7. callback:function(url,result,key){//回調內容
  9. if(url==='js/jquery.hoverfold.js'){//如果最後載入的js文件路徑一致，則應用
  10. $('#grid').hoverfold();
  11. }
  13. }
  14. });
  16. //]]></script>

這段代碼截自《3D Thumbnail Hover Effects》中演示文檔裡的一段。通過分析和體驗作者製作的教程，我們不僅可以學習到一些關於modernizr的使用，而且還能體驗到css3的一些強大而又炫麗的效果。

以上內容整理得還很粗糙，用意是想以此來學習和了解Modernizr(YepNope)的特性和使用方法，同時也要增強對css3和html5的學習與重視。

全文完。

相關文章