DEV Community

loading...

Css Web-kit property

hasnain01hub profile image Hasnain01-hub ・1 min read

image

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; 
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide