Re: ".svg" as background image using css

Hi everyone,


> While no work is needed for that particular example, the CSS WG is working
> on a specification to allow the author to specify fallback values (such as a
> PNG), in case SVG is not supported as a background-image, or the file cannot
> be located.

Thinking a bit about this for a bit, I thought this was already
working (I haven't performed any tests, though). If memory doesn't
fail, unrecognized CSS declarations should be ignored by UAs, so
providing a fall-back first should work...?

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.

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');
    }

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.

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.


Regards,
 Helder


[1] https://developer.mozilla.org/en/CSS/cursor#Browser_compatibility

Received on Saturday, 17 October 2009 11:05:37 UTC