Make CSS 3 and HTML elements work in Internet Explorer 8


Its always a pain to make IE8 work with modern coding techniques. I don't won't to was much time dealing with this old browser and rather concentrate on mobile version. So here I will show 4 easy methods how to make CSS 3 and HTML elements work in Internet Explorer 8.

1. HTML5 Elements like aside, header etc. 

Include this into your header
(You have to copy the html.tpl.php into your theme folder)

2. CSS3 pseudo-classes like :nth-child, :last-child, :checked etc

Include selectivizr


There is also a module for drupal

3. IE8 can not read media queries so add respond.js Also here you can use a Drupal module Note: CSS Aggregation must be switched in order to make respond.js work

4. rgba in IE8

for this I found a nice compass mixin in this blog

@mixin rgba-background($color){     @include filter-gradient($color, $color);     @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {         background: transparent;         // set filter as none for IE9+, because IE9+ supprot RGBa         :root & {         filter: none\0/IE9;}     }     background: $color; }


and this is how you use it

.blackAlpha50 {     @include rgba-background(rgba(0, 0, 0, .5)); }


So you might still need a ie8 stylesheet. This is how to include it in the header of your html.tpl.php

/ie8.css" />