현재 몇몇 브라우저에서 특정 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 지원하는 브라우저 보기