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.
Glyphboard 2.0 -
Just in time for today’s release of iPhone OS 3.0 with its oh-so-handy pasteboard, I’ve updated a little project of mine, Glyphboard. It’s a sort of keyboard which lets you type glyphs not available on any of the standard iPhone keyboards. These glyphs include , ☂, ☺, ✔, and even ♫.
You may find this handy for Twitter, text messaging, emails, and I’m sure I don’t know what else. A clarification: unfortunately Safari won’t let you just tap a key to copy it; you have to hold and tap. I wish you didn’t, but there.
On the flip side, even though it’s a web app, once you’ve installed Glyphboard it will work even when you’re offline. How’s that!
This is easily one of the nicest iPhone optimized websites I’ve ever seen.
FYI: Transmit will use your SSH keys if you leave the password field blank when connecting via SFTP. — @postpostmodern
Coding like it's 1999 ~ Authentic Boredom -
The only thing I found amiss with this article is that he says that HTML 5 will replace
divs. That’s not true. It’s just adding some semantic tags that will serve to replace a certain set of nearly-standard IDs/classes people happen to normally put on
David Kaneda’s new project, a tumblelog focussed on Apple’s WebKit browser framework, and in particular its use in the mobile space. Some good tricks and techniques here already.