Reputation: 1733
I included modernizr in my page, but how will I test that it's working in IE 6-7 if I don't have access to those browsers? Doing something similar to: http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/
The essential CSS:
.accslide {
height: 0px;
width: 0px;
overflow: hidden;
}
input[type="radio"]:checked+label ~ .accslide {
width: 100%;
height:auto;
}
If that second selector doesn't fire, the content will be invisible.
Is there a method to only load Modernizr if CSS3 is unsupported? How do I test if Modernizr is working on my CSS selectors?
Upvotes: 1
Views: 879
Reputation: 7273
Modernizr doesn't add any functionality to the browser, simply checks for existing funcitionality. If you want to test for selector support you will need to add that. Here's a gist
However, even that isn't going to get you far for what you're trying to accomplish, which, I imagine, is showing the accslide
element when you've checked the radio button. You will, most likely, need to use javascript if you expect to support IE6 & 7 -- IE6 doesn't even support the [type="radio"]
selector, so you can't use that either.
You will need to add a click/change handler to the radio button and update it's container with a class to properly get your desired functionality, especially to support IE6.
Here's an example of what your CSS would look like:
#radioContainer .accslide {
height: 0px;
width: 0px;
overflow: hidden;
}
#radioContainer.on .accslide {
width: 100%;
height:auto;
}
Now, in javascript, when someone clicks/changes the radio button just add/remove an on
class to the #radioContainer
element. Note: I gave #radioContainer an ID b/c IE6 will not style an element from two css-class names (Ultimately, you would not be supporting IE6 and could simply provide .radio-container.on
, which will not work for IE6)
Upvotes: 1
Reputation: 2399
Modernizr won't enable CSS features (like newer selectors) if the given browser doesn't support it. It's mainly a feature detection library.
Upvotes: 1