CSS3 벤더 프리픽스

CSS3 표준안은 아직 확정이 아닙니다. 이미 인기 있게 사용되고 있는 border-radius나 text-shadow, box-shadow, transform, transition 등은 표준으로 될 것이 확실시 되는 애들이죠. 표준이 아니란 얘기는 아직 모든 브라우저가 동일한 효과를 나타내지 못한다는 소립니다. 대표적으로 인터넷 익스플로러가 있죠. 얘 때문에 HTML5와 CSS3의 발전이 더뎌진다고 볼멘소리 하는 사람도 많습니다. 저도 그중 하나고요.

CSS3가 제공하는 놀라운 효과들과 미학을 익스플로러는 무시하고 있죠. 그러나 CSS3는 미래의 기술입니다. IE9가 이미 다수의 CSS3를 지원하고 있고 IE10 이상부터는 거의 모든 CSS3를 적용할 것이라고 약속한 바 있죠. 마이크로소프트가 직접 IE6 퇴출 운동을 벌이기도 했고, 나름대로 정화를 많이 하고 있습니다.  이럼에도 불구하고 IE의 점유율이 엄청 높은 한국의 인터넷 환경과 ActiveX가 어쩌고 저쩌고 얘기를 하기 시작하면 골치 아프므로 그건 하지 맙시다. 말 안 해도 아니까요. 그쵸?

표준도 아닌 CSS3를 대체 왜 쓰는 걸까요?

우린 IE버전에 따라 각기 다른 값이 적용되는 짓거리를 많이 보았습니다. *width, w/idth, _width 처럼 근본 없는 핵은 많은 웹개발자들을 고생하게 만들었죠. 그런 짓거리를 본 브라우저 개발사들은 사전에 그런 현상을 방지하자고 약속한 겁니다.

즉, 미래의 CSS3 기술과 표준안을 적용하기 이전에 브라우저에서 자체적으로 CSS3를 지원할 수 있는 일종의 접두어(prefix)를 붙여서 테스트하고 피드백하려 했던 것이죠. IE의 핵 같은 너저분한 짓거리를 사전에 예방하자는 겁니다. 그러므로 프리픽스는 나중에 고칠 일도 없고 표준으로 확정이 되면 브라우저는 접두어가 붙은 속성은 무시한 채 표준 속성만을 지원하게 될 겁니다. 때문에 접두어는 작성 순서를 지켜주어야 합니다.

border-radius를 적용한다고 할 때 접두어가 들어가는 속성을 가장 위에, 아무런 접두어가 없는 표준 CSS속성을 가장 아래에 적용합니다.

-webkit-border-radius : 사파리, 크롬

-moz-border-radius : 파이어폭스

-o-border-radius : 오페라

-ms-border-radius : 인터넷 익스플로러

border-radius : CSS3 표준속성

추후에 브라우저들이 표준속성을 완벽하게 지원하기 시작하면 접두어가 붙은 CSS속성들은 싸그리 무시한 채 표준속성만을 읽어내기 시작합니다. 브라우저는 순서대로 해당 속성을 읽기 시작하므로 호환성을 위해서 접두어가 붙은 속성들을 먼저 작성해주는 것이죠.

사실 ms는 거의 쓰지 않는 접두어고(해봐야 IE9와 10만 지원하고 있으니깐요. 점유율은 7과 8이 아직 더 높기 때문에 의미가 없습니다. 몇 년 후엔 얘기가 달라지겠지만요.) o는 오페라가 가장 빠르게 css3를 적용하기 때문에 잘 쓰진 않습니다만, 속성마다, 버전마다 다르니 반드시 붙여두는 게 좋죠.

하지만 여기서 문제가 생깁니다.

CSS3라는 신세계를 만났고 브라우저들이 읽을 준비마저 하고 있으니 미친 듯이 이 속성들로 코딩을 한다면 어떤 일이 발생될까요?

뭡니까? 이게? 둥근 테두리에 그림자에, 그라디언트까지... 만약 트랜스폼이나 트랜지션까지 넣었다면 차라리 이미지로 넣는 게 낫겠어! 하고 소리 지를지 모릅니다. 솔직히 여기에 애니메이션 효과까지 CSS3로 때려 박으면 정말 눈이 핑핑 돌아갑니다. 작성은 쉽더라도 한 페이지 가득한 속성들 때문에 괜히 머리가 띵해지기까지 하죠.

때문에 이 접두어를 두고 혹자는 또 다른 핵이라고 비난하는 사람도 있습니다. 의도야 어찌됐든 퍼블리셔들을 고생시키는 것은 매한가지니까요. 생각해보세요. 만약 브라우저들이 모두 표준속성을 지원한다면? 지금까지 만든 홈페이지의 CSS파일을 열어서 접두어가 들어간 속성들을 밤새 삭제하는 일이 생길지도 모릅니다. CSS3로 예쁜 무언가를 디자인했는데 코딩하고 나니 수정하기 귀찮을 정도로 속성이 많아지더군요. 차라리 필요할 때만 찾아쓰던 IE의 핵이 더 나아보일 때도 있는 겁니다.

