Internet Explorer 8 and 9 Swiss Knife

I've done this snippet compilation for IE8 and IE9 that I think might be helpful for you if you have to do some cross-browser stuff and you need to work with Internet Explorer.

1. Localhost (Large Blade)

First of all, you may be working using a Virtual Machine or with a dummy PC with Windows. I was using a Virtual Box with Windows 7 to use IE, but the I ran into my first problem when trying to use localhost as domain of my application; it was running on my OS computer, so I needed a small hack.

This is going to depend of the Windows version, but for Windows Vista this solution down here works:

1. Go to C:\Windows\System32\drivers\etc\hosts

2. Open the file hosts with notepad (or something similar); do this in administrator mode.

3. Add your IP Address – space – localhost

   For example:
   
192.168.0.1 localhost


4. Save the file.

Once is done, you can try it:

http://localhost:3000

2. Web Fonts (Small Blade)

Some web fonts extensions are not really well supported by IE9 at least, so check the next snippet of my SCSS code:

//
// mixin for bullet proof font declaration syntax
//
@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
 $full-path: $icon-font-path + $font-filename;
 @font-face {
   font-family: $font-family;
   src: url($icon-font-path + $font-filename + '.eot?#iefix'),
        url($full-path + '.ttf') format('truetype'),
        url($icon-font-path + $font-filename + '.eot?')   format('embedded-opentype');
   font-weight: $font-weight;
   font-style: $font-style;
   font-stretch: $font-stretch;
 }
}

This mixin helped me to reuse and declare an available font in my storage, so if you want this to work on Internet Explorer, remember to add an EOT font version for each one of your fonts and use '.eot?#iefix' as the example below:

src: url($icon-font-path + $font-filename + '.eot?#iefix') 

and there you go. It's working! 🙂

3. window.location.origin is not supported (Corkscrew)

Use this snippet that will save your life.

function origin() {
  if (!window.location.origin) {
    var port = $window.location.port ? ':' + $window.location.port : '';
    return $window.location.protocol + "//" + $window.location.hostname + port;
  } else {
    return $window.location.origin;
  }
}

4. Touch device detector 'onmsgesturechange' (tweezers)

For a reason that I don't really understand very well, onmsgesturechange was detecting Internet Explorer 9 as a touch device, and I found it was a common thing; I was using this snippet:

function isTouch() {
 return 'ontouchstart' in window || 'onmsgesturechange' in window;
}

I changed it for this:

function isTouch() {
  return 'ontouchstart' in window || (navigator.msMaxTouchPoints > 0);
 }

Worked very well and this solved the problem.

5. Favicon (Nylon toothpick)

Another classic example of things to take into consideration is the favicon. You can solve this by using image/x-icon type

link(rel="icon", type="image/x-icon", href="../images/favicons/favicon.ico")

+ More info

6. Be careful using 'initial' attribute in a CSS property (Sewing eye)

Remember: properties such initial are not supported by Internet Explorer.

Once in a project, I was using left: initial; as property and, in different browsers like Chrome and Firefox, it was working well but not in Internet Explorer. When I noticed this, it really took the pressure off from myself.

7. Add support to pointer events in dropdowns on IE (Reamer / Punch)

   function unsupportedIEVersions() {
      if(navigator.appName == 'Microsoft Internet Explorer') {
        var agent = navigator.userAgent;
        if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){
            var version = parseFloat( RegExp.$1 );
            if(version < 11)
              return true;
        }
      }
    }

    function addPointerEventsListeners() {
      element.on('click', function(e) {
        var underneathElem = element.find('select');
        e.target = underneathElem[0];
        underneathElem.trigger(e);
      });
    }

    if(unsupportedIEVersions) {
      addPointerEventsListeners();
   }

8. preventDefault doesn't exist in IE8 (Pin)

A small snippet that you can use is this one:

return event.preventDefault ? event.preventDefault() : event.returnValue = false;

9. IE8 or less: SVG is not supported (mini-screwdriver)

Use GIF instead if you need a loading animation or something else.

Glossary

Here's a useful link of things you can use that are supported on IE. Check it out and save yourself some time and avoid frustrations:

Can I use

If you know other cool snippets feel free to share a link in the comment area below.

Thanks for reading! See you next time.

Follow me: @zazvick

I also write here: Read more