SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot gregorious's Avatar
    Join Date
    Aug 2006
    Location
    Honolulu, HI
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Modernizer - my bite at the cross browser support apple.

    I bid my brains "defend me now". The last two years have been spent in WordPress; and now with a Responsive theme(id).

    I got a site build that makes me happy, and I want to launch with cross browser support. The Responsive theme comes with MODERNIZR bulit-in. I have been reading and video viewing much on the subject. I am convinced that MODERNIZR is the road to take. But I am still not clear on the "hows".

    I get the Production verses Development differences... I know that MODERNIZR can return yes/no, yep/nope, support/no-support values, I am just not seeing the mechanics yet.

    -------

    MODERNIZR <script> is coded into the <head> (before or after the CSS ref link)?

    The <html> tag gets the " no-js " attribute.

    On page load, the <script> modernizr.js file is called to service; which resides on the modernizr server (or can it be local to the website?)

    On page load, the " no-js " in the <html> tag gets transformed into " .js " (if javascript is supported) and a feature list of support/no-support HTML5 tags is appended to the <html> tag: " js no-flexbox flexboxlegacy canvas canvastext ".

    Write diverging .html .flexbox and no-flexbox .class styles into the CSS sheet.

    Maybe this is where I am having a disconnect; I not seeing the decision tree.

    If I include a <video> (mp4, ogv, webm) in the HTML code; how do I leverage the generated <html> " no-video " class to deliver alternate content like an .FLV or .JPG in a non-supported browser like IE8?

    1. My guess: add the .video class to the <video> tag into the page code.
    2. Guessing still: I create alternate content, like a flash <object> and give it a class of .no-video in the page code.
    3. And still guessing: the diverging CSS .html .video and .no-video styles in the CSS code are ignored or respected, depending the generated MODERNIZR <html> tag. If no-video is present in the generated <html> tag then the .no-video class styling is honored.
    4. I suppose: The <video> call in the page code is ignored by the un-supportive browser and the .video styling is not also ignored.


    What about systems that support both <video> and flash and an alternate .JPG? How do I direct the media for the best experience?

    Why is the sky blue?
    Greg
    G. Armento - Design, Multimedia, Illustration, Photography
    -------------------------------------------------------
    www.communications-by-design.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    At the simplest level Modernizr adds a class to the html tag if the property is supported or not supported and therefore you can use that class to apply styles to relevant browsers accordingly.

    e.g.
    Code:
    .no-cssgradients .test{background:url(img.png)}
    
    .cssgradients .test{
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
    }
    Code:
    <div class="test">test</div>
    You could therefore toggle a div on or off depending on support of a certain feature.

    Code:
    .test1,.test2{display:none}
    .boxshadow .test1{display:block}
    .no-boxshadow .test2{display:block}
    Code:
    <div class="test1">Test1</div>
    <div class="test2">Test2</div>
    For more complicated scenarios you would probably need to hook in the detection via javascript as shown in the examples here:

    http://diveinto.html5doctor.com/dete...#video-formats

    For video there is a solution here:
    http://camendesign.com/code/video_for_everybody

    There is a tutorial here that explains how to use modernizr to provide polyfills and fallbacks:

    http://html5doctor.com/using-moderni...ide-fallbacks/

    All modernizr really does is detect support and then its up to you to fill in the gaps. I'm afraid I'm not an expert on it as I've only used the class switching methods I mentioned above (and most of the time css has its own fallback anyway).


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
  •