Webkit bring new toys to CSS
For the first time in a long time, something about CSS’s future has me excited and hopeful instead of pessimistic and glum. Rather than faffing about forever over ill advised modules like the W3C are, the Webkit team have implemented some useful and very cool features. I can not wait to take advantage of these.
CSS Masks are something that I’ve simulated for the last two years (you can see them on any entry with attached photos, like this one, or learn how I did them) - but Webkit’s new feature is the genuine article (my simulation was limited to a solid background colour). This is going to be so useful.
CSS Transforms are something I’ve wanted for a very long time, and at last allows designers to break out of the boring ‘horizontal/vertical’ alignment tradition. As you can see by looking at my comment form and various bits around the page - this is something I’ve wanted to do for years. Again, my simulation is limited, but Webkit allows true rotation, even of text. Not to mention scaling.
CSS Animation is going to be big, very big. I’ve animated my hyperlinks on hover using pure CSS (no javascript) since the last redesign (learn how I did them - watch this link while you hover over it), but this new module is far more capable than my trick. At first I didn’t like the idea of animation in CSS, having been used to JavaScript doing it, but I actually think CSS Animation is a very good idea. Animation is nothing more than an alteration of presentation over time. CSS is about presentation. It makes sense to put presentation-on-a-timeline into CSS. Word of warning though - to my mind, any triggering of CSS animation should be done by JS. JS should fire off the trigger and then hand over to CSS to perform the animation. CSS should not become a user-interaction aware language. That’s the job of JS.
CSS Gradients is nice, but I’m not excited by it. It’ll save file-sizes and in general be nice to have, but it’s not achieving anything that hasn’t been done for years with a background graphic.
Way to go Webkit team 
Entry Information
- Posted:
- Fri, 25th Apr 2008 at 18:04 UTC
- Filed under:
- Tags: