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.
We, as website makers, quite often advise our clients to avoid generic link text (read more,click here, etc.), and explain that more verbose descriptions help give context to users with screen readers. But using semantic link descriptions actually helps everyone.
I recently read Peter Morville’s fantastic book, Ambient Findability, which defined really well the motivation to use semantic descriptions for links: they give the target page aboutness.
Last month the W3C released a working draft of the File API, which defines the basic representations for files, lists of files, errors raised by access to files, and programmatic ways to read files
. The Firefox team have already implemented much of it, and have released a series of impressive demos on hacks.mozilla.org, which you can see if you have a recent beta of Firefox 3.6 (or a nightly trunk build).
The four demos shown to date display different (although related) aspects of the API, showing first multiple file uploads, then a drag and drop upload interface, next adding progress information (although this doesn’t work for me), then reading EXIF data from a JPEG image. You can imagine how these combined would be used for native drag and drop uploading to Flickr, for example.
The File API plays a big part in integrating the browser more tightly with the OS, particularly when combined with the drag and drop functionality, and I’m sure it’s only a matter of time until the other browsers implement this. Congratulations to the Firefox team for their work on this, and hacks.mozilla.org for some great demos.
Update: I wrote this article in 2009. In early 2011 WebKit decided to change their syntax to match that used in Firefox (and the W3C specification). The syntax contained in these articles will be maintained for reasons of backwards-compatibility, but you should use the new syntax for the future.
In the first part of this post I gave a potted history of the differing syntaxes, and provided an overview of how that affected linear gradients. In this second part I’m going to look at radial gradients.
Here the syntaxes diverge slightly more, with WebKit requiring more values than Mozilla; while that adds some flexibility, it also increases the complexity.
Update: I wrote this article in 2009. In early 2011 WebKit decided to change their syntax to match that used in Firefox (and the W3C specification). The syntax contained in these articles will be maintained for reasons of backwards-compatibility, but you should use the new syntax for the future.
CSS Gradients were originally proposed by the WebKit team in April 2008, modified from the syntax proposed for the Canvas element of HTML5. In August of this year, Mozilla announced that an implementation slightly modified from that of WebKit would be in the next version of Firefox (3.6).
Since then, however, the CSS WG have discussed a different syntax, and a resolution was passed to add this to the Image Values module. Mozilla have decided to implement the new syntax, which is simpler than WebKit’s but less flexible.
In this article, which will be split into at least two parts, I’m going to compare the two syntaxes.
There’s been a noticeable increase in chatter about HTML5 recently, as the spec is moving towards Last Call status in October. The working group now has three co-chairs (from Apple, Microsoft, and IBM) and, despite some debate over semantics, the Working Draft of the spec was recently updated.
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