webkit 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. I’ve written a post about the new radial gradient syntax.

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


New background rules in Firefox 3.6

The latest alpha release of Firefox 3.6 (3.6a1) contains some new rules for providing backgrounds to elements: multiple background images, background-size, and an implementation of the Webkit gradient proposal (modified from the original – more on that later).

I’ve put together a very rough demo of what you can do with these new rules; you’ll require a recent build of Firefox 3.6 or Webkit to view it. Try resizing the window to different dimensions, and see how it changes.

Here’s an explanation of how I did it:

Read the full article


CSS Animation Pong

The recent release of the Safari 4 Beta saw a new standards proposal from the Webkit team, for controlling animation using CSS. While there’s still a debate to be had about whether CSS is the right language for this (I still fall on the side that it doesn’t, strictly), I do think their implementation is well handled. I wanted to try it out, so I went back to the earliest form of digital entertainment: Pong!

Read the full article


Microsoft ‘may consider’ Webkit in IE

Steve Ballmer has said that Microsoft “may look at” using Webkit in future versions of Internet Explorer (contradicting Chris Wilson’s statement last year that they wouldn’t). I really can’t see it; at least, not in the near future. Perhaps for Windows Mobile, as Webkit is proving itself in the mobile space, but almost certainly not on the desktop.


Anime with CSS and Webkit

Recently I’ve been thinking about Webkit’s CSS Animation module, and playing The World Ends With You on the Nintendo DS. TWEWY is a JRPG with lots of simple Anime-style cutscenes, and it occurred to me that they must be quite easy to recreate using CSS Animation; so, I have.

Read the full article


Newer | Older

Aside

I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment . More Asides.