Working with IE8 support

Nearly all of the web build I do still need IE8 support. I know what to use and what not to use in my code to make it work without having the bad surprise of finishing building a website, opening it in Internet explorer 8 and see it completely brocken.
In this post, I just want to share a few useful things I always include in my code.

CSS for IE8

Let’s start with the CSS (or SCSS). First thing, I tend not to use properties we know won’t work in IE9 or lower.

Start with a strong CSS reset. There is lots of them but I use sanitize https://10up.github.io/sanitize.css but I changed a few parameters, I notice the cursor is better as auto than defaut, line height on input, etc. my own version is there

I always have a _ie.scss where I fix things using a class .ie or .ie8

My html has:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”KdBzWK” default_tab=”html” user=”denisbouquet”]See the Pen KdBzWK by Denis BOUQUET (@denisbouquet) on CodePen.[/codepen_embed]

For instance, this is one of my files:

.ie8 {
  // non retina assets
  header.main.dark-skin nav .logo-dar a {
    background: url(../images/logo-white.png) no-repeat
  }
  .logo-dar a {
    background: url(../images/logo-black.png) no-repeat;
  }
  article blockquote>p:before
  {
    background: url(../images/icn-quote.png) center no-repeat;
  }
  // form elements
  input, select {
    padding: 0;
  }
  .customSelect {
    background-image: none;
    padding: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
}

IE8 Javascript scripts

HTML5 elements for IE8

Good javascript to help in a second, I use cdnjs to import the following
– html5shiv, HTML5 elements legacy in Internet Explorer
https://github.com/afarkas/html5shiv

Make responsive website and media query work in IE8

– respond, responsive media query in IE8
https://github.com/scottjehl/Respond – A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Support of :nth-child(n), :last-child, etc in IE8

– selectivizr: a polyfill for the support of very useful selectors: :nth-child(n), :last-child, :target, :not(s), :enabled, :disabled, :checked, ::selection
http://selectivizr.com – http://cdnjs.com/libraries/selectivizr

In the head of every pages:
[codepen_embed height=”351″ theme_id=”0″ slug_hash=”rOrejL” default_tab=”html” user=”denisbouquet”]See the Pen rOrejL by Denis BOUQUET (@denisbouquet) on CodePen.[/codepen_embed]

Make form placeholders work in IE

HTML5 Placeholder jQuery Plugin – https://github.com/mathiasbynens/jquery-placeholder

/**
 * Internet Explorer fixes
 *
 */
IEfixes: function (elt) {
  // placeholder for IE8 - IE9 only
  $('input, textarea').placeholder();
},

Hope those can help,