Modernizer - my bite at the cross browser support apple

HTML & CSS
1

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.
  3. Guessing still: I create alternate content, like a flash <object> and give it a class of .no-video in the page code.
  5. 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.
  7. 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

2

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.


.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%);
}




<div class="test">test</div>

You could therefore toggle a div on or off depending on support of a certain feature.


.test1,.test2{display:none}
.boxshadow .test1{display:block}
.no-boxshadow .test2{display:block}



<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/detect.html#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-modernizr-to-detect-html5-features-and-provide-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).