HTML5 and CSS3 for IE8

IE8 and lower are not playing nice with HTML5 pages. Also CSS3 wasn’t invented when it released. To get the best result on IE8 with the least effort just add some scripts. Not pixel perfect, but good enough for the remaining 2.5 percent of unsupported browser users.

html5 + css3 > ie8

Scripts

First up are the new HTML tags like nav, section and footer. Theses are defined by adding html5shim in the <head>. Now the page looks a lot less messed up.

To get css3 working add selectivizr. This emulates CSS3 pseudo-classes and attribute selectors. There is a no-script option to fallback to a different stylesheet when scripting is disabled.

Last to enable media queries in css add css3-mediaqueries. This enables things like first-child in css.

Code added to the masterpage

<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<script src="/scripts/css3-mediaqueries.js"></script>
<script src="/scripts/selectivizr.js"></script>
<![endif]-->

Last tips

Don’t apply styling to <a>, wrap it with a <div> with the styling

<div class="blox span4">
   <a href="somewhere.else.html">
      <h2>Take me somewhere</h2>
   </a>
</div>

Tried -ms-behaviors like css3 pie and background-size-polyfill but they didn’t help. Avoid them.
IE8 and lower is a small piece of the internet users. Make the page readable and move on.

About erictummers

Working in a DevOps team is the best thing that happened to me. I like challenges and sharing the solutions with others. On my blog I’ll mostly post about my work, but expect an occasional home project, productivity tip and tooling review.

View all posts by erictummers →