Google Chrome Frame – Webkit in IE

Steve Ballmer has, in the past, stated that he would be open to the idea of Internet Explorer dropping the Trident rendering engine in favor of the open-source Webkit. I, for one, would love it if this happens – Trident is the bane of web developers around the world. Simply stated, it is holding the web back from it’s true potential. Well, it looks like Google has done the work for Microsoft, with Google Chrome Frame for IE.

Essentially, Chrome Frame replaces all of the guts of IE with Chrome technologies. This extends beyond the rendering engine – it replaces the JavaScript engine as well, and whatever other parts needed swapping out. Using Chrome Frame, IE can immediately start to render HTML5 (canvas, audio, video), CSS3, and more. Even better, under Chrome Frame, all IE rendering quirks would cease to be an issue. Oh yeah, and it also makes IE faster – ten times faster for JavaScript performance, even in this beta stage.

To utilize Chrome Frame on your site, all that is needed is a single meta tag – if Chrome Frame is installed, IE will use it, and if not, the page will still render. This is very nice, unobtrusive behavior indeed.

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Google developed Chrome Frame primarily for their upcoming Google Wave communication software. It probably became quickly evident to Google that they would never be able to offer the rich functionality that Wave requires under IE. I would expect that the release of Chrome Frame is ruffling some feathers at Microsoft – Google seems to be getting on the nerves of some it’s major tech competitors lately using similar tactics. Still, it’s hard to see how consumers lose with this move – to some extent, it’s the best thing that could happen to Internet Explorer.

3D CSS Animated Image Carousel

Here’s a 3D CSS Animated Image Carousel that I created while I was learning about 3D CSS animation. Watch the video above to see the technique in action. If you’re on a 3D CSS animation capable browser (currently a non-production version of MAC Safari and mobile Safari in the iPhone and iPod Touch), go ahead and check it out. The video was shot with my XBOX360 webcam, of all things.

New Theme, Digging Into WordPress

I just recently changed to a new theme for my site. Since then, I’ve been doing my first real digging into the internals of how theming works and how to talk to the back end of WordPress. It’s been a suprisingly pleasant venture – all your content is easily accessible and the interface is clean. I’m just starting to learn PHP (from a .NET background), and it’s been nice to find that I can hack around and usually get the code right on the first or second try.

I’ve also been making some progressive enhancements to the site at the same time. If you came in via a webkit-based browser, you’ll hopefully notice the webkit-only light blue gradient behind post titles, as opposed to a solid color. I also animated the RSS button in the upper right hand corner to grow 10% larger on hover. These are examples of ways to embrace progressive flourishes on your site without breaking the experience for anyone. Next up, I’m going to incorporate rgba into the footer somehow. Hope you enjoy the new layout!

Firefox 3.5 Supports CSS Transforms, no Animation Support Yet

Firefox 3.5, the recent release of the latest version of the Firefox web browser, now supports CSS transforms. CSS transforms are effects, such as scale, rotate and skew. This is a step forward for the Gecko rendering engine, but in plain terms, it still clearly lags behind webkit, which supports 2D and 3D CSS animations.

I’ve lately been very interested in how browsers handle the leading edge – browser technology that is still years away from widespread adoption. The question I’ve been having as of late is whether Firefox can keep up in this arena. They certainly aren’t slouches when it comes to new technology, but they are definitely being outpaced, particularly by Webkit. With the support for plugins, the rendering engine of Firefox is burdened with cumbersome functionality that must be maintained as new elements are added. This slows down the process of technology adoption. On the other hand, Webkit-based browsers have decreased plugin capability, which is a hindrance to their widespread adoption (and also a significant factor in why they consume less memory and perform faster in real-world use). Clearly, Firefox is a market leader, so their strategy has paid off in many respects.

This also begs the question of whether we would ever see a convergence of technology between Firefox and it’s closest competitors, Chrome and Safari. It is technically feasible that Firefox could be chopped apart and refueled with Webkit, but I’d expect that the effort would be far too difficult to go into hesitantly. The other side of the coin is that Webkit-based browsers will eventually support plugins. Google has openly stated they are working on robust plugin support, a front on which they’ve already made a few strides. One has to wonder if this will be a turning point – it certainly has the potential to be so.

Progressive CSS Animation Tutorial

I’ve been focusing a lot lately on demonstrating some CSS animation techniques. That’s all fine and well, but there is definitely a need for some instructional material on the web. To that end, check out this CSS animation tutorial that I just finished. It will teach you some techniques that are useful today in a mixed-support world for CSS animations. All the examples covered are progressive animations that require little work on your part, and that also don’t significantly impact user experience if they are unable to view them.

I wrote the demo using straight HTML and jQuery UI instead of the normal blogging platform. To that end, there’s no support for comments on the tutorial so feel free to comment here if you’re interested. Enjoy!

Palm Pre and Webkit/WebOS


I hadn’t realized until very recently that the not-yet-released Palm Pre is wholly implemented using not much more than Webkit and HTML technologies. The entire platform is called WebOS, but it’s little more than a shell that is designed to run Webkit. This is an ingenious move in creating a smartphone, for a few reasons.

First, Webkit is open-source and is actively developed. This means that Palm can get new bleeding-edge technology into their phones solely by upgrading to the latest version of Webkit rather than having to develop the technology themselves. In this arena, their singular hardware goal should be to provide the best environment possible to run Webkit.

Second, since all applications are based upon Webkit and HTML, there are already millions of developers that understand your platform. Development tools? You don’t have to write those, it’s all just HTML. This is a significant cost-savings over proprietary platforms, and will serve to quickly grow the application suite that is available for the Pre.

Is the browser-only OS really viable? Certainly – the web world has already created solutions to a very large number of problems with a browser-only OS. Offline databases? There’s support for that in HTML 5. What about a 2D/3D graphics API? Canvas provides 2D support, and 3D support can be built in (and a canvas spec for 3D graphics is in the works, so it will eventually be a moot point in any case). Multithreading? Again, HTML 5 has support for worker threads.

To this end, I’m willing to bet there are more than a few mobile phone makers that are envious of the sheer simplicity and elegance of the Pre platform. Here is a video of a Palm exec talking about the technology behind the Pre at Google I/O. Skip to about 3 minutes in to hear just the Pre segment, which is well worth the time to watch.

CSS Animation Fun

Falling Blocks CSS Animation

I’ve been working a lot more on CSS animations lately. There’s not much documentation out there and what is available is incomplete, so working with them is definitely a bit of a chore. I’ve been creating some examples that are pretty cool and demonstrate some more difficult techniques. They only work in Safari and Chrome, so fire one of those up and click through.

I’ve been working mostly with the onclick event. The hover event is ultimately a bit disappointing because it reverses the animation effect when you stop hovering. That’s good for effects like growing buttons on hover, but not for a lot of other uses. The one-way nature of the onclick event means that it doesn’t cause the animation to reverse itself, which leads to some pretty neat effects. Check out these examples, and let me know if you end up using anything from them – I’m very curious to see what people do with this technology!

Hiding Elements Using CSS Animations

Here’s a quick demo of how to use CSS animation to hide a page element on click. This technique is only useful in a webkit-based browser, such as Safari of Chrome – I’d highly suggest checking it out in one of these browsers.

I’m Off!

Using one of the aforementioned browsers, click on the box above. It should fly off the left side of the page, rotating and getting smaller as it moves off the page. This has the effect of appearing to be removed from the page. In reality, the section is still there, it’s just been moved to the left. This is little more than a tech demo at this point, since CSS animations aren’t supported in the more popular browsers, including Firefox and Internet Explorer – using JavaScript for such a technique is still highly recommended for now.