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

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

.div { 
width: 100px;
height: 100px; 
background: green;
/*Start transition effect*/ 
transition-property: width;
transition-duration: 2s; 
}
.div:hover { 
width: 300px; 
}

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

-webkit-transition-property: width; -webkit-transition-duration: 2s;

The –webkit- code will be ignored by other web browser rendering engines
Explore more on this topic...