CSS3 Webkit

What is WebKit?

The word ‘webkit’ has become more popular in recent times when talking about CSS and web design. However, there is still quite a bit of confusion relating to the term ‘webkit’ in terms of what it means and how it is used when coding CSS. Webkit refers to the browser rendering engine used for Apple’s Safari and Google’s Chrome browsers. It is also the CSS syntax used for CSS3 modules.

The Webkit Browser Engine

In order to understand the relevance it is first important to have a working knowledge of web browser engines. It is the component of a web browser that is responsible for rendering the content. For this reason it is also referred to as the web rendering engine.

To put it simply, the rendering engine is the component that is responsible for what is seen in the browser. It takes the data from HTML or PHP and so on, formats it according to the CSS or XSL and the serves it to the user’s browser.

Not all web browsers use the same rendering engine. Internet Explorer uses the Trident engine, Mozilla products like Firefox uses Gecko, Opera uses the Presto engine and the WebKit engine is used by the Safari (Apple) and Chrome (Google) browsers.

Due to different web browser rendering engines, there is at times some cross compatibility issues for content layout. In other words, content that may have been designed for Internet Explorer may not render as the designer intended on another browser like Mozilla Firefox.

Webkit in CSS3 Syntax

The term ‘webkit’ is therefore also part of the CSS syntax used to render content for the Safari and Chrome broswers. Due to the lack of cross-compatibility, webkit code may have to be included in CSS in order to ensure that it will render as intended on Chrome and Safari.

The relevance of webkit is in relation to CSS3, the new generation CSS modules that allows features like transition effects, multiple column layouts and animation. While all browsers may be able to render old CSS specifications to the largely the same degree, the same does not apply to newer CSS3 modules.

For example, in the code CSS3 code below the green square widens horizontally over a period of 2 seconds when the mouse hovers over it.

In order for the same transition effect to render on browsers using the WebKit engine, the CSS code will be as follows:

The –webkit- code will be ignored by other web browser rendering engines.