The Internet Explorer Nightmare

Microsoft is creating a nightmare for the web development world, IE6, 7 & 8 all have significant market shares still so need to be catered for. IE9 is much better of course but won’t run on anything older than Windows Vista which means that over half the world’s computers will never be able to run it, obviously this will change as people upgrade computers but at the time of writing IE6 still has nearly 10% of the browser market and Windows XP has over 50% of the OS market.

And now it seems that IE10 will only support Windows 7, not even Vista, this means that there will be another tranche of customers with Vista machines who are unable to upgrade beyond IE9.

It is very difficult to run more than one version of Internet Explorer on the same machine, I use VirtualBox to run several virtual Windows machines but that does mean that I need a separate Windows licence for each machine.

So my full browser array (on my main development machine)  is;

1. Opera – my default browser (I like Dragonfly)
2. Chrome – almost always open too
3. Firefox 6 – for all the great extensions
4. Safari -mostly for testing
5. IE6 – if it works here it usually isn’t too bad in later versions of IE
6. IE7 in an XP machine under VirtualBox
7. FF3.6 in the same XP machine under VirtualBox
8. IE8 in another XP machine under VirtualBox
9. IE9 in a Windows 7 machine under VirtualBox
10. IceMonkey under Knoppix under VirtualBox

Browser Deployment

You may notice that I didn’t refer to different versions of Chrome or Safari, that is because by default these browsers keep themselves up to date so the “tail” of older versions is very short.

Opera & Firefox do the same but the user has to actually agree to download major version changes, hence the tail of FF3.6 users, people have to agree to update to FF4 (but I think FF is now changing to the Chrome model for deployment). The same applies to Opera but as its user base is quite small and quite geeky (I use Opera as my default browser) it tends to look after itself.

Of course the major problem in the browser world is Internet Explorer. Usage of versions older than IE6 has fallen enough that I now ignore them when developing websites but all the later versions still need to be catered for (in my opinion – some developers take a much more aggressive view).  It is possible that IE7 usage will also shrink to almost nothing but I can’t see IE6 disappearing for quite a while yet and of course Windows XP still has a huge user base for whom IE8 is the best that can be installed.  And  there are a few million Vista users who can never go beyond IE9.

I’m sure Microsoft are aware of the mess they have created, I just wish they wouldn’t keep on doing it.  If Chrome/Opera/Firefox etc. can run on any version of Windows (and Mac and Linux) it doesn’t seem too much to ask that Internet Explorer should do the same.

Now I figure that a good proportion of people are using Firefox 3.6 or later, Chrome, Opera, Safari or Internet Explorer 9 (actually not too many of them yet but it is growing).  As long as what I did still looked ok in the older browsers I thought I would try out enhancements to make the site look a bit prettier.

So I styled the supplier images with rounded corners and drop shadows;

img.supplier {
float: left;
margin: 1em;
vertical-align:   top;
border: 4px solid #888;
border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 4px 4px 4px #888;
-moz-box-shadow: 4px 4px 4px #888;
/*   filter: progid:DXImageTransform.Microsoft.DropShadow(offx=4, offy=4, color=#888888);  */
}

Browser Support

The rounded corners are supplied by the border-radius directives and the drop shadows by the box-shadow directives.
I have also used the -moz versions of these directives to keep Firefox 3.6 happy (quite a few people haven’t yet moved to FF4), Firefox 4, Opera, Chrome and IE9 are happy with the standard directives. Safari uses the border-radius but doesn’t yet support box-shadow, it probably supports the -webkit version but I think it will catch up with Chrome pretty soon so I didn’t bother adding another line of code which would soon be redundant.

Now older browsers like IE6, IE7 & IE8 don’t support the CSS3 rounded corners or drop shadows but IE has supported drop shadows by a proprietary directive for a long time, so I added a filter directive to give the drop shadows.  All sorted!

But IE9 supports CSS3 AND filters

