Modernizer使用JavaScript在頁面加載時將一堆類添加到頁面的HTML元素。 例如
<HTML class="backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg">
這些類描述HTML5/CSS3功能是否可用於在瀏覽器中查看頁面。
如果瀏覽器可以處理它們(漸進增強),這允許您通過僅應用CSS3樣式來使用更高效的CSS。
E.g.
.no-audio .music-player {
display: none
}
.audio .music-player {
/* styles for music player */
}
另外Modernizer讓你測試這些元素是否可用它的JavaScript API。 這對於爲舊版瀏覽器(polyfills)提供回退很有用。因此,對於圓角 你可以這樣做:
Modernizr.load({
test: Modernizr.borderradius,
yep : /* do nothing */
nope: 'borderradius.js' /* css3 pie for example */
});
或交替:
if (Modernizr.borderradius) {
// do nothing
}else{
/* script for making rounded corners e.g css3 pie */
}
還是在CSS只有我們borderradius(如果可用):
.box {
border: 1px solid #000; /* all browsers, no rounded corners */
}
.borderradius .box{
border-radius: 15px; /* only CSS3 compliant browsers get this style */
}
老年媒體查詢(IE < 9)瀏覽器需要另一個插件,例如repond.js
這可能是per haps help:http:// stackoverflow。com/questions/8089984/modernizr-how-to-do-border-radius?rq = 1 – zik 2013-04-29 13:40:23