Graceful Degradation
It used to be that you worked hard to get a web site to look the same in all browsers, and if that was not possible, every effort was made to achieve that end, or to make the failure appear as graceful as possible, so that even older browsers could have well designed web pages. For the standards based community, this required a lot of extra effort on the part of Internet Explorer 6.5.
The Legacy of Internet Explorer 6.5
No one here uses IE 6.5, but there are a host of incompatibilities that can make life for the web developer a living nightmare, and the following depiction of what a chore it used to be is accurate.
Progressive Enhancement:
This is no longer the case. Progressive enhancement has replaced graceful degradation. The attitude is that the user should upgrade to the latest browser, or eat dog food.
The strategy is the reverse of graceful degradation. A document is created and styled for the latest browser, and as long as that basic document is readable on older browsers, that’s good enough.
Internet Explorer 6.5 no longer holds web design hostage, partly because few people use it anymore, and I must say, it feels quite liberating. Internet Explorer 10 is out and standards compliant, unfortunately, it only works in windows 7 or 8, meaning that the many people still using a previous Windows environment continue to use outdated browsers.
Progressive Enhancement is about using the new HTML5 and CSS3 goodness to create web sites that, when displayed on non-compliant browsers, break down, sometimes significantly, but such that the information is still conveyed, so that what is important is still communicated. The following two pictures demonstrate this difference from http://adactio.com/
Browser Support
What is the current status of browser support for HTML5 and CSS3? The answer is a moving target: can I use is a website that is dedicated to continually updating this information. Here it checks the CSS3 color module:
All of the properties covered today are supported by current browsers. They will not work in Internet Explorer 6, 7 or 8. Here is a list with links to the specifications.
- box-sizing
- border-radius
- box-shadow
- RGBA Colors
- HSLA Colors
- Multiple Backgrounds
- background-clip
- background-origin
- background-size
- Transforms
- Media Queries
- text-shadow
- border-image
- outline-offset
- Transitions
Vendor Prefixes
As you can imagine, there needs to be a mechanism to facilitate the development of new properties as they are introduced. This has led to vendor specific version of properties that are not yet stable. Those properties can be accessed by using a vendor prefix, with the idea that eventually, the prefix can be dropped as the kinks are worked out.
Each of the major browsers has its own prefix:
- -webkit- ( Webkit/ Safari/ Chrome)
- -moz- ( Firefox)
- -ms- ( Internet Explorer)
- -o- ( Opera)
The more experimental properties are prefaced with a prefix. To target all of the browsers, the declaration has to be written five times, one for each browser and the last one without, for when the property achieves acceptance.
This started out as an attempt to avoid the proprietary wars experience between IE and Netscape, but the ubiquitousness of mobile browsing upended the process as developers were writing only for the webkit engine. This left other browsers out in the cold, and they started to read webkit prefixes to render pages as a result.
Even Opera dumped its own rendering engine for Safari.
Oh Well.
That is not the end of the story. Google is introducing its own “blink” rendering engine. The Google / Apple rivalry has erupted at the core of the browser rendering engine. This will be interesting to watch. Google says competition is good, and that Apple’s rendering pipeline is not modern enough.
Opera enthusiastically jumped on board.
Mozilla is creating a new rendering engine called This entry was posted in 09 CSS3 1 by Onno. Bookmark the permalink.