Browsers are the windows through which the world views our work, so it’s wise to pay attention and understand them. Unfortunately, browsers and web technology can change at a rapid pace – this article will bring you up to date and present a snapshot of the browser market as it exists right at this moment.
However much we may groan about it, dealing with the many quirks and inconsistencies that exist between browsers is a necessity in the daily lives of web designers and developers. This particular problem has existed for some time and it is likely that it will continue for many years to come. It’s therefore essential that web designers and developers stay up to date with the latest browser developments in order to produce the most effective websites.
It can be tough to keep up with the current situation of browsers. There are five major browsers, each of which has multiple versions along with frequent updates. Add this to the fact that they all have differing levels of support for various features of CSS3 and HTML5 and it can all become a bit overwhelming. This article will attempt to establish the state of the browser market as it stands right now. Let’s get started.
Latest Versions and Updates
The image below shows the current version numbers of each of the five major browsers at the time of writing. You may notice that the youngest browser, Google’s Chrome, has a version number that is a lot higher than Internet Explorer, which has been around much longer. This is down to Google’s six-week release cycle, which updates the browser and version number each time. In stark contrast we have the traditionally slow updates from Internet Explorer, which waited five years before updating from IE6 to IE7.
Microsoft is picking up the pace of release with the latest versions of IE, however. Only two years passed between IE8 and IE9 and Microsoft officially announced IE10 only one month after IE9’s release. Firefox has followed suit, also implementing a six week release cycle, and there’s even talk of that being reduced to every five weeks.
There have been criticisms of such short version releases. Some have suggested that with little to no major feature updates between releases, it is rendering version numbers irrelevant. Claims have also been made that it doesn’t allow enough time for bugs and errors to be ironed out prior to release.
From the perspective of web designers and developers, faster release cycles should generally be a good thing. IE6 was allowed to stagnate and combined with its huge market share acted as a dead weight upon the web design community. Modern browsers now compete with one another to provide support for emerging web technologies. The latest features of HTML5 and CSS3 can be adopted and implemented quicker, hastening the progress towards complete standardization.
Browser Usage
It’s always interesting to check out the latest browser usage statistics, if only to see if IE6 has finally died away (not yet, unfortunately). Finding out how users are actually viewing the web can be very informative. However, different sources of information can paint very different pictures of the current situation. As an example, let’s take a look at browser usage data from two different sources.
 |
 |
 |
 |
 |
