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.
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...
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.
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
).: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).
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:
classList
which allows easy adding and removing of classes on elements.requestAnimationFrame
for smooth animations.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.
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.
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ądarka jest przestarzała i nie pozwala Ci na pełne wykorzystywanie możliwości Internetu, a nawet może stanowić zagrożenie dla Twojego komputera.</p> <p>Od czasu wydania Twojej wersji przeglądarki minęło parę lat. W tym czasie przeglądarki przeszły epokowe zmiany.</p> <p>Zaktualizuj swoją przeglądarkę lub <a target="_blank" href="http://www.browserchoice.eu/BrowserChoice/browserchoice_pl.htm">wybierz inną przeglądarkę</a>.</p> <p class="withJSdisplay"><a href="javascript:oldIeMessageHide()">Ukryj ostrzeż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]-->
<!--[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]-->
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ądarka jest przestarzała i nie pozwala Ci na pełne wykorzystywanie możliwości Internetu, a nawet może stanowić zagrożenie dla Twojego komputera.</p> <p>Od czasu wydania Twojej wersji przeglądarki minęło parę lat. W tym czasie przeglądarki przeszły epokowe zmiany.</p> <p>Zaktualizuj swoją przeglądarkę lub <a target="_blank" href="http://www.browserchoice.eu/BrowserChoice/browserchoice_pl.htm">wybierz inną przeglądarkę</a>.</p> <p class="withJSdisplay"><a href="javascript:oldIeMessageHide()">Ukryj ostrzeżenie</a></p> </div> <![endif]-->
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>
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."); }
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.