The success of a website depends largely on the full-blown user experience that we offer our visitors. The actual impact depends on many factors. Do these pages load fast? Are they easily readable? Is there a clear navigation system? Is the site consistent in structure and design? And does that design meet the expectations site users have about the company, product or service?
New CSS3 features can enhance these factors and give website users a richer experience whilst at the same time reducing development time significantly.
In this article you’ll discover the techniques we can use today and the reasons why we should do so.
But let me start by giving you a short introduction into the philosophy behind progressive enrichment.
What is progressive enrichment?
With progressive enrichment we can visually reward the latest and best web browsers via advanced new techniques and at the same time provide a fallback for older, less advanced browsers.
With the latest installment of CSS (CSS3) a lot of new functionalities are added to the style sheet language. This time however the W3C uses a modular approach. So all these extra functionalities are translated into separate modules, each with their own state of completion. The advantage is that browser manufacturers can now implement these new features gradually.
Does a website need to look the same in every browser/device?
The short answer is no.
For some people it might look like a disadvantage that web pages look different across platforms/browsers/devices. But this does not mean that sites should look crappy or unusable in less advanced browsers. The opposite is quite true. Web developers should seriously consider providing a fallback so the positioning, readability, usability and functionality remain intact. Instead of punishing these users, we reward the ones that use modern browsers with a richer experience.
Below are some great examples of progressive enrichment. Although the differences may appear marginal, without the use of CSS3 adding those finishing touches would result in a lot of work.
Example 1 – IE8 – CSS-TRICKS
Url: css-tricks.com
Example 1 - Firefox 7 – CSS-TRICKS
Url: css-tricks.com
Example 2 – IE8 –Twitter
Url: twitter.com
Example 1 - Firefox 7 – CSS-TRICKS
Url: twitter.com
Which techniques can we use today?
With each iteration of their products browser manufacturers are working hard to add new features. Apple is leading the dance with their Webkit based Safari browser, closely followed by Google's Chrome (also Webkit) and Mozilla's Firefox (Gecko). Opera is making its move to keep up with the pack.
After releasing Internet Explorer 6 and thus winning the first browser wars, Microsoft neglected their browser platform for years. It took Microsoft more than 5 years and a serious drop in market share to complete IE7. Since version 9 (released in 2011) Microsoft can more or less compete with their competitors. Safari 4+, Chrome 10+, Firefox 3.6+, Opera 10+ and Internet Explorer 9+ we consider modern browsers. All lower versions (including IE 7-8) are less capable browsers.
The table below shows the advanced CSS techniques that are already supported by all modern browsers. Included is the fallback users with less capable browsers will see:
| Border-radius |
 |
Description:
This property allows you to add rounded borders to elements. |
Fallback:
No rounded corners |
| Box-shadow |
 |
Description:
The box-shadow property attaches one or more drop-shadows to the box. |
Fallback:
No shadows |
| Rgba colors |
 |
Description:
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. |
Fallback:
No transparency |
| Multiple backgrounds |
|
Description:
Set multiple background images and specify their positions. |
Fallback:
No images |
| Media queries |
 |
Description:
Change styles based on the width/height of specific devices or the width/height of the browser without changing the content (HTML) |
Fallback:
No adaption to the dimensions of the browser viewport |
| Transforms |
|
Description:
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc. elements.
2D transformations are supported by IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. |
Fallback:
No transforms |
| @font-face |
 |
Description:
With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts or use Flash/Javascript based workarounds. |
Fallback:
No fallback needed: works in all browsers (modern and less capable ones) |
The table below shows the advanced CSS techniques that are supported by all modern browsers except for Internet Explorer 9. Included is the fallback users with less capable browsers will see:
| Text-shadow |
 |
Description:
This property allows you to add shadow to text. |
Fallback:
No text shadow |
| Border-image |
 |
Description:
Use images as borders |
Fallback:
Standard CSS borders |
| Transitions |
| temp |
Description:
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. |
Fallback:
No transitions |
| Multiple columns |
 |
Description:
Magazine style text rendering in multiple columns |
Fallback:
One column |
| Gradients |
 |
Description:
Create gradients without using images |
Fallback:
For IE browsers there's a proprietary technique to use gradients |
Ok so now we know modern browsers support all or most of these features, we can take a look at the latest browser stats.
| March 2011 | October 2011 |
| Advanced CSS support |
47.58% |
63.81% |
| No advanced CSS support |
49.50% |
30.84% |
| Other |
2.92% |
5.35% |
The table above gives us the browser usage statistics for March 2011 and October 2011. In six months, the browser support increased by 16%. With the declining popularity of IE7 and IE8 in favor of IE9, the percentage will keep increasing at a fast rate. So at the moment of writing this article the majority (63.81%) of Belgian surfers can enjoy our progressive enriched web applications.
Less work means lower costs!
Rounded corners, shadows, fonts and transparency has become much easier and faster to implement. Prior to the launch of CSS3, adding these features to a website and making them cross-browser was hard, tedious work. Now web developers have access to these new techniques in their toolbox, this makes their job much more enjoyable.
Benefits include:
- Faster development, less development costs
- Style sheets are more flexible
Changes are made in seconds, not minutes (or even hours!)
- Maintaining the code is a lot easier
- Better for SEO by reducing the ratio of code to text
- Pages load faster by reducing code, images and server requests
- No typographic constraints
- Multilingual websites are easier to develop and maintain
Conclusion
We can give 62.36% (October 2011) of users a richer experience with CSS3 progressive enrichment techniques. This percentage will keep growing fast during the following months and years. At the same time we can significantly reduce the development time and produce faster web applications.
So most of the users get a better user experience, the others gets a nice fallback. Plus: the client pays less and web developers may find better ways to spend their time. Everybody wins!