使用Modernizr庫，爲什麼它會將類添加到html標記

任何人都可以解釋（因爲github頁面沒有）爲什麼Modernizr感覺需要將所有這些類名添加到HTML標記中？加載Modernizr後，它看起來像這樣：使用Modernizr庫，爲什麼它會將類添加到html標記

<!doctype html> 
<html class=" js flexbox canvas canvastext webgl ~~~~ etc etc

我看不出任何解釋爲什麼它想這樣做。 Modernizr提供的屬性讓我知道是否支持畫布（Modernizr.canvas == true？）。這些HTML類名是否被添加用於比這更容易的測試？

來源

2012-12-17 Dee2000

這些類名是爲了在您的CSS代碼中使用的，因此您可以添加備用樣式以防某些功能不受支持。來自modernizr文檔頁面的示例：

/* Simulated box shadow using borders: */ 
.box { 
    border-bottom: 1px solid #666; 
    border-right: 1px solid #777; 
} 
.boxshadow div.box { 
    border: none; 
    -webkit-box-shadow: #666 1px 1px 1px; 
     -moz-box-shadow: #666 1px 1px 1px; 
      box-shadow: #666 1px 1px 1px; 
}

來源

2012-12-17 13:38:25 pawel

看起來我必須學習CSS。我認爲我一直對風格屬性有足夠的瞭解，但這似乎是一些先進的東西。 – Dee2000

我看到有人投了這個答案。我想這意味着它是答案。即使我不明白如何/爲什麼是答案，我會點擊打勾來標記答案:) – Dee2000

@ Dee2000，我投了票，因爲它是有道理的。在這個例子中，假設你的瀏覽器不支持陰影; .boxshadow div.box「should」永遠不會被定位，因此，.box被用作後備 – series0ne

我可能是錯的（如果我是的話請糾正我），這裏的類指出了Modernizr檢測到的特性（或者確實不支持）在給定的瀏覽器中。

看看這裏的文檔：http://modernizr.com/docs/

拿這個例子：

<html class="no-js">

如果JavaScript被禁用，則Modernizr的不能運行，因此類將保持"no-js"但如果啓用JavaScript ，Modernizr將用"js"替代"no-js"，同樣會告訴你還有哪些其他功能支持

來源

2012-12-17 13:21:16 series0ne

我會忽略「no-js」之一，因爲這是一個奇怪的例子。但是我沒有得到的是爲什麼在方法已經存在時將這些類添加到html標記中有任何意義。例如，當它檢測到視頻是否受支持時，它可以確保（a）Modernizr.video屬性可用於JS中的測試，並且（b）將類「video」添加到html標記中原因不明）。文檔不解釋爲什麼。 – Dee2000

@ Dee2000 - 請看這裏的「它是如何工作的」：http://modernizr.com/ – series0ne

@ Dee2000，我想這個想法是，例如在你的CSS中有html.flexbox，它通過你的文檔級聯。但是，如果Modernizr從未在您的html標籤中放入「flexbox」，它將永遠不會在您的CSS中成爲目標......讓我知道如果這沒有意義 – series0ne

使用Modernizr庫，爲什麼它會將類添加到html標記

回答

相關問題