Filed under: iPod Family, Tips and tricks, Developer, iPhone
CSS trick mimics sideways-flicking behavior in MobileSafari
Ajaxian has posted a ridiculously simple way to enable web apps to mimic the iPhone's side-to-side flicking behavior using custom CSS supported by MobileSafari. If you're creating a web app specifically for iPhone and iPod touch users, you can get a similar feel to a native application with MobileSafari.
MobileSafari includes some CSS 3 support, including advanced DOM selectors and support for animations and transitions. Chances are, other browsers will have limited support for CSS 3 draft standards, and whatever you write probably will only work in MobileSafari and Safari 3 on the desktop.
The test application in this movie shows how it tracks finger movements across the screen, and performs actions based on the distance "swiped." Very nifty.
[Via Cameron.io.]
Get a WordPress.com Blog
![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)
Reader Comments (Page 1 of 1)
Ryan Imel said 10:24PM on 8-13-2008
That looks pretty slick. I'll have to try it out.
Reply
Patrick said 11:45PM on 8-13-2008
I'm not positive, but I think this will only work with the 2.0 update.
Reply
Matthew Congrove said 11:59PM on 8-13-2008
Yes, this will only work for iPhones with firmware 2.0 or above. The CSS3 transitions, as well as the new Touch events, are both part of that upgrade.
I've been messing around with this script over the past week and have run into some issues that Apple didn't take care of very well; will be posting an update to the article tomorrow.
Thanks TUAW for posting this =]
Reply
Andy said 2:02AM on 8-14-2008
Nice. A good addition would be the soft rebound you get when you reach the last item on the page, like if you try to scroll off the edge of a regular safari page.
Well done!
Reply
Fritz Laurel said 2:26AM on 8-14-2008
Pretty cool. Nice work!
Reply
Brandon Rotkel said 5:04AM on 8-14-2008
I know the mobile version of Digg (http://m.digg.com) has had animated transitions since they launched the site for the original iPhone almost a year ago, but I don't think I've seen any sites that made use of gestures like swiping. Is that part of the iPhone, CSS, or Safari 3; I'm a little unclear on that from the article? If it is a new part of Safari, that may be evidence of it being a built-in feature for new multi-touch enabled laptops or - gasp - an Apple Tablet PC!
Reply
Adam Wolf said 12:11PM on 8-14-2008
This is bad-ass Robert, thanks for the post.
Reply
Matthew Congrove said 6:38PM on 8-14-2008
Brandon - This is an upgrade to the iPhone's Mobile Safari that enables the WebKit CSS3 transitions and adds touch events to JS. Essentially it's an upgrade to all three. This is not currently supported by 'normal' Safari, as far as I know, but I don't think it would take a lot to implement. I also don't think that it's evidence enough for any rumors about touch-enabled laptops or tablets; the CSS transitions are coming out of WebKit (and have been for a long while), while the touch events are, well, because it's an iPhone ;)
Reply