Usually when I attend @media (that is, on two previous occasions) I write a follow-up blog post on what I saw there. Well I attended this year, and I’ve written the post, but it’s on the blog of my employer, Preloaded: HTML5, Mobile, and UCD: what we saw at @media.
My last post was about using SVG values for the background-image property, and I pointed out one big problem with the technique:
The drawback of this is that it’s not ready for use just yet — browsers that don’t support SVG in
background-imagewill not provide any fallback, even if you supply anotherbackground-imagevalue; so in non-supporting browsers, no image at all will be displayed.
This was annoying me a little, and I couldn’t find any workarounds that didn’t use JavaScript. However, after a bit of head-scratching I’ve come up with a way to get around it.
While having a look through the list of features for developers planned for Firefox 4 earlier today, I noticed this:
You can now use SVG with the
imgelement, as well as the background image in CSS.
I know you can already use SVG in background-image with Safari, Chrome and Opera, and this, coupled with Internet Explorer’s push towards SVG and the strong chance this will be available in IE9, made me decide to take a closer look.
For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation — I’ll need to confirm that.
One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.
[#] 3 Comments . More Asides.