2 steps forward, one back

On hasty advice, seeing respond.js removed from html5boilerplate i removed it from the head of my docs on my current projects. I did that on a day with 20 other things, and moved on. It wasn’t till a week later, that i had finished a section of layout for a current project UI, and it was time to do the check on the older (ie7-8) browsers in Parallels, that i discovered my problems.

  • i started by checking through the css for specific rules that would give ie problems
  • i flipped through quirksmode
  • did a review in caniuse
  • then finally, back where it all started, i ran across this responsive test by Scott Jehl. Set this up on my page, and i could quickly see that ie7-8 needed their polyfil.

There are several polyfills to choose from on githubs’ HTML5-Cross-browser-Polyfills. Boilerplate may have removed respond.js from its default download as a cleanup to keep the core small, but if you are working on a responsive layout and using @media queries in your css styles, and supporting older browsers (phew) you ARE going to need a polyfill for media queries.

A side note. Both resond.js and css3-mediaqueries-js state that they do not work with @import’d stylesheets. so, its your dev environment. for now i have the complete set of stylesheets in the <head> linked <link href=”../_assets/css/lib/html5-reset.css” rel=”stylesheet” media=”all”>

Another Note. Both Modernizer and respond.js need to be in the document head (after the css) for best performance.

<!– All JavaScript at the bottom, except for Modernizr / Respond.
Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ –>
<script src=”../_assets/js/lib/respond.src.js”></script>
<script src=”../_assets/js/lib/rwd-images.js”></script>
<script src=”../_assets/js/lib/modernizr.custom.78955.js”></script>

In the process of fixing this up, i also see that Paul Irish has updated the conditional comments for html5boilerplate

<!– paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ –>
<!–[if IE 7]>    <html lang=”en”> <![endif]–>
<!–[if IE 8]>    <html lang=”en”> <![endif]–>
<!– Consider adding an manifest.appcache: h5bp.com/d/Offline –>
<!–[if (gte IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]> <!–> <html lang=”en”> <!–<![endif]–>
<!–[if gte IE 8]> <style type=”text/css”>*.gradient {filter: none;}</style> <![endif]–>

i have removed the conditional for ie6 since i am not testing for it. and the last line is to allow ie9 to use SVG in my gradient rules, instead of the old ie filter rule.