각 브라우저마다 항상 다른 웹킷 스타일을 선언해야합니까?

Question

나는 약간의 지루한 CSS 선언으로 복제본을 찾기 시작했다. 다음

@-webkit-keyframes wiggle { 
0% {-webkit-transform:rotate(12deg);} 
50% {-webkit-transform:rotate(-6deg);} 
100% {-webkit-transform:rotate(12deg);} 
} 

@-moz-keyframes wiggle { 
0% {-moz-transform:rotate(12deg);} 
50% {-moz-transform:rotate(-6deg);} 
100% {-moz-transform:rotate(12deg);} 
} 

@-ms-keyframes wiggle { 
0% {-ms-transform:rotate(12deg);} 
50% {-ms-transform:rotate(-6deg);} 
100% {-ms-transform:rotate(12deg);} 
} 

그리고 : I 변환 회전을 활용하고 모질라, 크롬/사파리에 걸쳐 앞뒤로 회전과 같은 뭔가를 원하는 즉 경우

예를 들어, 나는 다음을 수행해야 물론 그때 개별적으로 이들 각각을 적용해야합니다 모든 이들의에서

.wiggle { 
-webkit-animation: wiggle 5s infinite; 
-moz-animation: wiggle 5s infinite; 
-ms-animation:  wiggle 5s infinite; 
} 

을, 유일한 다른 내가 조금 바보 찾을 MS, MOZ, 및 웹킷이다. 이상적으로는 위의 20 줄의 코드를 8 줄까지 줄일 수 있습니다.하지만 각 브라우저는 서로 전쟁을하고있는 것처럼 보이므로 모든 곳에서 css 코더가 고통을 겪어야합니다.

CSS와 브라우저 구현은 이러한 종류의 작업을 계속 진행할 계획입니까? 더 짧은 길이 있습니까? 이렇게하면 DRY 코딩 경험을 더 많이 만들지 않으려는 것 같습니다.

Answer 1

"최첨단"CSS를 사용하려면 오랫동안 대답이 "예"로 유지 될 가능성이 높습니다.

Answer 2

나는 여기

.box-shadow(@style, @c) when (iscolor(@c)) { 
    box-shadow:   @style @c; 
    -webkit-box-shadow: @style @c; 
    -moz-box-shadow: @style @c; 
} 

은 다음 오프라인 한 줄 필요가 호출 예입니다 당신이 클래스를 내부 클래스 (심지어 함수)를 호출 할 수 있습니다 LESS와 같은 프레임 워크를 사용하는 것이 좋습니다

div { .box-shadow(0 0 5px, 30%) } 

변수를 사용할 수 있으므로 하나의 사전 설정 만 사용할 수 있으므로 그림자를 적용 할 특정 선택기에 맞게 수정할 수 있습니다.

Answer 3

prefixmycss, prefixfree 및 특히 CSS3 Please을 살펴 보는 것은 어떻습니까? 이러한 긴 CSS를 작성하는 데 많은 시간을 절약 할 수 있습니다.