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

My work as a recruited developer changes almost every month. 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.
This entry was posted in Development and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s