Re: ".svg" as background image using css

On Sat, 17 Oct 2009 13:04:43 +0200, Helder Magalhães  
<helder.magalhaes@gmail.com> wrote:

...
> I recall a (very ancient) way to set the pointer cursor in an IE4- [1]
> friendly way, something like:
>
>   element{
>     /* for IE4 and before */
>     cursor:hand;
>     /* standard value */
>     cursor:pointer;
>   }
>
> As IE4 wouldn't recognize the second value, it would use the first,
> non-standard, one.

Right, that's a bit different though, it's not using the same keywords (in  
other words it's a different syntax).

> So, following Thiago's example, I'd say this would be accomplished
> through something like:
>
>     div{
>       /* fall-back for UA without support for SVG as CSS background  
> image */
>       background-image: url('bg.png');
>       /* UA with support for SVG as CSS background image */
>       background-image: url('bg.svg');
>     }

The last url() value is using valid syntax, and thus won't lead to that  
being discarded by the UA per the CSS parsing rules. That an image format  
isn't supported probably won't be discovered until the UA fetches the  
resource, or when it tries to render it.

> Therefore I'd way that an UA would ignore the second declaration, not
> only if it doesn't supports it but also if the SVG file could not be
> located.

Nope, doesn't work.

> I haven't checked for UA status on this approach, specially from an
> optimization point of view (I'd say a UA would try to optimize by
> attempting to use the overridden (second) "background-image"
> declaration before falling back and even downloading the raster (PNG)
> version.

We'd need something like the image() syntax[1], or a format() specifier  
that could be appended to existing url():s to give the UA the option of  
ignoring unsupported formats early on.

That said, it's still possible to do feature-detection in javascript and  
add the corresponding CSS based on that[2]. Not as elegant as having  
fallbacks in the CSS syntax maybe, but it works today (as long as  
javascript is enabled).

Cheers
/Erik

[1] http://dev.w3.org/csswg/css3-images/
[2] http://my.opera.com/Fyrd/blog/svg-image-and-background-image-replacer

-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Tuesday, 20 October 2009 13:05:05 UTC