With the release of IE9 and Firefox 4 all major browsers are going to support using SVG in the img element or as a CSS background image, which is great news as SVG images are good for high definition, scalable websites. I’ve written a couple of posts recently about using SVG with the background-image property, and how to cope with browsers that don’t support it. The method I came up with works, but is far from elegant; for one thing, it doesn’t allow for transparency.
Another approach we can take to the problem is to use JavaScript to detect SVG support. Alexis Deveria wrote a script which detects if your browser supports SVG and, if not, replace the images with PNG. It’s a good script, but I wondered if there was an alternative.
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.
2008 was pretty exciting on the web, wasn’t it? The continuing rise of social media, mobile internet, APIs, frameworks… it’s getting harder to keep up with it all.
I won’t be so bold as to make any specific predictions about the year ahead — more of the same is my best guess! — but here are a few articles I’ve read recently which have an eye on the future.
One of the hardest things about Microformats is explaining their benefits to people. You can say “It’s a standardised format of marking-up content, which is both human and machine readable!” until you’re blue in the face, but until you can show people a practical benefit they usually remain unmoved.
Luckily there are a few tools out there which will help you show off the benefits of using Microformats, and involve little work from you.
While Firefox 3 is a really fast & usable browser, I was a little disappointed by the (comparative) lack of really new features in the rendering engine; that’s not to say there aren’t any, as there are plenty, but that Safari 3.1 and Opera 9.5 have set the bar very high in their latest iterations.
So that’s why I was delighted to hear about the 3.1 release of my favourite browser, and doubly delighted when I found out which features the team are planning to work on for inclusion in it:
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