Cross browser compatability - webkit/moz/o/ms ect!

1

So occasionally I’ll see css code snippets that factor in a number of options for different browsers. Take this code for a slideshow I am modifying for instance:

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 } 
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

Now to my [probably untrained] eye this looks extremely messy and unnecessary. All these snippets look the same except that the reference either moz or webkit or whatever. Otherwise the code within them is the same.

Is it really necessary to have all this? Is this just something left over from older browser compatibility issues? The tutorial I’m following is from 2012 after all. Can I assume all modern browsers now have a standard code they can follow? Say just the @keyframes imageAnimation { one?

2

It’s not so bad nowadays. You can check caniuse.com for the latest on vendor prefixes. It will tell you if it’s required and who for. When you get to the point where you have a build system, you can use postcss to process your CSS files. There’s a plugin available that will automatically add vendor prefixes whenever necessary, and it even checks caniuse.com to make sure it’s not doing unnecessary work.

3

Well that’s certainly good news!