SVG effects in CSS: Webkit transformations

Amazing news from webkit - they've implemented CSS transformations on their nightly builds!

The web's inability to do transformations - especially rotations - has been an embarrassing failure for years now. I believe the fact that vertical text is not possible has been a major driver behind proprietary "rich internet applications" like Flash.

What's more, the Safari folk seem to have done it properly. They're not relying on SVG foreignobject support, like Firefox; they haven't restricted themselves to simple rotations, instead allowing general affine transformations; and they've started with a simple approach that doesn't affect layout.

Cherry-picking SVG

No doubt they were able to implement this quickly because they've already done it once, in SVG. SVG is great as an image format, and for complicated shapes and paths; but there are surely parts of it that can be brought to the web, via CSS.

For example, how about colour gradients - why not extend the CSS3 color spec to enable the following:

background-color: gradient(red 5%, green 55%, yellow 95%)

which would color the relevant HTML elements with a gradient starting (left to right) with red at an offset of 5%, green at an offset of 55%, etc.

All this would take is to define a new color type in the CSS3 spec, which takes other colors (including opacity via hsla and tbga) as parameters. It could then be used for background colors, border colors, and wherever color is used elsewhere in CSS.

Cherry-picking SVG and putting it in CSS is a great approach. First, it adds style to the web, in a way that properly separates content from presentation. Second, it's tried and tested, so there should be less arguing about the specs. Third, it builds skills and knowledge of key SVG features, building momentum behind the full SVG spec.

Well done, Safari - may the other browser makers learn from your approach.