HTML5 – Add Elements to DOM to Style with CSS – Target IE8

If you’ve started creating your markup with HTML5, using elements such as nav, header, and others, IE8 will need a jump-start to recognize these, and apply your CSS specific rules to them. Read past the break to see some examples of this in work.

Example:

<header>
Some stuff
</header>

CSS:

header { display:block; width:960px; background-color:awesome; }

*Note: “awesome” unfortunately is not a valid option :*(

You’ll see that IE8 completely ignores all of this markup – here’s where a simple piece of JavaScript comes in handy!

<!--[if lt IE 9]>
   <script>
      document.createElement('nav');
      document.createElement('header');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->
Posted in CSS, HTML, HTML5, Javascript