This is our first guest post on WebKitBits, from Jon Neal, web designer and developer. More info about Jon can be found at the bottom of this post. If you are interest in writing a guest article for WebKitBits, please contact David Kaneda.
CSS animations also have their limitations, which is why I support their use only under certain circumstances. Right now, CSS animations don’t affect page layout—if you move or scale an element, it doesn’t really move or scale, only it’s visual representation does. To that end, animations that affect layout are not yet appropriate for CSS —jQuery’s element.Hide() and element.Show(), for example, do affect layout. A CSS animation would not be an appropriate substitute for this behavior. Also, the behavior of CSS animations is such that they aren’t suitable for extremely complex animations. All CSS animations are completely reversible, and as such, they can’t accept property changes as dynamically as one might need.
All in all, CSS animations are a very interesting thing to play around with, and are certainly an evolutionary step in the abilities of the top-level presentation layer. The next level of CSSanimation is 3D CSS transforms, which are currently only supported on Safari for the iPhone. Take the time to dive under the hood a little, and check out CSS animations for yourself.
About the Author
Jon Neal is a co-owner and webmaster for blaq design, a small bike company. When he’s not there, you can catch him blogging at his website, Ferret Army, working at FIT Technologies, or just enjoying the best that Cleveland, Ohio has to offer.
In the most recent iPhone and iPod Touch software upgrade, Apple added the ability to show a startup image for websites saved to a user’s home screen. Until now, these full-screen web apps would simply show a (poorly) compressed screenshot of the previous page viewed or nothing at all. To add a startup screen, simply include a the following tag in the head of your document and create an image in the location referenced by href:
<link rel="apple-touch-startup-image" href="startup.png" />
The PNG can be named anything, but it must be in PNG format and it must be 320x460 pixels. Technically, it seems the PNG displays until the document triggers the ‘ready’ callback, before the window’s ‘loaded’ callback. If I get a chance later, I’ll create a video demo of how it looks.
“ FYI: Transmit will use your SSH keys if you leave the password field blank when connecting via SFTP. ”
Palm Pre intro video. Via Gruber.