Modernizr＆html新功能和樣式

我從來沒有使用過Modernizr。所以看了一篇文章，發現一些帶有前綴字的cssModernizr＆html新功能和樣式

.no-cssgradient.how the below style will be applied. 

.no-js .glossy, 
.no-cssgradients .glossy { 
    background: url("glossybutton.png"); 
} 

.cssgradients .glossy { 
    background-image: linear-gradient(top, #555, #333); 
}

上面的樣式是什麼意思....它是如何工作的？

4）如何自動應用樣式？

/* In your CSS: */ 
.no-audio #music { 
    display: none; /* Don't show Audio options */ 
} 
.audio #music button { 
    /* Style the Play and Pause buttons nicely */ 
} 

<!-- In your HTML: --> 
<div id="music"> 
    <audio> 
     <source src="audio.ogg" /> 
     <source src="audio.mp3" /> 
    </audio> 
    <button id="play">Play</button> 
    <button id="pause">Pause</button> 
</div>

我得到了網站的代碼片段。類名如.no-cssgradients或.no-audio如何使用這些樣式將如何應用？

請詳細說明一下我的例子。謝謝

來源

2013-07-08 Thomas

Modernizr是一個JavaScript庫，用於檢測用戶瀏覽器中的HTML5和CSS3功能。

從http://modernizr.com/

它基本上檢測功能是什麼您當前的瀏覽器支持，或者是它不支持，然後你可以用這些class名稱相應風格的頁面。

例如 - 如果您的瀏覽器支持HTML5和音頻標籤，則可以顯示它。如果瀏覽器不支持音頻標籤，您可以使用.no-audio - 並隱藏播放器，或爲舊版瀏覽器提供後備選項。

如果您使用Firebug或同等調試器調試Modernizr站點，您可以看到它會自動將類添加到HTML標記。

所以，你可能會得到類似以下內容添加到html標籤，爲classes：

js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns

所以，你知道瀏覽器支持這些功能。

如果您想以不同的方式對網站進行樣式設置，並且關閉了Javascript，則它也可能很有用。

來源

2013-07-08 15:24:34

Modernizr＆html新功能和樣式

回答

相關問題