Separate CSS styles for each browser

Question

css

I am currently developing this site , but the essence of the issue is not in it.
I have animations like this one that work correctly in Chrome, Opera and even IE, but in Firefox this animation doesn't work and some elements don't display correctly. At the same time, I tested only one animation for cross-browser compatibility, the most difficult one, apparently. Therefore, the question arose.
Is it correct in this case to create separate CSS files for each browser or for some browsers.
It's not a problem for me to write two or three different CSS files for different browsers so that they display correctly everywhere. The question is this: 1. Is it right to do so in my case? 2. Doesn't it load the server?3. Won't this increase the size of the page the user will get, since he doesn't have to download the CSS file for other browsers?
Perhaps you will offer another solution to my problem, I will be grateful.
PS I also could not find a modern article on this topic, what tags to use to set the link to the browser and only a certain browser perceived this part of the code. I found such information, but I can not be sure that it is relevant, maybe there are some more modern solutions.

Answer 1

If the option with several CSS is the easiest for you, then do it. Browser differences can be resolved at the web server level. Both nginx and apache can parse HTTP headers, which means they will be able to determine the user-agent that is passed to them and give the required css file. This will practically not affect the server load (no more than mod_rewrite) and will not affect the amount of data uploaded by the user, since only the required file will always be given.

Answer 2

You are asking this site not the first question, you ask a lot about the load on the server and the like. In connection with this, I have a clarification: and based on a rather narrow specificity, what kind of load do you expect on the server? Is it possible that crowds of users will run to the site?
If you do not use css3 animation, but do everything the old fashioned way - with pictures and scripts - then the site would have been ready long ago, the site is generally simple. And with the money you save, you can buy a normal hosting. So I don't understand - why do you have so many problems with separate styles for browsers and so on.
I am a perfectionist myself, but sometimes you have to make concessions to common sense. Also, are you sure that all visitors will have new browsers? I would go in this direction, it is better to make at least partial support for the same ie8.

Answer 3

Have you tried using prefixes?

@-webkit-keyframes blinkpulse { }
@-moz-keyframes blinkpulse { }
@keyframes blinkpulse { }

-webkit-animation: ... ;
-moz-animation: ... ;
animation: ... ;

then all animation will be cross browser

Answer 4

Made a translation of an article on animations for beginners. From and to painted what for what. Live examples are right there in the text. You can copy and paste directly to your site.
the article has a description of how to make support for different browsers
devdocs.ru/verstka/css3-animations-for-beginners