A CSS3 Reality Check…
I find myself contemplating if I will ever be able to take advantage of the improvements that will be offered by CSS3, that is, when it becomes official. Things like multiple background images, border rounding, shadow effects, transparent background colors. You can read about these, and I suggest that you do, there are several articles and blogs available so I won’t repeat the information here. If you’re interested you can try 10 CSS3 Features You Will Love and Want to Use or 5 CSS3 Design Enhancements That You Can Use Today.
The problem is that people continue to use outdated browsers that do not support new enhancements in the field and I do not see this changing in the near future, especially at the rate that new versions of the various browsers come out and the apparent reluctance of users to install these new versions.
There are various ways that, as a Web developer, I can work around this issue, or attitudes that I can take:
- Continue to produce the same CSS (and HTML) that I know works in all the browsers, catering to the oldest.
- Create different CSS (and HTML) for each of the different browsers so that the site looks the same for everyone (or at least as close as humanly possible.)
- Provide “Enhancements” that will be displayed by the newer browses only.
- Forget about the older browsers and concentrate on making the site look its best in the newer browsers that support CSS3
Lets first take a look at item 3 from the above list.
In my experience, most clients do not like the idea of their site looking different depending on what browser the visitor is using:
Client: I just looked at our new site and it doesn’t look like the design we approved.
Developer: What browser are you using?
Client: IE6
Developer: IE6 does not support some of the features that we used to create the site. We created it so that it would look as good as possible in IE6 and enhancements will be seen by visitors that use newer browsers.
Client: It has to look like the design is IE6 too.
Developer: We’ve looked at your visitor statistics and only 2% of your visitors use IE6.
(of course, the clients IP has been blocked in analytics, so this is only external traffic).
Client: Everyone here at the office uses IE6.
Developer: Can you upgrade to a newer version of IE or use FireFox?
Client: No, the company has made it a policy that everyone uses IE6 and we use an older operating system on our computers because of a special application we use that will only run on Windows 98.
Developer: Is glad that he’s on the phone and the client cannot see his eyes rolling up into his head as he tries to figure out what to say.
Client: Make it look right in IE6.
To be honest, I can’t argue with the idea. It is their site and they want it to look its best for everyone. On the other hand, I do feel that clients should do more research into who is visiting their site and what browsers they are using to do so. This information is usually readily available through the analytics tracking that is most likely already installed on their site. CSS3 will offer some great enhancements that developers can’t take advantage of if they must cater to older browsers while at the same time trying to keep the cost of producing the site down.
Now for Item 4
As you can imagine, this goes over even worse than number 3 for similar reasons, although it is the choice I would pick. In this developer’s humble opinion, the way to make the world update their browsers is to make the web look bad if they don’t. The simple act of upgrading your browser when a new version is available would make my life much easier. I could then forget about making sure I look at every available browser reducing both my workload and the cost of producing a Web site, which in turn would reduce the clients’ costs of having a new site created.
On to Item 2, creating different markup and CSS for the different browsers
Many articles make this seem extremely easy to accomplish, just provide a little CSS magic and bing, bang, boom, the site looks the same for everyone. This is not always the case. Lets take one example improvement that CSS3 is reported to offer; multiple border images.
What multiples border images is supposed to allow is for the developer to specify up to 8 images that will be used for the border of an element (4 corners plus 4 sides). Currently to create such borders a developer must add non-semantic elements to create the effect, in some cases as many as 12 extra elements depending on the complexity and what type of images are used, GIF, JPG, or PNG. To make things even more complicated, if we are using PNGs for their transparency, we must also provide GIF or JPG alternatives because IE6 does not support transparent PNGs.
Yes, this one simple feature would make my life much, much easier.
Now, let’s look at the reality. Since I must make the site look the same in all browsers I must provide not only different CSS, but different HTML markup as well; one version with all the extra design elements for older browsers and one cleaner, simpler version for newer browsers, in essence, creating two completely different layouts for the site. Then I must find a way to detect what browser the visitor is using and provide the correct layout.
Two different layouts is not itself a bad idea. The problem is that this will likely double (or triple) the cost of producing the site as well as increase the amount that the client will need to spend to have such a site created, and that last part is the main sticking point. In the current market, charging twice what another company charges is a sure way to loose business.
That leaves us with…
- Continue to produce the same CSS and (HTML) that I know works in all the browsers, catering to the oldest.
The truth of the matter, the reality of the matter, is, that until all the old browsers that do not support CSS3 are used very little and the ones that do support it dominate the market I will need to continue to create sites the same way that I am currently creating them and I will likely be retired before this changes. So, the answer to my own question is that I might be able to dream about how much easier my life would be with CSS3, but I probably won’t ever see it happen.
Unless of course we find a way to get people to update their browsers… It’s really all up to you. You can help to make the Web a better looking, more efficient place with the simply act of updating your browser when a new version is available. You’ll also help to make my dream a reality and maybe I’ll get to use the great new features in-store for the Web when browsers implement all of the CSS3 recommendations.
A CSS3 Reality Check…
I find myself contemplating if I will ever be able to take advantage of the improvements that will be offered by CSS3 [http://www.w3.org/TR/css3-roadmap/], that is, when it becomes official. Things like multiple background images, border rounding, shadow effects, transparent background colors. You can read about these, and I suggest that you do, there are several articles and blogs available so I won’t repeat the information here. If you’re interested you can try 10 CSS3 Features You Will Love and Want to Use [http://www.tuttoaster.com/css3-features-you-will-love/] or 5 CSS3 Design Enhancements That You Can Use Today [http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/].
The problem is that people continue to use outdated browsers that do not support new enhancements in the field and I do not see this changing in the near future, especially at the rate that new versions of the various browsers come out and the apparent reluctance of users to install these new versions.
There are various ways that, as a Web developer, I can work around this issue, or attitudes that I can take:
1) Continue to produce the same CSS (and HTML) that I know works in all the browsers, catering to the oldest.
2) Create different CSS (and HTML) for each of the different browsers so that the site looks the same for everyone (or at least as close as humanly possible.)
3) Provide “Enhancements” that will be displayed by the newer browses only.
4) Forget about the older browsers and concentrate on making the site look its best in the newer browsers that support CSS3
Lets first take a look at item 3 from the above list.
In my experience, most clients do not like the idea of their site looking different depending on what browser the visitor is using:
Client: I just looked at our new site and it doesn’t look like the design we approved.
Developer: What browser are you using?
Client: IE6
Developer: IE6 does not support some of the features that we used to create the site. We created it so that it would look as good as possible in IE6 and enhancements will be seen by visitors that use newer browsers.
Client: It has to look like the design is IE6 too.
Developer: We’ve looked at your visitor statistics and only 2% of your visitors use IE6.
(of course, the clients IP has been blocked in analytics, so this is only external traffic).
Client: Everyone here at the office uses IE6.
Developer: Can you upgrade to a newer version of IE or use FireFox?
Client: No, the company has made it a policy that everyone uses IE6 and we use an older operating system on our computers because of a special application we use that will only run on Windows 98.
Developer: Is glad that he’s on the phone and the client cannot see his eyes rolling up into his head as he tries to figure out what to say.
Client: Make it look right in IE6.
To be honest, I can’t argue with the idea. It is their site and they want it to look its best for everyone. On the other hand, I do feel that clients should do more research into who is visiting their site and what browsers they are using to do so. This information is usually readily available through the analytics tracking that is most likely already installed on their site. CSS3 will offer some great enhancements that developers can’t take advantage of if they must cater to older browsers while at the same time trying to keep the cost of producing the site down.
Now for Item 4
As you can imagine, this goes over even worse than number 3 for similar reasons, although it is the choice I would pick. In this developer’s humble opinion, the way to make the world update their browsers is to make the web look bad if they don’t. The simple act of upgrading your browser when a new version is available would make my life much easier. I could then forget about making sure I look at every available browser reducing both my workload and the cost of producing a Web site, which in turn would reduce the clients’ costs of having a new site created.
On to Item 2, creating different markup and CSS for the different browsers
Many articles make this seem extremely easy to accomplish, just provide a little CSS magic and bing, bang, boom, the site looks the same for everyone. This is not always the case. Lets take one example improvement that CSS3 is reported to offer; multiple border images.
What multiples border images is supposed to allow is for the developer to specify up to 8 images that will be used for the border of an element (4 corners plus 4 sides). Currently to create such borders a developer must add non-semantic elements to create the effect, in some cases as many as 12 extra elements depending on the complexity and what type of images are used, GIF, JPG, or PNG. To make things even more complicated, if we are using PNGs for their transparency, we must also provide GIF or JPG alternatives because IE6 does not support transparent PNGs.
Yes, this one simple feature would make my life much, much easier.
Now, let’s look at the reality. Since I must make the site look the same in all browsers I must provide not only different CSS, but different HTML markup as well; one version with all the extra design elements for older browsers and one cleaner, simpler version for newer browsers, in essence, creating two completely different layouts for the site. Then I must find a way to detect what browser the visitor is using and provide the correct layout.
Two different layouts is not itself a bad idea. The problem is that this will likely double (or triple) the cost of producing the site as well as increase the amount that the client will need to spend to have such a site created, and that last part is the main sticking point. In the current market, charging twice what another company charges is a sure way to loose business.
That leaves us with…
1) Continue to produce the same CSS and (HTML) that I know works in all the browsers, catering to the oldest.
The truth of the matter, the reality of the matter, is, that until all the old browsers that do not support CSS3 are used very little and the ones that do support it dominate the market I will need to continue to create sites the same way that I am currently creating them and I will likely be retired before this changes. So, the answer to my own question is that I might be able to dream about how much easier my life would be with CSS3, but I probably won’t ever see it happen.
Unless of course we find a way to get people to update their browsers… It’s really all up to you. You can help to make the Web a better looking, more efficient place with the simply act of updating your browser when a new version is available. You’ll also help to make my dream a reality and maybe I’ll get to use the great new features in-store for the Web when browsers implement all of the CSS3 recommendations.