Broken Links

Thoughts on web development and technologies by Peter Gasston

Search

November 2009 Archives - Broken Links Archive

CSS gradient syntax: comparison of Mozilla and WebKit (Part 2)

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.

Read the full article


CSS gradient syntax: comparison of Mozilla and WebKit

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.

Read the full article


Mozilla release Bespin Embedded preview

Mozilla’s Bespin is a code editor built using web technologies. It’s still in its infancy, but shows promise. A new release, Bespin Embedded, lets you use the basic editor functionality on your own websites, using just a couple of lines of Javascript. If you don’t want to download it yourself, I’ve got a working demo. The editor doesn’t really do much at the moment, so this is really only a proof of concept.


Using the GeoLocation API

With the rapid growth of the mobile web, location-aware services are very much in-demand; the GeoLocation API was proposed to cater to this need.

Implementation is spotty at the moment; Firefox 3.5 supports it, as does Safari for iPhone (although not on the desktop, AFAICS). But it’s so simple to use, I’ve no doubt it will be adopted rapidly.

Read the full article


Aside

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.

My conferences on Lanyrd