WebKit: Apple and Google’s Lovechild Rendering Engine

Have you ever wondered if you could have rainbow coloured text on your website without resorting to an image? Well WebKit can make this magic happen – at least for Chrome and Safari. What is WebKit? WebKit is a web browser rendering engine that powers Chrome, Safari, and soon Opera as well. It is an […]

Have you ever wondered if you could have rainbow coloured text on your website without resorting to an image? Well WebKit can make this magic happen – at least for Chrome and Safari.

What is WebKit?

WebKit is a web browser rendering engine that powers Chrome, Safari, and soon Opera as well. It is an open source project developed by Apple, Adobe Systems and Google, among others. The major release was in 2005 extending from the predecessor version by KDE, an international free software community developing since 1998. As of 2013, WebKit is a trademark of Apple.

Competitor rendering engines include Gecko (Mozilla/Firefox), Presto (Opera) and Trident (Microsoft/IE). They all have strengths and weaknesses however none are outright winners in all areas. 

 

[source: https://commons.wikimedia.org/wiki/File:Usage_share_of_web_browsers_(Source_StatCounter).svg]

 

What can WebKit do?

The -webkit- vendor prefix for styling properties lets you manipulate visual rendering of your website, including gradient text appearance, Photoshop-like effects and filters on images, custom scrollbars, animations and many more.

Below are live coded examples of WebKit effects – why not test them out to see how they appear differently on Chrome vs Firefox?

 

sidebyside

 

See the Pen Webkit Reflection Example by Matter Design (@matterdesign) on CodePen.

 

See the Pen Gradient Text Example by Matter Design (@matterdesign) on CodePen.

 

WebKit engine is not only for browsers, it also powers iOS and Android devices. The framework gives web developers the ability to create apps that interact seamlessly with hosted web pages. The result is a web app whose performance and look-and-feel are on par with native apps. This is a huge advantage over other rendering engines as usage share for mobile web browsing takes over desktop very soon.

Read more about difference between web apps and native apps here.

 

Conclusion

Being a heated open source project, WebKit changes at a rapid pace; indeed much of it can be outdated or experimental but a fun way to practice some creative UI. What’s important is to stay on top of all current standards for developers, and consumers alike, especially when their compatibility is limited to 2 browsers at least for now. Remember that browsers are always going to be changing and creative approaches for website designers will continue to evolve.