Le 5 août 2014 à 22:00, Tom Livingston <tom...@gmail.com> a écrit :
> was having a discussion in the comments of an article about using > svg as a background-image in CSS, and using a png as fallback. I was > writing it like this: > > background-image: image.png; > background-image: image.svg; > > But this fails in IE8 (and presumably in other non-svg-supporting browsers). > > My thought was that it would work like background-color does. > > Sample page: > http://tomliv.com/nick-test/ > > Just trying to learn here. Why does the cascade not work in both cases? The cascade doesn't work because the older browsers understand your syntax in the second rule, but threat the image as an unsupported/invalid format. Solutions: option 1: use the full background shorthand from the css3 module for your SVG image (con, anything older than Firefox 17, iirc, fails, falls back to the PNG image). option 2: wrap your SVG rule in a MQ: @media screen and (-webkit-min-device-pixel-ratio: 1),/* etc*/ { SVG stuff here } Modernizr has a decent detection, con it fails for Firefox 3.6 (no support for SVG background, but supports SVG as <img> which is what moderniser tests). Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [css-d@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/
