Mozilla Hacks

two important api changes – CSS gradients and the media load event

Avatar photo By

Posted on November 4, 2009 in CSS

Robert O’Callahan has been posting updates in his weblog about changes that we’re going to be making that are web-facing. It’s worth summarizing two here for web developers.

Removing the media element ‘load’ event.

Yesterday I checked in a patch that removes support for the ‘load’ event on <video> and <audio> elements. We simply never fire it. Also, the networkState attribute is now never NETWORK_LOADED. When we’ve read to the end of the media resource, networkState changes to NETWORK_IDLE. We plan to ship this change for Firefox 3.6.

This API has been removed based on consensus from everyone who are doing HTML5 video implementations and there are lots of other options for events that Robert goes over in his post.

Changing our CSS Gradient Syntax

We landed support for a form of CSS gradients on trunk a while ago, but we got considerable feedback that our syntax — which was an incremental improvement of Webkit’s syntax, which basically exposes a standard gradient API in the most direct possible way — sucked. A bunch of people on www-style got talking and Tab Atkins produced a much better proposal. Since we haven’t shipped our syntax anywhere yet, dropping it and implementing Tab’s syntax instead was a no-brainer. So Zack Weinberg, David Baron and I did that (using a -moz prefix of course), and today it landed on trunk. It should land on the Firefox 3.6 branch shortly. It’s unfortunate to land something new like this after the last beta, but in this case, it seems like the right thing to do instead of shipping CSS gradient syntax that we know nobody wants.

We’ve never shipped the “bad” CSS gradient syntax in a final release, but it is in our first beta. We’ll be updating it before we make our final release of 3.6. Stay turned for the new syntax on hacks.

3 comments

  1. Rich

    So… what is the new gradient syntax? I’m using it on a site that I’d like to deploy, but would rather wait til the syntax is finalised for gecko first…

    November 5th, 2009 at 06:40

  2. Jeff Balogh

    I have this right now on AMO to support new and old syntax:

    background: -moz-linear-gradient(left top, left 20%, from(#cfeaf4), to(#fff));
    background: -moz-linear-gradient(#cfeaf4, #fff 20%);

    I like the bottom one much better!

    November 5th, 2009 at 14:43

  3. Keith

    How does this work in conjunction with other background properties? I think I still prefer MS’s filter syntax, since it’s distinct from the background. Very simple to overlay a transparent black-to-white gradient over a background color to get the effect you usually want. Also, it can be applied over a background image so you can have a drop shadow along one edge and the whole thing darkening toward the bottom. If you ask me, MS got it right, and all we need to do is get rid of “progid:DXImageTransform.Microsoft.”.

    November 10th, 2009 at 22:49

Comments are closed for this article.