SVG Fallback

Off Topic
1

I wasn’t going to post this but Ernie (possibly unintentionally) convinced me otherwise.

I use Sass/Compass to streamline my CSS work and this gem allows you to effortlessly provide svg with both low- and high-res png fallbacks for browsers that don’t support svg, all in one fell swoop. No, you don’t need to use Sass (but really, why wouldn’t you?). The below code can be added wherever you want to use a svg background-image.

The one dependency it does require is the Modernizr script. Why? Because Modernizr feature-detects svg support in browsers and will add a class of .no-svg to the page which is necessary for the fallback CSS (notice the .no-svg in the below code).

There are a lot of ways to tackle this but until every browser supports svg this method is a damn near ideal alternative solution.

selectorName {
 background-image: url(../path/to/image.svg); }
 .no-svg selectorName {
   background-image: url(../path/to/low/res/image.png); }
   @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
     .no-svg selectorName {
       background-image: url(../path/to/high/res/email@hidden); } }

Todd
http://xiiro.com

Go Sass!

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options