I was playing a little with SVG as background-image, which offer a very promising alternative to .png images in the context of high resolution screens and full page zoom (the images remain very crisp, independently of the device resolution or zoom level and file size is much smaller than png files). But I hit a roadblock…. How to display fallback images for those browsers that don't support SVG – Gecko 1.9.1/1.9.2 appears to be the main problem kid here.
Test case is here: http://dev.l-c-n.com/_temp/res-5-svg.html. The test case works fine in Safari 4+, Mobile Safari, Chrome, Firefox 4b, Opera 10+ (and I think IE9 should play along). I use a media query to isolate a little the oldies out there (IE 8 and older mostly, they should see a reddish png file). Gecko 1.9.1 & 1.9.2 are missing a background image unfortunately. In the test case, I attempted to reset the background-image property, but those 2 browsers don't ignore it completely (they see valid syntax that overrides the previous background declaration). I can think of a giant ugly hack to partly solve this - something like: @media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min--moz-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) {} That would cover Gecko 2.0 and WebKit. IE 9 can be dealt with one way or another (using the full CSS 3 background shorthand probably). But now Opera is left in the cold. I don't particularly care for Opera desktop (much less than 1% on most of my sites - the fallback image will work just fine) but Opera on mobile devices is quite visible - and handles SVG just fine. Anyone with a cleaner suggestion ? Bonus cookie for the most minimal code possible. Philippe --- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
