Introduction
CSS has been known for incompatiblity with certain browsers, particularly Internet Explorer, which for some reason refuses to move with the times.
This article discusses how mobiles have managed to successfully implement CSS better than desktop browsers.
The problem
Internet Explorer 5.5 to version 8 moved very slowly in terms of CSS support and lacked certain CSS features such as box-shadow
and border-radius
.
To shed light on the situation however, mobile development is implemented much faster. For instance, the table
and table-cell
properties were implemented in almost all smartphones.
The reason for full implementations on smartphone browsers is because updates are forced to these devices that means that browsers are always up to date. With Windows 7 for instance, Internet Explorer 8 is installed by default. Less computer savvy users are less likely to bother updating.
Another major reason for this is because the web has become far more crucial on mobile devices, even more so than any app.
Examples of bad implementations that work well on mobile
I will admit, the primary focus of this site is desktop users. This website has been designed for the desktop user. Although it works just the same on smartphone and tablet devices, the original design is for desktop browsers. That does not mean that it has not been mobile optimised (as it really has), but it's focus is on desktop users.
Why mobile is easier
I'll admit that building the desktop site was much more difficult than the mobile. That's because of browser incompatibilities, particularly Internet Explorer 7 and 8 (let's not even talk about IE 6). Internet Explorer 8 was released in 2009, prior to the almighty Windows 7. It's reasonable to say that IE 8 was out-of-date on the release day with certain elements of the web.
Unfortunately, this makes it difficult to target people using such an outdated browser. I target them by placing a message at the bottom of the page using a conditional comment to inform them that the website works better with a different browser. There are still people out there who use Internet Explorer 8 because it's the best supported browser on their operating system and because they don't know how to change.
My first smartphone was way back in late 2005, an O2 XDA Exec. I used to only get 2MB of data every month, and so I never browsed the web on the cellular data but on WiFi because websites around then would take almost all of the 2MB straight away. It amazes me still that phones used to be this way but that was the case before the iPhone was released in 2007. It indeed changed it all.
You may ask how did it change everything? The very fact that the iPhone on release offered unlimited data allowance meant that people could finally browse the web. It also had a very well designed browser, unlike Internet Explorer 6 Mobile, which lacked a lot of compatibility.
The iPhone pushed and pushed CSS compatibility boundaries and forced Internet Explorer 9 to play catch up on all the missed CSS features for desktop. But that still leaves Internet Explorer 6, 7, 8 out of date.
This is the problem, you see the majority of desktop browsers are fine because all versions of Firefox and Chrome work all the way back to Windows XP and Mac OS X adoption rates show that approximately 2.6 million Mac users are using the next to come Mac OS X, Yosemite (3.3%) whilst more than 60% are using the current version and only a tiny fraction of users are stil using a version from 2012 or before. Even then, the majority of CSS features have been well supported in WebKit for a lot longer than Trident.
The truth is, we cannot rely on Microsoft to bring features to their browsers.