출처 : https://css3gen.com/css3-webkit/

webkit이란?

• 사파리, 크롬 브라우저 렌더링 엔진
• css3 모듈에서 사용되는 css 문법

웹 브라우저 엔진이란?

• 내용을 렌더링하는데 사용되는 웹 브라우저의 일부
• 렌더링 엔진은 화면에 보여지는 것을 책임지는 부분
• html, php + css, xsl 을 읽어서 보여준다
• 브라우저마다 사용하는 렌더링 엔진이 다르다
  그러므로 내용의 레이아웃이 제대로 안 그려질 때도 있다
  IE에 맞춰 만들어졌으면 다른 브라우저에서는 잘 안 맞을 수도 있다
• webkit은 css 문법에서 사용된다 : 사파리, 크롬 브라우저에 맞춰서 내용을 만들어주기 위해

css3 코드

📌webkit 엔진을 사용하지 않는 브라우저

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

css3 코드
📌webkit 엔진을 사용하지 않는 브라우저
-webkit-code는 다른 웹 브라우저에 의해서 무시된다

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

예시

-webkit-overflow-scrolling

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

• auto
  : regular scrolling
  : content immediately ceases to scroll when you remove your finger from the touchscreen

• touch
  : momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gestrue and removing your finger from the touchscreen. the speed and durationof the continued scrolling is proportional to how vigorous the scroll gesture was.

-webkit-touch-callout

controls the display of the default callout shown when you touch and hold a touch target.