Modernizr Basics

Question

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?

You can use a service like: `http://www.browserstack.com/test-in-internet-explorer` — Kaeros, Feb 21 '13 at 23:08
I have a copy of chrome, yes. Browserstack looks nice but I can't afford it today. — Jen, Feb 21 '13 at 23:09

score 1 · Answer 1 · answered Feb 21 '13 at 23:12

1

Modernizr won't enable CSS features (like newer selectors) if the given browser doesn't support it. It's mainly a feature detection library.

answered Feb 21 '13 at 23:12

Christopher Scott

2,383
2
25
23

Can I use it so this won't disappear my content on older browsers? Example: http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/ Use selectivizr instead? – Jen Feb 21 '13 at 23:15
not familiar with selectivizr, but it looks like [ie7-js](http://code.google.com/p/ie7-js/) will do the job: http://ie7-js.googlecode.com/svn/test/index.html – Christopher Scott Feb 21 '13 at 23:25
@JenniferMichelle - Selectivizr is great, provided you're also using one of the other libraries that it hooks into (eg jQuery, etc). If you're not using one of them, then ie7.js will indeed also do the job. See http://stackoverflow.com/questions/10231706/ie9-js-has-something-else-rendered-it-obsolete/10660881#10660881 for more on this. – Spudley Feb 26 '13 at 20:06

rgthree · Accepted Answer · 2013-02-21T23:31:57.630

1

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)

edited Feb 21 '13 at 23:31

answered Feb 21 '13 at 23:24

rgthree

7,217
17
21

If I just add a javascript to toggle the things, will it go wonky with the css3 doing the same thing? Or I should do some kind of conditional loading of the JS? – Jen Feb 21 '13 at 23:27
1

Well, I would simply use the javascript solution and dump the CSS3 selectors altogether. I've update the anser with sample CSS that would work for all browsers. – rgthree Feb 21 '13 at 23:33
When I look through caniuse.com, it appears that mobile browsers have far more support for css3 than for JS. On my kid's Android we has to disable JS to get Google to work, too. Since accordions are very useful on mobile, I want to use the css3 first, and a javascript fallback, odd as that sounds. – Jen Feb 21 '13 at 23:37
Absolutely, but your question asked for IE6-7 support and that's how I answered it. If I were you (obviously, without knowing your requirements), I would not worry about IE6, and even IE7 if possible, opening up a world of more possibilities. – rgthree Feb 22 '13 at 15:15

Modernizr Basics

2 Answers2