IE8 must die!

I know what you think - Internet Explorer, argh! Thankfully, IE6 is dead. IE7 share is also rapidly diminishing. What about IE8? Unfortunately IE8 is the top most IE on Windows XP. And this is a favorite Windows distribution for many users still. Long live IE8? Please, no. Here is why.

  1. SVG images cannot be used, because IE8 is still alive.
  2. You cannot use a lot of time saving CSS, because IE8 is still alive.
  3. You cannot use a lightweight version of jQuery 2.0, because IE8 is still alive.
  4. In fact you would not have to use any jQuery-like (DOM manipulation) framework if IE8 were dead.

And the list continues...

Update: If you just want to see when this will be over see my countdown with end prediction for Poland and for the World (updated weekly or monthly).

But I'm guessing you want some examples. OK. If IE8 were dead you could...

SVG

Why would you use SVG? I'm sure you know there are lots and lots of different display sizes out there. Good news - you can make one image and it will be sharp and clear on all of them... If it weren't for IE8. All icons, most drawings, charts with text and ability to just zoom in...

<div class="preview">
    <img src="chart.svg" width="35px" height="35px">
    <div class="show-bigger" style="display:none">
        <img src="chart.svg" width="500px" height="500px">
    </div>
</div>

Note: Keep in mind that you should add both width and height if you wish to support old (pre 3.x) Android devices. Yeah, Android 2.x devices should die too ;-).

Oh yes, and if it weren't for IE8 you could also add SVG in backgrounds (CSS), too. And also inline, right in HTML:

Image. 1. Smile if you don't have IE8 ;).

<div style="width:150px; margin:0 1em; padding:1em; border:1px outset grey; text-align:center; float:right">
<svg viewBox="0 0 320 320" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="160" cy="160" r="150" style="fill:#ffeeaa;fill-opacity:1;stroke:none" />
    <circle cx="100" cy="120" r="30" />
    <circle cx="220" cy="120" r="30" />
    <path d="m 77,217 c 19,61 119,40 155,20 -6,-2 -19,-4 -25,-0 C 164,250 101,257 77,217 z" />
</svg>
<p style="margin:1em 0 0 0"><b>Image. 1.</b> Smile if you don't have IE8 ;).</p>
</div>

