Jen
Jen

Reputation: 1733

Modernizr Basics

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

Answers (2)

rgthree
rgthree

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

Christopher Scott
Christopher Scott

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

Related Questions