SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    787
    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
    16,420
    Mentioned
    160 Post(s)
    Tagged
    1 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
    787
    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
    16,420
    Mentioned
    160 Post(s)
    Tagged
    1 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
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 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
    423
    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.


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
  •