You could also do animations in SVG (SMIL), but that is not supported in IE at all (even the latest and last IE11 doesn't support SMIL animations). Sad because you could create a simple spinner that you could style easily and would just scale as you need (see attached loading indicator example)... But let's get back on track.

CSS

  • calc() - calc is a function that allows for making some calculations in CSS. You might think calc(10px - 5px) is boring. But the trick is you can mix units. And so width:calc(100% - 200px) will allow you to make a flexible 2, 3, 4 column layout... Or it would allow you to do that if it weren't for IE8. Thankfully there is a workaround (polyfill) for calc. You can use PolyCalc for free (also in closed, commercial projects).
  • rgba() - allows you to specify any color in RBG and alfa. Why is that important? With rgba you can have overlay with semi-transparent background and all other stuff in this element don't have to be transparent (like it would if you use opacity/filter).
  • opacity - speaking of which... opacity doesn't work in IE8 (you have to use another rule with non-standard filter).
  • multiple backgrounds - yes, it is possible in modern browsers to use multiple backgrounds in a single element. Think of e.g. adding quotes in a blockquote. You can sometimes work around this using :before and :after. See also some examples on css.info.
  • transform: rotate(45deg) and other transforms also not working in IE8. Usage examples on css.info.
  • border-radius, box-shadow, background-size and some other CSS properties are also not supported by IE8.

Here are only some of the CSS selectors that are not available in IE8, but if they were available you wouldn't have to generate classes in HTML like first-paragraph, even-row and all that stuff that you do just to get a nice and readable content like e.g. long tables.

  • p:first-child, p:last-child – first/last paragraph. Note that it works only if p is a first/last child element (excluding text). So if you have a div before first paragraph, then p:first-child will not match.
  • p:first-of-type, p:last-of-type – this is similar to the above, but here only elements of given type (name) are counted. So p:first-of-type will match first paragraph child even if e.g. div is before it.
  • tr:nth-child(an+b), tr:nth-of-type(an+b) – this allows you to match e.g. every even row (2n) or odd row (2n+1). The difference between nth-child and nth-of-type is similar to first-child vs first-of-type.

There are also other selectors not available in IE8 that you might want to use in a more specific cases. Here are some of them:

  • div:empty - empty div (to e.g. mark an empty drop zone in a certain way).
  • img:only-child - image that is an only element in its parent.
  • img:only-of-type - image that is an only image in its parent.
  • input:disabled, input:enabled - disabled/enabled elements.

See also my article on CSS selectors and IE versions (Polish only, sorry).

JavaScript

  • Array.indexOf - finding some value in Array? Yes, but not in IE8. Yes, you can use some polyfill or jQuery.inArray, but adding so simple stuff that should just work is so annoying and inefficient.
  • Geolocation - there is no workaround for it really. An ability to locate (with user consent) position of a laptop is possible e.g. by using WiFi location and most browsers know how to do that. Except IE8. And geolocation would allow quicker navigation on maps and e.g. quicker and more accurate weather report.
  • Canvas - this allows to make drawings but also to transform images, e.g. to scale and crop them before sending to a server.

And there is quite a lot other stuff also not available in IE9, but available in IE10+. Note that IE9 is disappearing much faster. So I'm just going to mention some important stuff that are holding us back because of high IE8 usage:

  • AJAX requests with file uploads and transfer progress. Yes, no more calls to the server and checking how much is transfer. Browser can just share information it has. See a full tutorial on a simple upload and progress bar.
  • File API also allows you to manipulate files selected by user before they are sent to server or even to use them on the client side (e.g. use image as a background for drawing on canvas or manipulate them).
  • There is also classList which allows easy adding and removing of classes on elements.
  • WebSockets that would allow efficient chat implementation.
  • requestAnimationFrame for smooth animations.
  • MessageChannel that would allow secure communication between frames on different domains. This allows you to e.g. make a form copy of a bug request from one server to another purely with JavaScript. See attached FramePostman that makes messaging easier.

So as you can see, IE9 is missing some juicy stuff too, but - as I mentioned - dying quickly. IE10 and IE11 are actually quite good. I would dare to say that Microsoft is again in the lead with the rest of the top browsers now. The problem is that old Windows usually don't get updates for IE. Let's hope this trend will be broken, and there is hope as Windows 7 seem to still get all the goodies.

Bonus 1 - merciful death

Here is a bonus - just paste it in your HTML (preferably somewhere on top) on your site to notify users that they are using old and cranky browser.

License is short - just use it and help to spread the word! In other words - I hereby release below code to the Public Domain. There are no requirements neither for using the code nor for spreading it. You don't even have to link back to this article or state that it's my work.

Drupal

You can just drop this at the top of your page.tpl.php (sites/all/themes/your-theme/template/):

<!--[if lte IE 8]>
<script type="text/javascript">
     // reset: javascript:var xx=document.cookie='js_hideoldIeMessageCookie=0; path=/';
     function oldIeMessageHide()
     {
          document.cookie='js_hideoldIeMessageCookie=1; path=/';
          document.getElementById('oldIeMessage').style.display = 'none';
     }
     function oldIeMessageHidden()
     {
          return (document.cookie.indexOf("js_hideoldIeMessageCookie=1")!=-1);
     }
     // already hidden
     if (oldIeMessageHidden())
     {
          document.write(String.fromCharCode(60),'style type="text/css"',String.fromCharCode(62),
                    ' #oldIeMessage {display:none} ',
                    String.fromCharCode(60),'/style',String.fromCharCode(62)
          );
     }
</script>
<![endif]-->
<!--[if lte IE 8]>
<div id="oldIeMessage" style="border:1px solid #933; background-color:whitesmoke; padding:1em 2em; margin:1em;">
<?php if ($language->language == 'pl') { ?>
     <p><b>STOP!</b> Twoja przegl&#261;darka jest przestarza&#322;a i nie pozwala Ci na pe&#322;ne wykorzystywanie mo&#380;liwo&#347;ci Internetu, a nawet mo&#380;e stanowi&#263; zagro&#380;enie dla Twojego komputera.</p>
     <p>Od czasu wydania Twojej wersji przegl&#261;darki min&#281;&#322;o par&#281; lat. W tym czasie przegl&#261;darki przesz&#322;y epokowe zmiany.</p>
     <p>Zaktualizuj swoj&#261; przegl&#261;dark&#281; lub <a target="_blank" href="http://www.browserchoice.eu/BrowserChoice/browserchoice_pl.htm">wybierz inn&#261; przegl&#261;dark&#281;</a>.</p>
     <p class="withJSdisplay"><a href="javascript:oldIeMessageHide()">Ukryj ostrze&#380;enie</a></p>
<?php } else { ?>
     <p><b>STOP!</b> Your browser is old and doesn't allow you to take full advantage of the Internet resources. It can also be harmful for you computer.</p>
     <p>Your browser was released eons ago in terms of current browsers progress.</p>
     <p>Please update your browser or <a target="_blank" href="http://www.browserchoice.eu/">choose another one</a>.</p>
     <p class="withJSdisplay"><a href="javascript:oldIeMessageHide()">Hide this warning</a></p>
<?php } ?>
</div>
<![endif]-->

Pure HTML - English version

<!--[if lte IE 8]>
<script type="text/javascript">
     // reset: javascript:var xx=document.cookie='js_hideoldIeMessageCookie=0; path=/';
     function oldIeMessageHide()
     {
          document.cookie='js_hideoldIeMessageCookie=1; path=/';
          document.getElementById('oldIeMessage').style.display = 'none';
     }
     function oldIeMessageHidden()
     {
          return (document.cookie.indexOf("js_hideoldIeMessageCookie=1")!=-1);
     }
     // already hidden
     if (oldIeMessageHidden())
     {
          document.write(String.fromCharCode(60),'style type="text/css"',String.fromCharCode(62),
                    ' #oldIeMessage {display:none} ',
                    String.fromCharCode(60),'/style',String.fromCharCode(62)
          );
     }
</script>
<![endif]-->
<!--[if lte IE 8]>
<div id="oldIeMessage" style="border:1px solid #933; background-color:whitesmoke; padding:1em 2em; margin:1em;">
     <p><b>STOP!</b> Your browser is old and doesn't allow you to take full advantage of the Internet resources. It can also be harmful for you computer.</p>
     <p>Your browser was released eons ago in terms of current browsers progress.</p>
     <p>Please update your browser or <a target="_blank" href="http://www.browserchoice.eu/">choose another one</a>.</p>
     <p class="withJSdisplay"><a href="javascript:oldIeMessageHide()">Hide this warning</a></p>
</div>
<![endif]-->

HTML - Polska wersja

PL info.: Polską wersję możesz wstawić w dowolnym pliku HTML - niezależnie od tego czy używasz kodowania Windows 1250, czy UTF-8. Pamiętaj jedynie, że początek (skrypt do chowania) jest ten sam co w wersji angielskiej.

<!--[if lte IE 8]>
<div id="oldIeMessage" style="border:1px solid #933; background-color:whitesmoke; padding:1em 2em; margin:1em;">
     <p><b>STOP!</b> Twoja przegl&#261;darka jest przestarza&#322;a i nie pozwala Ci na pe&#322;ne wykorzystywanie mo&#380;liwo&#347;ci Internetu, a nawet mo&#380;e stanowi&#263; zagro&#380;enie dla Twojego komputera.</p>
     <p>Od czasu wydania Twojej wersji przegl&#261;darki min&#281;&#322;o par&#281; lat. W tym czasie przegl&#261;darki przesz&#322;y epokowe zmiany.</p>
     <p>Zaktualizuj swoj&#261; przegl&#261;dark&#281; lub <a target="_blank" href="http://www.browserchoice.eu/BrowserChoice/browserchoice_pl.htm">wybierz inn&#261; przegl&#261;dark&#281;</a>.</p>
     <p class="withJSdisplay"><a href="javascript:oldIeMessageHide()">Ukryj ostrze&#380;enie</a></p>
</div>
<![endif]-->

Extra - JS visibility and display in CSS

Just add this in your head and use withJSvisible, withoutJSvisible, withJSdisplay and withoutJSdisplay classes to show/hide elements that are JS-only.

<!-- with and without JS visibility and display -->
<style type="text/css">
.withJSvisible {visibility: hidden}
.withJSdisplay {display:none}
</style>
<script language="JavaScript" type="text/javascript">
document.write(String.fromCharCode(60),'style type="text/css"',String.fromCharCode(62),
        ' .withJSvisible {visibility:visible !important} ',
        ' .withoutJSvisible {visibility:hidden !important}  ',
 
          ' span.withJSdisplay,a.withJSdisplay {display:inline !important} p.withJSdisplay,div.withJSdisplay {display:block !important} ',
          ' .withoutJSdisplay {display:none !important} ',
        String.fromCharCode(60),'/style',String.fromCharCode(62)
);
</script>

Bonus 2 - sudden death

Cutting the mustard test is something BBC News team came up with. Here is my modification that adds Array.indexOf - just to show how much I miss it ;-).

Yes, alert messages are not nice. Sometimes your just not in the mood for nice... ;-)

// just don't boder me if you don't cut the mustard...
if(!(
     'querySelector' in document
     && 'localStorage' in window
     && 'addEventListener' in window
     && typeof([].indexOf) == 'function'
     )) {
     alert("Your browser doesn't cut the mustard. Please change it.");
}

Counting down...

After successful IE6 killing developers made an almost official countdown website. The numbers seem to be a bit outdated so I made my own countdown charts with die prediction.