Oops! When I tested this in IE9 I discovered a problem, IE9 being a modern browser provides pretty good support for the CSS3 directives, but it is still Internet Explorer and also supports the filter directive.

The results weren’t very pretty, nice rounded corners and drop shadow with an ugly square drop shadow behind it.  This is why the last directive in the CSS above is commented out.

I needed a separate stylesheet to give the extra instructions to the older versions of Internet Explorer but not to IE9. So where I called the main stylesheet in my HTML page I added an extra bit of code.

<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="stylesIE.css" rel="stylesheet" type="text/css" />
<![endif]-->

/*
* This stylesheet contains only those styles which we need to make IE versions less than 9 work properly
* IE9 is close enough to a modern browser that it can use the main stylesheet
*/

img.supplier {
    filter: progid:DXImageTransform.Microsoft.DropShadow(offx=4, offy=4, color=#888888);  
}

The results?  After nearly 2 months of tracking I can say that about 2.5% have javaScript disabled, or 97.5% have javaScript enabled.

The website I have been tracking is  a business and visitor guide to Stow on the Wold.  I chose this site because it is fairly busy (about 4000 visitors per month) and because it very much a general purpose website with a wide cross-section of visitors.  I suspect that a more technical site might show more people with javaScript disabled, my theory is that most people don’t want to disable javaScript and wouldn’t know how to disable it if they did want to.

Update 21st December 2011 – A few more months of data show the percentage with javaScript disabled fairly steady at about 3%.   So about 97% of my visitors have javaScript enabled which is useful to know.

Nice browsers like Opera and Firefox display abbreviations with a blue dashed line underneath, when you hover over the text a tooltip pops up to display the title text of the abbreviation. So you can do something like this to expand an abbreviation

<abbr title="Hyper Text Markup Language">HTML</abbr>

Chrome & Safari offer the tooltip feature but don’t show the dashed underlining unless you provide a style for the abbr tag. Internet Explorer is different again, IE7 & IE8 will display the tooltips (but not very reliably) but ignore the styling, IE6 doesn’t do anything.

To get working properly in all browsers I thought I would try adding a class to each tag to see if Internet Explorer liked that. I had already styled the abbr element to keep Chrome & Safari happy so I just added a selector for a new abbr class to the existing style.

abbr, .abbr {
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: blue;
}

It worked better than I could have hoped, I didn’t need to add class=”abbr” to any of my html abbr tags at all. It seems that just declaring a style for a class of .abbr makes Internet Explorer work like the other browsers. And as a real bonus it also works in IE6 and IE8 behaves more consistently too!

I don’t know why this works and perhaps I am not the first to discover this but I thought it was worth sharing.

Method

It’s quite simple in principle. When a user loads one of the pages we are using for this test several things happen:

1. A PHP script creates a session on the server and logs this in a mySQL database
2. If no session exists already then the PHP script writes a little bit of javascript into the HTML page to be served
3. If the client has javaScript enabled on their computer the script will run sending an asynchronous call (to avoid slowing down the pageload while waiting for a response from the server) to the server
4. Another PHP script on the server will find the mySQL record created in step one and update the javascript_enabled flag
5. If the client doesn’t have javaScript enabled then the script won’t run and the database will not be updated

Results

So far we have checked 20202 sessions and 1314 of them have had javaScript enabled, a rate of 6.5%.

We will give this trial a little time and a bit of analysis before we roll this out for some proper results (and publish the code so other people can do the same).

Edit: Well the first change was to exclude robots, Googlebot and Slurp from Yahoo! were very quick on the scene and of course they don’t use javaScript.

Further Edit: 31st Aug 2010 The second change was to remove the logging from this page, it seems like my little script was interfering with something in the header of the blog page, perhaps Google Analytics.
I am suspicious about the very low percentage of javaScript we are seeing, further investigation is required. It could be that people are reading this post through feed readers rather than directly and so not activating the script.

Further Edit: 6th Sep 2010 Something isn’t right here, the logging works for me but the numbers look far too low. I wonder if there is something wrong with my javaScript code (I am no javaScript expert) which is causing it not to make the ajax call for most people. This is the code that is included into the header of the testing page:

<script type="text/javascript">
// 
// This script is part of my javascript logging routine.
// If javascript is enabled it sends a request to the server which will log the fact that javascript is enabled.
// 
// The cunning bit which copes with the fact that IE6 doesn't know about XMLHttpRequest, thanks to
// http://ajax-prototype.blogspot.com/2007/02/workaround-to-make-ajax-calls-on.html
//
if (!window.XMLHttpRequest) {
  window.XMLHttpRequest = function() {
    return new ActiveXObject('Microsoft.XMLHTTP');
    } 
}
//
// Send the PHP session_id to the server script so it can update the log record for this session
//
request=new XMLHttpRequest();
request.open("GET","http://www.cotsweb.com/update_javascript_log.php?session_id=&lt;?php echo(session_id()); ?gt; ,true);
request.send(null);
</script>

Perhaps someone else can see what I have done wrong?

But will it run on my computer?

Yes, as long as you are running Vista or Windows 7.

IE9 uses features  which don’t exist in Microsoft’s older operating systems; that is anything older than Windows Vista,  there are pretty good technical reasons for doing this and IE9 is faster and more secure because of it, but it does mean that IE9 will never run under Windows/XP.    Of course Windows/XP is now pretty old and we can’t expect it to be supported forever, but you can still buy a brand new PC with XP installed and over 65% of PCs are still running XP, more than twice the market share of Windows Vista and Windows 7 combined.

Will people upgrade to Windows 7 so they can run IE9?

I think the days of people upgrading their operating systems to run the latest software, particularly something as basic as a browser are long gone.  Windows 7 looks like a pretty good operating system and I will happily run when I get a new PC, but I’m not going to upgrade an old PC to run it just so I can install IE9.  If I want a better browser than IE8 it is much less painful to install Firefox, Chrome or Opera than it is to change operating systems.

As PC usage increases and as people replace old PCs Windows 7 usage will increase and XP will continue its decline, but it will take years for Windows 7 (or it’s successors) to overtake XP in market share.    As technologies like HTML5 etc become more widespread there will be more need for XP users to move away from browsers which don’t support these features, otherwise they will be unable to use many of the features that other people take for granted.

So what will Microsoft do about Windows/XP?

The people at Microsoft are pretty canny and I don’t think they will want to risk the huge user base still on XP gradually drifting onto non-Microsoft browsers.  They might get the idea that there are other areas where Microsoft products aren’t the only option.

Internet Explorer 8.5?

My theory is that we will see a new version of IE8, perhaps they will call it IE8.5, which will incorporate a lot of the features from IE9 and will run on older versions of Windows.   Although Internet Explorer version 8.5 will never be as fast or as secure as IE9 it could use the same techology to render webpages and so be a good interim step.  It could be distributed through Windows Update (as IE8 was) and so would keep the average Windows/XP user on a Microsoft Browser until they are ready to upgrade to Windows 7.

Of course this is just my theory and I’m sure Microsoft won’t be announcing any such move any time soon, they would much rather that everbody bought Windows 7.  But they didn’t get the market share they have by ignoring most of their customers.  Maybe this time next year I will be able to say ” I told you so”.

1. They keep up to date with the latest releases – these people have adopted IE7 in the past and are now migrating en-masse to IE8.  IE7 usage has dropped from 35% in March 2009 to 14% in February 2010 and I guess this trend will continue until IE7 disappears entirely.The combined usage of IE7 and IE8 has remained fairly stable at around 36-37% of the market.  As IE7 has faded IE8 has taken up it’s share.
2. They have used IE6 for years, possibly in a corporate environment where stability is more important than modernity, or possibly just because  that is what was installed when their PC was first delivered.  These people are now starting to upgrade from IE6 to more modern browsers, IE6 usage has dropped from 31% in March 2009 to 20% in February 2010.The interesting thing is that these people don’t seem to be upgrading to the newer versions of Internet Explorer, rather they are migrating to other browsers, some are moving to Firefox or to Opera but the biggest beneficiary of this move seems to be Google’s Chrome browser.  Chrome usage has gone from less than 2% in March 2009 to nearly 6% in February 2010.As a footnote – Apple’s Safari Browser is also gaining users but I suspect that is due to more people buying Macs and iPhones with Safari installed rather than to people actually choosing to install Safari on their PC.

By amalgamating the version data from the Browser Trends website I have come up with the following graph.  Please click on the image to see the full size graph.

Amalgamated web browser trends Mar 2009 to Feb 2010

You can see how the more modern versions of Internet Explorer are maintaining their market share but IE6 usage is dropping quite rapidly while other (non-IE) browsers take up it’s share.

As a website designer I love this trend, I can look forward to a day when IE6 usage will have shrunk sufficiently that I can ignore it’s many foibles and design for 21st Century browsers instead.

As users of Microsoft’s newer browsers seem to keep up to date with the latest versions we can hope that they will all be using IE9 or even IE10 by then.  Internet Explorer is slowly becoming more standards compliant with each version so hopefully IE9 & IE10 will continue this trend and life will become much easier for me.

I dream of a day when the websites I create work properly in all browsers without me having to compromise the design to get to that state.

Fake Anti-Virus Windows

Recently we have had two cases of PCs (both running Windows XP and Internet Explorer) being infected by “drive by”  malware.   The user is surfing normally and comes across an innocent looking website, then suddenly up pops a virus warning, apparently from their own anti-virus software.  These messages are pretty scary and quite persistent, the correct response is to close the window (by clicking on the cross at the top right rather than by clicking within the window) and leave that website but if you aren’t sure you can easily end up allowing the site to install it’s “anti-virus software” on your computer.

Once the infected website has installed it’s payload (usually what is known as a trojan, from the Trojan Horse) on  your computer you have a big problem, it will pop up “anti-virus” windows all over the place and make web browsing and email impossible.  And, it will usually disable your own anti-virus software and make it very difficult to install any more.

Anti-Malware

The solution lies with the marvellous people at Malwarebytes.org, they offer a free download which, so far, has solved the problem for me.  The  paid version is well worth looking at too, it isn’t expensive and their work is definitely worth supporting.

Now if you have been very wise you will only have been using a limited account for your browsing rather than an account with administrator privileges; you can just login as an administrator and download the software you need.  Sadly some software doesn’t work that well without administrator privileges and most people set themselves as administrators to avoid hassle.  In this case it is likely that the whole computer is inaccessible and you will need to call on a friend so you can download the necessary software to a USB memory stick.

Removing the fake Anti-Virus Trojan

1. Visit the  Malwarebytes.org website and download their anti-malware product to a memory stick.
2. Boot the infected computer in safe mode (you can usually get this option by pressing F8 while Windows is starting up).
3. Insert the memory stick and run the anti-malware installation program
4. Use the anti-malware program to do a complete scan of the computer.  In safe mode you won’t be able to access the internet to update the malware signatures first but I found that the signatures were only a couple of weeks old anyway.
5. Hopefully the anti-malware program will find one or more offensive programs, use the program to remove them then reboot your computer, this time normally rather than in safe mode.
6. Now run the anti-malware program again, update the definitions from the internet and do another full scan.   Malware is a fast moving field and it is quite likely you will find more with a second scan.
7. Reboot again and all should be well.

How to stop malware infections in the future

Make sure your computer is fully updated with the latest updates to Windows and to your other software packages.    Vendors are pretty quick to release security patches; use them.

Install and use another browser;   our current favourite is Google Chrome, the design of Chrome makes it very difficult for Malware to affect anything outside it’s own browser window.  Microsoft try hard with Internet Explorer but even the latest versions are nothing like Chrome for security and of course they also provide the biggest target for Malware authors.

Installing Chrome for all users on your computer

By default when you install Chrome it will only install it for the current user, this is a nuisance if you want to get the whole family using the safer (and faster) browser.  The answer is to  download Chrome Pack , this offers you a whole raft of goodies from Google some of which you may fancy, but if you only want Google Chrome just untick all the other boxes.

Fonts have traditionally been a bit of a nightmare for web designers, the web browser loads the fonts from the user’s computer.  If the font you asked for isn’t installed on the user’s machine then it will default to something else, this means that what the user sees may be quite different from what you intended.

My first thought was “goody a chance to use Typekit for real!”.   Typekit is a new service which lets you use real fonts on your own website, the fonts are loaded on demand from the Typekit website.  This means that you can use proper fonts in a legitimate way but let Typekit deal with all the licensing issues.  You have to pay for most of the fonts of course but the charges are quite reasonable and an awful lot better than licencing direct from the big commercial suppliers.

Unfortunately Typekit didn’t have the exact font I wanted (they are very new and their library of fonts is still growing), but I did discover a free version of the font on fontspace which used the Open Font License (OFL) so I could legitimately incorporate it in the new website.   I was able to do this because the most modern browsers are now starting to support the CSS @font-face declaration properly (though to be fair Internet Explorer has supported @font-face since IE4 way back in 1997).

But of course to work properly I had to provide the browser with the font in a format it could understand.  Thank heavens for Fontsquirrel’s @font-face generator which converts  your existing font file into all the necessary different formats and even supplies you with the CSS code to use them.

So now I had fonts installed and ready to test, I always test any website as extensively as as possible but rarely have I had as wide a range of results  as this.  The following table shows my experience with the various browsers available to me.

All this is very confusing but the conclusion is that I think @font-face is now well enough supported to be used on a live site.   Support should get better over the next few months, particularly as Firefox users move on to version 3.5 (or even 3.6 which supports .woff files).

What Chrome Frame does is tell Internet Explorer to use Chrome’s rendering engine (Webkit) rather than IE’s own rendering engine.  The benefit for the user is faster browsing, particularly when a website uses Javascript, Chrome’s javascript module is much faster than IE’s equivalent.  The benefit for the website developer is that Chrome is a good modern browser, standards compliant and supporting a lot of newer features such as HTML 5 & CSS2/3 which are not even supported in IE8.

The theory is that if a web page works in Chrome then it will work in IE with Chrome Frame.  Chrome Frame is still very new so they are not quite there yet but I’m sure they will get there.   All those IE specific problems which website designers have had to work around for years, including those still hanging around from IE6, will become a thing of the past.  Wonderful!

But will people use it?

The problem is that Chrome Frame, being a plugin for IE, has to be installed by the user.  Do you remember the bad old days when it seemed that every new site required a new plugin?  Once the user has installed Chrome Frame all will be well but that first installation is the sticking point.

As a webdesigner I can put a piece of code on any of my websites which pops up a window giving an IE user the option to install Chrome Frame so they can view the site properly, but I don’t really want to do that.  People are, and should be, wary of installing things when asked to do so by a website.  And I don’t want people to navigate away from my site because it is too scary or demanding.  In any case most sites work fine  in IE anyway so why do they need to install a plugin?

My real hope is that corporate IT installations might think that installing Chrome Frame to upgrade IE6 would be a good idea.  IE6 is currently the most popular browser in the world, largely because there is no reason for the big corporates to change to anything else.   But a plugin might be different, any existing applications will continue to work fine but new applications could use newer features without the extra coding needed to cope with the particular quirks found in IE6.  It could be quite a money saver.

Critical Mass

I will be monitoring my Google Analytics reports for the day when I see “unChromed” IE6 usage drop below 5%.   I think that will be the time to put the plugin code on my own sites.  And when it drops below 2% I will consider ignoring IE6 all together, a happy prospect.

In the meantime I will carry on as usual, coding around the quirks in IE6 and ignoring the other features I might use if IE7 & IE8 supported them.

I wonder what Microsoft think about Google writing a plugin for them?