그럼 간단히 해결할 수 없을까요? 왜 없겠습니까.

일단 CSS의 속성을 작성한 뒤, 자동으로 접두어를 붙여주는 웹앱이 있습니다. 일단 내가 작업한 속성을 붙여넣기 하고 변환만 해주면 알아서 척척 붙여주죠. 그리고 다시 붙여넣기 하면 됩니다. CSS3의 접두어는 사실 복사/붙여넣기 하고 앞에 명칭만 붙여주는 거잖아요. 일일이 다 쓸 필요는 없죠.

(이런 기능을 자동으로 해주는 에디터들의 플러그인들도 있습니다. 아니면 snippet을 만들어서 사용하기도 하죠)

표준속성에 알아서 접두어를 붙여준다.

http://cssprefixer.appspot.com/

그런데 이것도 성에 차지 않는다면요?

난 그따위 접두어니 안 쓸 거야. 브라우저가 호환이 되던 말던 될 데로 되라지.

그래도 가능하게 만들 수 있습니다. Prefix free라는 자바스크립트를 연결해주면 됩니다. 수많은 접두어와 싸워야 하는 개발자를 위해 스크립트가 알아서 접두어를 자동으로 붙여줍니다. 오히려 이쪽이 차후에 발생되는 유지보수를 위해 더 나은 방법처럼 보이기까지 합니다. CSS3의 표준안이 확실해지고 모든 브라우저가 동일한 효과를 보이는 날에는 복잡한 접두어를 일일이 찾아 삭제해주는 것보다 스크립트 파일 하나만 제거해버리면 되는 되잖아요?

자바스크립트를 연결해 CSS에 들어간 표준 속성에 알아서 접두어를 붙여 호환되게 만들어주는 고마운 스크립트

http://leaverou.github.com/prefixfree/

직히 CSS3의 미래는 그닥 멀지 않았습니다. 이미 다양한 효과들이 대부분의 브라우저에서 사용되고 있으며, 국내도 IE6의 점유율이 드디어 한 자리대로 떨어졌고 타 브라우저들의 비중이 약간씩 높아지는 상황입니다. 거기다 윈8이 나오면 ActiveX가 지원되지 않으므로 또 한 차례 웹개발자들이 기존 사이트 유지보수를 위하야 야근 하는 날이 다가오겠죠.  그런 날이 왔을 때 남들보다 일찍 귀가하고 싶다면? 지금 바로 CSS3를 적용해야 한다는 겁니다.

IE에서 표현이 되지 않아서 못하겠다고요? 안 되면 어떻습니까. 기능에 이상이 없고, 그 속성이 완전 다른 사용자 경험을 제공하는 것이 아니라면 억지로 CSS3를 포기하거나 다양한 핵과 스크립트를 동원해 제작할 필요는 없는 겁니다. 오히려 그쪽이 유지보수가 더 힘들어지니까요.

반드시 모든 브라우저에서 똑같은 디자인으로 보일 필요는 없는 겁니다. 동일한 사용자 경험이 중요하죠.

그리고 이미 CSS3만으로 놀라운 디자인을 뽐내는 미친 개발자들이 있습니다. 아래 링크로 들어가서 이미지 없이 CSS3로 어디까지 가능한지 확인해보세요. 소스들을 열어보면 자바스크립트만큼이나 복잡하긴 하지만요.

CSS로 무언가를 만들고 상금도 받을 수 있다.

http://cssdeck.com/

[출처] CSS3 벤더 프리픽스? 그거 핵 아냐?|작성자 이야기

꾼

이미지 슬라이더, 드롭다운 메뉴, 섬네일 갤러리... 이미 CSS3로 가능하답니다. 그리고 머지 않아 대다수의 스크립트로 제어되던 기능이 CSS3 혹은 그 이상의 미래 버전에서 대체 돼버릴 수도 있지요.

CSS로만 제작한 뿌까

망설이지 말고 시작하세요. 바로 적용하세요. 호환성을 위해서라면 몇 가지는 당장 양보해야 되겠지만 작은 요소들은 이미 적용해도 됩니다. 그리고 언젠가 IE7을 쓰던 유저가 몇 년 후 새로 산 컴퓨터로 여러분이 제작한 홈페이지에 다시 방문했을 때 마치 리뉴얼 된 것처럼 느껴질 겁니다. 그리고 신기한 CSS3효과와 디자인들을 탐미하며 사이트에 대한 신뢰감을 더 쌓을 수도 있겠죠.

출처:http://iyakiggun.blog.me/100160146819