
현재 몇몇 브라우저에서 특정 CSS를 구현하기 위해서는 ‘벤더 프리픽스’를 사용해야하지만, 필요 이상으로 과하게 사용될 때를 자주 보게 됩니다. 브라우저가 버젼 업을 꾸준히 하면서 더이상 벤더 프리픽스를 사용하지 않고도 특정 CSS를 구현할 수 있게 됬지만, 얼마나 많은 일반 사용자들이 우리들처럼 브라우저를 꾸준히 업그레이드 할지는 알 수 없는 점이 문제입니다.
물론 항상 최신 버전의 브라우저만을 지원하고 사용하자는 말은 아닙니다. 구 버전의 브라우저들 - IE8 이하, 파이어폭스 3.6, 크롬 9, iOS4용 사파리 -에게는 벤더 프리픽스가 계속 필요할 겁니다. 여기서 이야기하고자 하는 점은 벤더 프리릭스를 효과적으로 잘 이용하여 더욱 가볍고 다루기 편한 CSS를 만들자는데에 있습니다.
border-radius
벤더 프리픽스 필요없음
.example { border-radius:10px; }
현재 border-radius 지원하는 브라우저 보기
box-shadow
벤더 프리픽스 필요없음
.example { box-shadow:0 0 5px rgba(0,0,0,0.5); }
현재 box-shadow 지원하는 브라우저 보기
background-origin, background-size, background-clip
벤더 프리픽스 필요없음
.example { background-origin:content-box; background-size:100% auto; background-clip:content-box; }
현재 CSS3 backgrounds 지원하는 브라우저 보기
gradients
-webkit-만 사용합니다.
.example { background:#f9f9f9; background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); }
현재 gradients 지원하는 브라우저 보기
calc()
-webkit-만 사용합니다.
.example { background-position:100% 100%; background-position:-webkit-calc(100% + 30px) -webkit-calc(100% + 16px); background-position:calc(100% + 30px) calc(100% + 16px); }
현재 calc() 지원하는 브라우저 보기
transitions
-webkit-만 사용합니다.
.example { -webkit-transition:background-position 0.5s; transition:background-position 0.5s; }
현재 transitions 지원하는 브라우저 보기