Can I use keyframes without detecting the browser?

I am creating a website that uses some CSS3 keyframe animations.

The guides that I saw suggest using a separate code for each browser, defining which code for which browser, how I go.
eg. This is a guide that offers:

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

And this one , which offers a slightly different grouping, but essentially the same thing.

However, I have seen many articles that say that finding browsers is bad practice on modern web pages.

This page (same site as above)

W3C agrees , but believes that an exception can be made for browser prefixes in css.

, , , ?

+4
1

, , - -.

, , , , .

, , " ", . vender.

Vender , ( , - "" ). .

"" , "" , .. . , , , ; , "" . , , . , "".

, ( - ) , . ( CSS, , ). , , , .

+1

Source: https://habr.com/ru/post/1662725/


All Articles