|
| w3schools | 38.7% | 4.2% | 32.3% | 21.7% | 2.4% |
| StatCounter | 26.39% | 5.93% | 25% | 40.18% | 1.81% |
The numbers represent data collected for the month of October 2011 (November figures aren’t yet available for obvious reasons). The statistics from W3Schools would have us believe that all versions of IE make up only 21.7% of all browser usage, lower than both Chrome and Firefox. Compare that to the data from StatCounter, which suggests Internet Explorer still commands the majority of the share at over 40%.
The problem is that the nature of a website will often skew the results somewhat. Take this website for example, the users are (hopefully) pretty web-savvy and will probably be using a very recent, updated, modern browser. This is the same case with the figures from W3Schools, since the source of their figures are their own log files. They point this out themselves:
W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to the browser that comes preinstalled with their computer, and do not seek out other browser alternatives.
It is worth bearing this in mind when viewing such data. Statistics derived from your own website analytics will always be more relevant and useful. Despite this, global statistics can still prove insightful and the data can often reveal current trends and patterns. The following graph, from StatCounter, shows proportional browser usage over the last year:
It would appear from the graph above that Chrome has gained significant ground over the last year, mainly at the expense of Internet Explorer and Firefox, while both Safari and Opera have remained at a relatively constant level. Although Internet Explorer lost ground, it would seem that it still reigns as the most used browser by some way.
Next, let’s take a look at global browser version usage of this month (November 2011) so far.
It was mentioned earlier in this article that browser developers seem to be aiming for shorter release cycles, only six weeks in the case of Chrome and Firefox. While shorter release cycles appear to be a good move, they are only effective if users choose to upgrade to the latest version. If uptake is low, it could leave users strewn across many versions of the same browser, all with different levels of support and features.
Chrome has mostly solved this problem by implementing an auto-update feature, with no permission from the user required. The effect of this can be seen on the graph above. The most recent version of Chrome, 15, was only released on October 25th, yet has already pretty much entirely replaced Chrome 14.
Firefox isn’t quite at the stage of auto-updates yet, but still heavily prompts the user to upgrade upon the launching of the browser. Firefox 8 was only released earlier this month, but already a high number of users have switched. The majority of their users are on version 7, yet there remains a significant number still using 3.6, released nearly two years ago. Mozilla plans to implement silent-updates with version 10 of Firefox.
…making IE9 incompatible with Windows XP, the world’s most used operating system.
Unfortunately, Internet Explorer has always had big problems getting users to update. Internet Explorer 9 has been available for some time now, yet good amounts of users still remain on versions 8, 7 and even 6. Microsoft do not seem to be helping the situation however, by making IE9 incompatible with Windows XP, the world’s most used operating system. This policy will continue with IE10 as well, which will require Windows 7 and above.
The large number of people still using IE8 can be a cause for concern for web designers and developers. Internet Explorer 8 remains the most used browser, according to the charts above, but provides very little support for the majority of CSS3 and HTML5 features. CSS3 and HTML5 are well supported amongst the latest browsers (as we will see below), yet the popularity of IE8 means that alternative stylesheets and fallbacks will still be necessary for the foreseeable future.
CSS3 Support
With the release of IE9 earlier this year, it now means that the latest versions of all five major browsers have some levels of CSS3 support. While previous versions of browsers still need to be considered, this is a major step in the right direction and good news for web designers and developers. It is worth remembering however, that CSS3 is still in development, and different browsers have different levels of support for various features of CSS3. Some features are well supported while others aren’t and you may be required to use vendor prefixes such as –moz-, -webkit- and -o-.
Let’s take a closer look at the current situation of some of the more popular features of CSS3.
Firstly, there are some elements of CSS3 that are very well supported. CSS3 Selectors for example have had good levels of support for some time and have recently become an official W3C recommendation now that they have been implemented by all modern browsers.
There are also other elements of CSS3 that you can feel pretty confident about using right now. CSS3 colors such as RGBA and HSLA were the first elements of CSS3 to become an official recommendation and are supported across all of the modern browsers. Here are some other CSS3 properties that are supported by all modern browsers.
|
|
|
|
|
|
| Version | 8 | 5.1 | 15 | 9 | 11.5 |
| RGBA | |||||
| HSLA | |||||
| Multiple BG | |||||
| Border-radius | |||||
| Box-shadow | |||||
| Opacity | |||||
| Transforms | |||||
| Font-face | |||||
| Media-queries |
Of course, there are still many properties of CSS3 that are not so widely supported. Although Microsoft’s IE9 supports CSS3, they are still playing catch-up since they do not support many of the properties other browsers have done for some time. They appear to be working on this however, with many more properties set to be supported in IE10. Here is a table showing varying levels of support for other CSS3 properties.
|
|
|
|
|
|
| Version | 8 | 5.1 | 15 | 9 | 11.5 |
| Animations | |||||
| Transitions | |||||
| Reflections | |||||
| 3D Transforms | |||||
| Border-image | |||||
| Text-shadow |
HTML5 Support
HTML5 is in much the same situation as CSS3 in that it is still in development and therefore has varying levels of support across browsers. Much like with CSS3, there are features that are universally supported, such as Canvas, while other features lack virtually any support at all.
Here is the browser support for a range of HTML5 elements.
|
|
|
|
|
|
| Version | 8 | 5.1 | 15 | 9 | 11.5 |
| Canvas | |||||
| SVG | |||||
| Web Storage | |||||
| Drag & Drop | |||||
| Touch | |||||
| Web Workers | |||||
| Geo Location | |||||
| Web Sockets | |||||
| IndexDB |
HTML5 Audio and Video
HTML5 audio and video was highly anticipated and has been much discussed since its announcement. One of HTML5 video’s staunchest supporters has been Apple, preparing to ditch support for Flash and make it the video player of choice on all of their mobile devices. It would appear that Apple has got their way, as Adobe very recently announced that it is stopping the development of Flash for mobile devices. This move paves the way for the further support and development of HTML5 video.
Youtube has experimented with HTML5 Video
Some large video-serving websites have also experimented with HTML5 video including YouTube, Vimeo and DailyMotion. It will be a while however before a full switch is made on any large video sharing website. One of the key aspects holding back the move to HTML5 has been the lack of standard audio and video codecs. Currently there are no audio or video codecs that are supported by all five modern browsers.
HTML5 Forms
HTML5 forms offer some exciting features such as validation and new input types. The support for these new form features seems to vary quite a lot between browsers. Opera is leading the way by quite a distance, supporting nearly every new feature, while IE9 supports almost none. It is worth noting however that many of these new features degrade gracefully in older browsers.
There were thirteen new input types introduced into HTML5 forms, unfortunately currently only around five have significant support amongst browsers.
|
|
|
|
|
|
| Version | 8 | 5.1 | 15 | 9 | 11.5 |
| Search | |||||
| Phone | |||||
| URL | |||||
| Range | |||||
There were also many new form attributes introduced, which seem to be fairing much better in terms of support. Here is the support for just some of the new form attributes.
|
|
|
|
|
|
| Version | 8 | 5.1 | 15 | 9 | 11.5 |
| Placeholder | |||||
| Autofocus | |||||
| Autocomplete | |||||
| List | |||||
| Required |
Form Validation
HTML5 form validation is a very exciting feature. Traditionally client-side form validation has been implemented using Javascript, which can cause issues if the user has Javascript disabled. HTML5 form validation has the potential to replace Javascript validation in modern browsers when it is fully operational.
Unfortunately, it is not at this stage yet. Recent versions of Chrome, Opera and Firefox all support HTML5 form validation. Safari 5 on Windows also supports HTML5 validation, but somewhat strangely, it does not on OSX.
Mobile Browsers
Throughout this article we’ve mainly focused on desktop browsers, but, as we all know, mobile browsing is gaining serious traction. For that reason it’s worthwhile taking a look at mobile browser trends and developments too.
The above graph shows mobile browser usage statistics for this month (November 2011) so far. It would appear that there is no single dominant browser, with Android, iPhone and the mobile version of Opera each having a very similar market share. Nokia and Blackberry browsers also have a considerable amount of users.
For the purposes of this article, we are going to focus on the top three mobile browsers and give an overview of each.
Android
With more mobile devices choosing to use the Android operating system, the Android browser has been slowly increasing its market share over the past year.
The default Android browser is based on the WebKit engine, the same engine used by both Chrome and Safari. As you would expect, it has pretty good support for CSS3 and HTML5 from version 2.0 onwards. Version 4.0 of Android (Ice Cream Sandwich) has included support for features such as SVG and CSS3 3D Transforms on smartphone browsers.
It has been hinted that Google will replace the built-in Android web browser with their increasingly popular Chrome browser in future versions of the Android OS.
iPhone
One of the iPhone’s greatest features has been the browsing experience that Safari for iOS offers. Safari on iOS 5 seems to be no different either, with features such as Reading List, Reader and faster web browsing.
Safari on iOS5 offers some of the best support for HTML5 and CSS3 currently available. The latest version has improved support for HTML5 features such as Web Workers and new input types.
We have already covered HTML5 forms earlier in this article, but it is on the iPhone where these new form features really shine. The iPhone actually changes the on-screen keyboard relative to the type of input. You can expect the same from the new input types supported including date, month and time.
Opera Mobile
While Opera might not be doing too brilliantly in the realm of desktop browsers, it’s making up for this in its mobile form. One of the reasons Opera might be doing so well on mobiles is that it’s really quick at loading web pages. Opera uses a feature named Turbo, which first compresses websites on a server before delivering them to your phone, resulting in much faster loading speeds.
Opera mobile is currently at version 11 and just like its desktop counterpart, and it offers excellent CSS3 and HTML5 support.
Conclusion
As mentioned at the start of this article, browser developments can be tough to keep up with, especially with the new shorter release cycles. I hope that this article provided you with an up-to-date picture of the situation as it is right now. I also hope that it will prove a useful reference point in the future. Thanks for reading :)