Modernizr與邊界半徑，媒體查詢等

我最近看了Modernizr，並已閱讀文檔，但有幾件事似乎有點不清楚給我。從閱讀文檔看來，Modernizr主要用於檢測瀏覽器中是否有某些東西可用，例如邊界半徑，媒體查詢等。它是否修復了這些問題以便在舊瀏覽器上按預期呈現？Modernizr與邊界半徑，媒體查詢等

我在有關Polyfills的文檔中閱讀過，但我不確定如何實現這些功能，以便在不支持它們的瀏覽器上向圓角添加圓角。

此外，Modernizr可以用於允許媒體查詢在舊版瀏覽器中工作，或者它只是一種檢測媒體查詢是否可以使用的方法。

如果它只是一個檢測工具，那爲什麼它如此有用？我已經知道，例如，我不能在舊版本的Internet Explorer上使用媒體查詢或border-radius。如果它不僅僅是一個檢測工具，那我該如何使用它在舊版瀏覽器中添加更新的功能？

來源

2013-04-29 Peter Featherstone

這可能是per haps help：http：// stackoverflow。com/questions/8089984/modernizr-how-to-do-border-radius？rq = 1 – zik 2013-04-29 13:40:23

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

來源

2013-04-29 14:16:25

我是否需要做任何額外的事情才能讓HTML5元素在IE中變得可以風格化，例如：'

只要確保在下載Modernizer時勾選html5shiv框，它將被照顧。 – 2013-04-29 14:26:35

我想我的問題是，如果它只是一個檢測工具，那麼爲什麼它如此有用？我已經知道，例如，我不能在舊版Internet Explorer上使用媒體查詢或border-radius。

是的，它是一種檢測工具。 Modernizr的目的是功能嗅探而不是瀏覽器嗅探。你提到你已經知道IE的能力。忘記IE /特定瀏覽器以及他們可以做什麼。 Modernizr可幫助您確定某個功能是否可用，然後輕鬆編寫用於回退的CSS/JS用例。

來源

2013-04-29 13:41:59 sd7syfsk

感謝您的回答Rach，例如您只會在需要圓角的瀏覽器上包含css3pie？你有一個代碼示例來說明如何實現這個特定的實例嗎？ – 2013-04-29 13:55:33

Modernizr將class' borderradius'添加到您的HTML主體中，因此您可以使用CSS3定位borderradius類，並且只添加css3pie行爲：url（path/to/pie_files/PIE.htc）;'不帶'.borderradius'的聲明。對於類名稱，請參閱[文檔]（http://modernizr.com/docs/） – sd7syfsk 2013-04-29 14:02:35

好的，謝謝Rach，還有我承諾的最後一個問題，我是否需要做額外的事情來讓HTML5元素在IE中可以風格化，例如 - '

Modernizr與邊界半徑，媒體查詢等

回答

相關問題