Tag Archives: webkit

Google Chrome Frame – Webkit in IE

Posted on by — No Comments ↓

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

Posted on by — 2 Comments ↓

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

Posted on by — No Comments ↓

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!

Palm Pre and Webkit/WebOS

Posted on by — 1 Comment ↓

palm-pre

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

Posted on by — 1 Comment ↓

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!

I Heart Webkit

Posted on by — 1 Comment ↓

Webkit is the rendering engine that runs Apple Safari and Google Chrome. Analogously, Trident powers IE and Gecko powers Firefox. Webkit, however, is by far the most advanced of the three (with Trident being a distant third).

Webkit supports some awesome advanced CSS features, including advanced selectors and animations. Check out some of these examples in Chrome or Safari 4 – the fact that all this is done without Javascript and Flash is simply amazing. Adding color transition events on mouse hover, for instance, is as simple as a single line in your CSS declaration:

-webkit-transition: color 1s ease-in-out;

Enhancements like this are progressive-style enhancements – they aren’t supported everywhere, but they likely will be in the web of the future (minus the ‘-webkit’ identifier), and they don’t take much away if they aren’t present.