SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    confused about modernizr....

    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

    Code:
    var elm = document.createElement("DIV");
    elm.innerHTML = "<article> Hello <\/article>";
    document.body.appendChild(elm);
    seems exceedingly vague... just create a div? and place it where??? and won't this line

    Code:
    elm.innerHTML = "<article> Hello <\/article>";
    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. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,157
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,157
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    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>

    tags.png

    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    .borderradius .box {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    I've taken this example from http://www.sitepoint.com/regressive-...r-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. #6
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    436
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    so what "test" do I have to run for all the HTML5 tags that old IE's don't support?
    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...for-designers/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •