CSS3 graceful degredation


1. Use @font-face with a @font-face generator (e.g. from font squirrel) that includes EOT (to target IE 6 – 8), WOFF (for IE9+, FF3.6+, Chrome 5+) and SVG (for iOS devices before version 4.2.) and TrueType (for everything else)

2. http://www.modernizr.com/ – adds feature capability as classes to the HTML tag.

3. http://selectivizr.com/ – adds pseudo classes for IE6 & 7

4. Webkit doesn’t do inset shadows with round corners, but adding normal drop shadow in a minus direction may give a good equivalent. (corrected in latest version)

5. For IE it’s difficult to add round corners and drop shadows.

There’s a good tutorial from http://www.w3.org/Style/Examples/007/roundshadow.en.html to add drop shadows without extra markup. Good only for IE8.

In conjunction with http://selectivizr.com/ this can allow us to even add round corners in IE6 & 7. (also good for zebra table styling, IE6 hover, targeting a variety of different inputs)

or use jQuery:

$('blockquote:after').addClass(&quot;boom&quot;); <br />
$('blockquote').after(' &lt;img src=&quot;/images/external.png&quot; alt=&quot;external link&quot;/&gt;'); <br />
$(&quot;img.dropshadow&quot;).wrap(&quot;&lt;div class='wrap1'&gt;&lt;div class='wrap2'&gt;&quot; + &quot;&lt;div class='wrap3'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&quot;);

Or use curvy corners: http://blue-anvil.com/jquerycurvycorners/test.html

6. Gradient filters
- e.g.
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#c31026′, EndColorStr=’#5f0004′);

for IE – only work on IE6 & 7 if a height is set. (If you cannot use a height then set a background image – you will need background images for gradients in older versions of Firefox and Safari.)

7. Combining background images and gradients:

Opera cannot combine background images and gradients, but purports to support css-gradiesnts. Therefore the background image needs to be positioned using a separate element e.g. a span inside a button, – if for example you want just the gradient to reverse on hover, or you need to serve different css to opera browsers. This is the same for IE (including IE9)

8. Test in:

Firefox 3.6.13
Firefox 3.0 (No support for CSS3 round corners & gradients)
Firefox 2.0 (No support for CSS3 round corners & gradients)

IE 8 – (No support for CSS3 round corners)
IE 7 – (No support for CSS3 round corners & gradients)
IE 6 – (Fully functional, No support for PNG opacity, CSS3)

Safari 5 (5.0.2)
Safari 4 (4.0.5)
Safari 3 (3.2.3)

Chrome 8

Opera 11
Opera 10 (10.6.3) (No support for CSS3 round corners & gradients)

Add a comment

Leave a Comment

Your email address will not be published.