All posts tagged Internet Explorer

  • Element.dataset not supported in IE: Here’s a Workaround

    Recently, I was working on a project that used the dataset property to store some additional info about element and I discovered that none of my code worked in IE. After doing some research, I found out that dataset property is not supported by IE (at least not until version 11 comes out). If you’ve ever run into this issue, here’s a quick workaround:

    var myElement = document.getElementById('myElement'), // contains attribute data-my-custom-value
        myCustomValue;
    
    if(myElement.dataset !== undefined) { // standard approach
        myCustomValue = myElement.dataset.myCustomValue;
    } else {
        myCustomValue = myElement.getAttribute('data-my-custom-value'); // IE approach
    }
    

    In the above example, if the dataset property is undefined, we use the getAttribute method to grab it instead. The one thing to note here is that when you use dataset property to retrieve the value of the my-custom-value attribute, the name of the attribute gets converted to camel-case and the “data” portion of the name is dropped; when you use getAttribute the value is retrieved using the original hyphened value.

  • IE9 Stylesheet Not Loading Due to Case Sensitivity

    I recently discovered something very dastardly about IE9 (and possibly other versions – I haven’t tested them all): class names are case sensitive in IE9. In other words, if your HTML looks something like this:

    ...
    <div class = "MyDiv"></div>
    ...
    

    And your CSS looks something like this:

    .myDiv {
    /* Styles Here */
    }
    

    Read more