각 브라우져의 css3 접두사 저리가라 난 Prefix Free 쓴다

제목이 거창하죠 ...ㅎㅎㅎㅎ
css3 속성을 보면 아직 표준이 정해지지 않아서 각 브라우져마다의 접두사를 사용해서 코딩을 합니다.
원래 w3c에서 정해준 속성을 사용한다면 대략 아래와 같습니다. 

.box {
   background: linear-gradient(top, #e3e3e3 10%, white);
}

@-webkit-keyframes "slide" {
   0% { left: 0; box-shadow: 10px 10px 10px black; }
   100% { left: 50px; box-shadow: 5px 5px 5px black; }
}

하지만 브라우져에서 지원을 하지 않죠. 나중에 지원할지는 몰라도 ....
그래서 각 브라우져의 접두사를 넣은 속성을 먼저 적어주고, 나중에 위의 속성을 적습니다.
그럼 대략 아래와 같은 모습이 됩니다.

.box {
	background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
	background: -moz-linear-gradient(top, #e3e3e3 10%, white);
	background: -o-linear-gradient(top, #e3e3e3 10%, white);
	background: -ms-linear-gradient(top, #e3e3e3 10%, white);
	background: linear-gradient(top, #e3e3e3 10%, white);
}

@keyframes "slide" {
 0% {
    left: 0;
   	-webkit-box-shadow: 10px 10px 10px black;
   	box-shadow: 10px 10px 10px black;
 }
 100% {
    left: 50px;
   	-webkit-box-shadow: 5px 5px 5px black;
   	box-shadow: 5px 5px 5px black;
 }

}

@-moz-keyframes slide {
 0% {
   left: 0;
   box-shadow: 10px 10px 10px black;
 }
 100% {
   left: 50px;
   box-shadow: 5px 5px 5px black;
 }

}

@-webkit-keyframes "slide" {
 0% {
   left: 0;
   -webkit-box-shadow: 10px 10px 10px black;
   box-shadow: 10px 10px 10px black;
 }
 100% {
   left: 50px;
   -webkit-box-shadow: 5px 5px 5px black;
   box-shadow: 5px 5px 5px black;
 }

}

@-ms-keyframes "slide" {
 0% {
   left: 0;
   box-shadow: 10px 10px 10px black;
 }
 100% {
   left: 50px;
   box-shadow: 5px 5px 5px black;
 }

}

@-o-keyframes "slide" {
 0% {
   left: 0;
   box-shadow: 10px 10px 10px black;
 }
 100% {
   left: 50px;
   box-shadow: 5px 5px 5px black;
 }

}

보시기만 해도 질리죠.....
이렇듯 좋은 속성이 있어도 사용하려면 각각의 브라우져의 접두사를 넣은 속성을 넣어줘야만 합니다.
이것도 간단이 해결하는 방법이 있습니다.

하나의 속성만 적어주면 각 브라우져의 접두사를 알아서 넣어주는 Prefixr 을 사용하면 됩니다.
이전에 제가 소개한적이 있는 사이트입니다.
크로스 브라우징 CSS3 코드를 만들어주는 사이트 Prefixr -> http://demun.tistory.com/2172

하지만 이제는 그럴 필요없습니다.
이런 번거로움을 해결해줄수 있는 방법이 있습니다. 그것이 바로 PrefixFree 입니다.
홈페이지 -> http://leaverou.github.com/prefixfree

이 프로젝트를 진행하는 주소 https://github.com/LeaVerou/prefixfree 에도 자세한 내용이 있습니다.
요지인 즉슨 prefixfree.js 를 사용하면 각 브라우져의 접두사를 사용하지 않아도 된다는 말입니다.

위 주소에 자세한 내용이 있으니 참고하시기 바랍니다.
공급업체의 접두사를 사용하지 마세요....라는 제목의 글도 있네요.....공급업체란 각 브라우져를 말하는 거겠죠... 
글을 보면 접두사를 적었을때와 적지 않았을때를 확실이 알 수 있습니다.