프리픽스, vendor-prefixes

 

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