Your browser may have trouble rendering this page. See supported browsers for more information.

|<<>>|143 of 265 Show listMobile Mode

CSS Animations & Transforms in Safari 3.1

Published by marco on

Webkit, the rendering engine on which the Safari browser is based has been quite aggresive in its support for advanced CSS3 features. Since the engine is used in many Apple applications and on all of their platforms (e.g. the iPhone and iTouch), the need for slickness there drives innovation everywhere.

Animation

The trend lately has been to move to flashy effects done with JavaScript libraries that can manipulate the DOM and address elements using CSS selectors. There are many top contenders, including dojo, jQuery, YUI, Prototype and Scriptaculous[1].

While these solutions all get the job of moving, sliding, fading and glowing elements done—and often with a quite intuitive API—they still use the JavaScript engine to do so, which can only be optimized so far. Instead of forcing users to go to a Flash (or Silverlight) applet for more demanding uses, why not just canonicalize animation and transformation into an API? Solutions using SVG or the Canvas object for animation are limited because most developers/designers are more comfortable using their bread and butter—HTML and CSS—to design their pages. After all, it is these two that yield the most portable and scalable web content, not Flash-based solutions or solutions requiring text to be formatted using graphics APIs.

In that spirit, Apple’s Safari 3.1 to support downloadable web fonts, more (Apple Insider) reveals that Safari has implemented a proposed CSS extension, CSS Animation by Dave Hyatt (Surfin' Safari), which adds transition-property, transition-duration and transition-timing-function to the available CSS properties for all elements. These properties, applied to standard CSS properties like opacity, border or position and combined with new functions like rotate, make a lot of the functionality offered by the current libraries obsolete.

Client-Side Storage, Video, Audio and Fonts

There are other updates to Safari 3.1:

  • HTML5's SQL storage application programming interface (API) – this will replace cookies for local storage, offering a real database with SQL querying capabilities.
  • Video and audio tags as outlined in the draft specification of HTML5 – these are standardized embeds for video and audio players, with native scripting support.
  • Downloadable/embeddable fonts – just what it sounds like: yet another attempt to standardize fonts referenced from a web page. See CSS @ Ten: The Next Big Thing by Håkon Wium Lie (A List Apart) for more information (it boils down to being able to specify a URL in the CSS from which to download).

CSS3 Improvements

This is in addition to the Ten New Things in WebKit 3 by Maciej Stachowiak (Surfin' Safari) that came with the release of Leopard late last year. In that release, they introduced native support for SVG, XPath, Enhanced RTF Editing, Stylable Form Controls (finally), and a slew of CSS3 features, like:

  • Media queries – this allows authors to use different CSS depending on display-time properties of the media, like width or height.
  • Multiple Backgrounds – this finally allows authors to build complex borders or backgrounds for blocks without using multiple boxes or artificially limiting size in any way. Finally, rounded corners/borders without hacks.
  • Box-Sizing – a box model for CSS for the rest of us, who just want two boxes to show up next to each other without figuring out who has to float where and without using a table.

Developer Tools

And of course, it’s Apple, so their developer tools look cool as hell.


[1] See Evaluation of Javascript Libraries for more information.