Paste your Google Webmaster Tools verification code here
Go to Top

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: –>
<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

<!– –>
<!–[if IE 7]>    <html lang=”en”> <![endif]–>
<!–[if IE 8]>    <html lang=”en”> <![endif]–>
<!– Consider adding an manifest.appcache: –>
<!–[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.


Get every new post on this blog delivered to your Inbox.

Join other followers: