Must I always declare different webkit styles for each browser?

Question

I've started to find the duplication with certain css declarations a bit tedious.

For example, if I want to take advantage of the rotate transform and do something like back and forth rotation, across mozilla, chrome/safari and ie I have to do the following:

@-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);}
}

And then of course I need to then apply each of these individually with:

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

In all of these, the only different is ms, moz, and webkit, which I find a bit stupid. Ideally the above 20 lines of code could be stripped down to 8. But each browser seems to be at war with each other and so css coders everywhere have to suffer.

Is this the way CSS and browser implementations plan to keep moving forward with these sorts of things? Is there a better shorter way? Doing this seems to be going against creating a more DRY coding experience.

Answer 1

If you want to take advantage of "cutting edge" css, then the answer will likely remain "yes" for a long time to come.

Answer 2

I suggest you using framework like LESS, that allows you to call classes inside classes (and even functions), here's example

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

then call it where you need ine single line

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

As you can see you can use variables, so you can use only one preset, then modify it for specific selectors that you want to apply shadow to.

Answer 3

How about taking a look at prefixmycss, prefixfree and particularly CSS3 Please? They will help you save a lot of time writing such long css.