Modernizr基礎知識

我在我的頁面中包含了modernizr，但是如果我無法訪問這些瀏覽器，我將如何測試它在IE 6-7中的工作？做類似的東西： http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/Modernizr基礎知識

基本CSS：

.accslide { 
    height: 0px; 
    width: 0px; 
    overflow: hidden; 
    } 
    input[type="radio"]:checked+label ~ .accslide { 
    width: 100%; 
    height:auto; 
    }

如果第二選擇不火，內容將是不可見的。

如果CSS3不受支持，是否有一種方法只加載Modernizr？如何測試Modernizr是否在使用我的CSS選擇器？

來源

2013-02-21 Jennifer Michelle

你使用的是Chrome嗎？ – 2013-02-21 23:08:10

您可以使用如下服務：'http：// www.browserstack.com/test-in-internet-explorer' – Kaeros 2013-02-21 23:08:52

我有一份chrome，是的。 Browserstack看起來不錯，但我今天買不起。 – 2013-02-21 23:09:24

Modernizr不添加任何功能的瀏覽器，只是檢查現有的funcitionality。如果你想測試選擇器支持，你需要添加它。 Here's a gist

但是，即使這樣也不會讓你想要完成什麼，我想，當你檢查單選按鈕時，會顯示accslide元素。如果您希望支持IE6，您很可能需要使用javascript。 - IE6甚至不支持[type="radio"]選擇器，所以您也不能使用它。

您需要爲單選按鈕添加一個點擊/更改處理程序，並使用類更新它的容器以正確獲得所需的功能，特別是支持IE6。

這裏是你的CSS是什麼樣子的例子：

#radioContainer .accslide { 
height: 0px; 
width: 0px; 
overflow: hidden; 
} 
#radioContainer.on .accslide { 
width: 100%; 
height:auto; 
}

現在，在JavaScript中，有人點擊時/改變單選按鈕只需添加/刪除on類的#radioContainer元素。 注：我給#radioContainer的ID B/C IE6將不會從兩個CSS類名稱樣式的元素（最終，你將不會被支持IE6，並可以簡單地提供.radio-container.on，不會對IE6的工作）

來源

2013-02-21 23:24:11 rgthree

如果我只是添加一個JavaScript切換的東西，會不會與css3做同樣的事情？或者我應該做一些JS的條件加載？ – 2013-02-21 23:27:21

那麼，我會簡單地使用JavaScript解決方案並轉儲CSS3選擇器。我已經更新了適用於所有瀏覽器的示例CSS。 – rgthree 2013-02-21 23:33:14

當我通過caniuse看。com，似乎移動瀏覽器對css3的支持遠高於JS。在我孩子的Android上，我們必須禁用JS才能使Google也能工作。由於手風琴在手機上非常有用，我首先要使用css3，而javascript的後備，聽起來很古怪。 – 2013-02-21 23:37:27

如果給定的瀏覽器不支持它，Modernizr將不會啓用CSS功能（如更新的選擇器）。它主要是一個功能檢測庫。

來源

2013-02-21 23:12:07

我可以使用它，因此這不會在舊版瀏覽器上消失我的內容嗎？示例： http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/ 請改用selectivizr？ – 2013-02-21 23:15:40

不熟悉selectivizr，但看起來像[ie7-js]（http://code.google.com/p/ie7-js/）可以完成這項工作：http://ie7-js.googlecode.com/ svn/test/index.html – 2013-02-21 23:25:06

@JenniferMichelle - Selectivizr非常棒，前提是您還使用其中掛鉤的其他庫之一（例如jQuery等）。如果你不使用其中的一個，那麼ie7.js確實也會完成這項工作。有關更多信息，請參見http://stackoverflow.com/questions/10231706/ie9-js-has-something-else-rendered-it-obsolete/10660881#10660881。 – Spudley 2013-02-26 20:06:05

Modernizr基礎知識

回答

相關問題