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?