使用Modernizr來填充CSS轉換

我將modernizr js安裝爲HTML5 Boilerplate的一部分，但我不知道如何使用它。我創建了一個帶有一些轉換的CSS3導航。我知道IE不支持它們，但據我所知，Modernizr可以使用js進行填充。是對的嗎？我怎麼做？我不太瞭解js。使用Modernizr來填充CSS轉換

my jsfiddle

來源

2012-08-14 imakeitpretty

如果您不太瞭解js，正如您所說，那麼評估Modernizr解決方案或由Addy Osmani提出的解決方案的基礎是什麼？我知道這並不能幫助你解決眼前的問題，但網絡上的一個（更大的）問題是大量的潛在專家和博主急於協助，但沒有提供最好的建議。如果可能的話，讓你的應用程序可以降級，以便在沒有轉換的情況下運行良好。 – Garrett 2012-09-13 23:51:44

我不知道Addy Odmani是誰。基本上，我只是混淆了它，隨着我的學習。它工作正常，沒有過渡。它只是不那麼漂亮。我希望有一個JS解決方案，使其在css轉換不起作用時變得更漂亮。 – imakeitpretty 2012-09-15 14:38:59

當然，這是可能的。好的解決方案並不容易，壞的解決方案非常複雜 - 比如Modernizr，jQuery和其他博客。 – Garrett 2012-09-18 05:40:25

您需要添加yepnope腳本來檢查，如果CSS3過渡支持與否。例如像這樣：

yepnope({ 
    test : Modernizr.transition, 
    yep : '', 
    nope : ['polyfillfortransition.js'] 
});

更新

其實，如果你使用jQuery，有此插件。你不需要執行上面的代碼。 Addy Osmani的這篇文章會更好地解釋它http://addyosmani.com/blog/css3transitions-jquery/。在那篇文章中他還解釋了yepnope的使用。

來源

2012-08-14 02:51:06 Zendy

我把這個放在哪裏？我真的很陌生。我把這個放在HTML裏的'

Modernizr不提供任何CSS3功能的polyfills。它提供了一個簡單的polyfill，可以在舊版瀏覽器中對HTML5元素進行樣式設置。除此之外，它主要用於通過將類名添加到頁面的html標記來檢測功能。

所以在你的CSS，你可以這樣做

.borderradius .mydiv { 
    border-radius: 8px; 
}

如果你的瀏覽器支持它...或者你可以在你的JS使用它近代化將增加的.borderradius類名到網頁的HTML標籤選擇性地回退到插件等。

來源

2012-08-14 03:23:54

相關問題

使用Modernizr來填充CSS轉換

回答

相關問題