Confused about modernizr

Mobile
1

http://en.wikipedia.org/wiki/HTML5_Shiv

I don’t get what’s happening with that “hello” example…

so for browsers that don’t recognize the <article> tag the tag is wrapped in a div… and that’s it??
and how do you then style these elements for browsers that don’t recognize them?

and this

[FONT=Courier New]var elm = document.createElement("DIV");
elm.innerHTML = "<article> Hello <\\/article>";
document.body.appendChild(elm);[/FONT]

seems exceedingly vague… just create a div? and place it where??? and won’t this line

[FONT=Courier New]elm.innerHTML = "<article> Hello <\\/article>";[/FONT]

insert <article> elem inside every div on the page?

so this is what you do for every HTML tag a browser doesn’t recognize? like <section>?? just wrap it in a div??

and, again, how do you style these elements not recognized by IE??? (or other browsers that don’t recognize certain elements, for example <details> is not supported in Android or Windows phones…)

I have used modernizr successfully for placeholders for text fields in forms, but I don’t know what to do about HTML5 tags not supported by all browsers…

thank you…

2

My memory is a bit rusty, but AFAIK the “Shiv” takes advantage of IE’s behavior to make it support tags it would otherwise not support for CSS rules. I don’t know how well it works for other browsers.

var elm = document.createElement(“DIV”); // this line creates a div tag in memory
elm.innerHTML = “<article> Hello <\/article>”;// this line puts the string inside it
document.body.appendChild(elm);// and this adds the new div and it’s content to the body’s children

i.e.
…
<div><article> Hello </article></div>
</body>

You do not place the div anywhere, the script is doing that.
It does not add article to every div, only the created one.

3

thank you for your response…

and how do you style these elements for the browsers that don’t support them?

I have a little test here… if you have access to IE, can you see if it works, please…
(have article, section, & aside tags in there…)

do I need to do something in addition to built-in modernizr code for these tags to work in browsers that don’t support them?

thank you…

4

It seems to be working in IE9 desktop for me.

…
article { color:999; background:#fff; }
section { color:#00C; background:#9FF; }
aside { color:#093; background:#9F6; }
</style>

AFAIK what modernizer does is make the browser support them. i.e. without it the browser won’t see them as valid tags and so they can’t be styled. But by adding them via script, it adds them to the browser’s known tags and then they can be styled.

If I’m wrong or missing something, hopefully someone will come along soon and set me straight.

5

Modernizr does two things that I’m aware of. Firstly, it checks if the browser supports HTML5/CSS3 features, and adds a bunch of classes to the <html> element that allow you to set styles for those features where they exist. So, for example, if the browser supports border-radius, Modernizr adds the class .borderradius to the <html> element, which then utilizes your border-raduis styles like so:

.borderradius .box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

I’ve taken this example from http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Modernizr can also load scripts to help the browser when certain functionality doesn’t exist, such as the HTML5 placeholder attribute (as the article demonstrates).

6

Also, remember that with regards to CSS, Modernizr does not add any functionality; it just allows you to test for it. It use to come with respond.js which did add rudimentary media query support but you have to add that in (respond.js that is) yourself now.

7

thank you for your response… I’m still trying to figure out how it works, exactly…

so what “test” do I have to run for all the HTML5 tags that old IE’s don’t support? (section, aside, article, etc…)

thank you…

8

The test is actually done for you by Modernizr. Your job is to work out how you will deal with browsers that do and don’t support the various features you decide to include. for example, if you want multiple background on an element, you can set styles for that element for when CSS3 does work and fallback styles for when it doesn’t. You can also ask Modernizr to load other polyfill scripts that mimic CSS3 and HTML5 features if you can’t live without them.

There are some nice intros to it around the place, such as this: http://www.webdesignerdepot.com/2012/04/an-introduction-to-modernizr-for-designers/