CSS3 has some really nice features – animation, gradients and rounded corners just to name a few. But as with most of this web stuff, you’re going to need an up to date browser like Chrome to really appreciate it. Fortunately older browsers will typically just ignore the newer stuff they don’t understand which makes it possible to deliver a degraded experience.
This afternoon I had a quick bash at creating the visuals for a progress type control. I wanted to take advantage of those nice CSS3 features in Chrome, but still have the control work in IE. Turns out, it’s wasn’t too hard.
Progress bar control in Chrome
Progress bar in IE
All the code and a running example showing the animation can be found on jsfiddle.net. The CSS does look a little messy as browser vendors put newer CSS features behind a prefix while they’re being standardized. Using a CSS compilation tool like Less can make this a bit more bearable.
Pingback: xhtml css templates – CSS degrading gracefully | David Padbury | XHTML CSS - Style sheet and html programming tutorial and guides
Pingback: CSS degrading gracefully