Отдельные CSS стили для каждого браузера

Question

[Иван Желудков]

Я сейчас занимаюсь разработкой вот этого сайта, но суть вопроса не в нём.
У меня есть анимации, вроде этой, которые в Chrome, Opera и даже IE работают правильно, но в Firefox эта анимация не работает и некоторые элементы отображаются неправильно. При этом я протестировал всего одну анимацию на кроссбраузерность, самую сложную судя по всему. Поэтому назрел вопрос.
Правильно ли в таком случае создавать отдельные CSS файлы для каждого браузера или для некоторых браузеров.
Для меня не проблема написать два-три разных CSS файла под разные браузеры, чтобы везде корректно отображалось. Вопрос стоит таким образом: 1. Правильно ли так поступать в моём случае? 2. Не нагружает ли это сервер? 3. Не увеличит ли это размер страницы, которую получит пользователей, ведь он не должен скачивать CSS файл для других браузеров?
Возможно вы предложите другое решение моей проблемы, буду благодарен.
P.S. Так же не смог найти современной статьи на эту тему, какие теги использовать, чтобы задать link браузеру и эту часть кода воспринимал только определённый браузер. Я нашёл такую информацию, но не могу быть уверен, что она актуальна, может есть какие-то более современные решения.

Comments

[lastwish]

А вариант с SVG рассматривался?

[Иван Желудков]

@lastwish уже рассматриваем, но пока точно не известно. Так как пока я не умею в svg анимацию делать.

Answer 1

[Артур Смирнов]

Если вариант с несколькими CSS для Вас будет самым простым - его и делайте. Различия по браузерам можно разрешить на уровне веб-сервера. И nginx, и apache умеют парсить HTTP-заголовки, а значит, смогут определить user-agent, который в них передается, и отдать нужный css-файл. Это практически не повлияет на серверную нагрузку (ничуть не более mod_rewrite) и не повлияет на объем загружаемых пользователем данных, поскольку отдаваться будет всегда только нужный файл.

Comments

[Иван Желудков]

А каким образом это решать на стороне веб сервера? Я не очень разбираюсь в серверах, умею пользоваться isp manager и самые банальные команды в терминале. Просто намекните в каком направлении двигаться, я сам найду решение.

Answer 2

[Сергей Шилов]

Я посмотрел сайт в мозиле, отображается всё, кроме дрели(3-й слайд), я думаю, что есть смысл просто в основном стилевом файле сделать хак для мозилы по средствам @-moz-document url-prefix() {} , да и не париться на счет других стилей.
Ну и, конечно, коллега вам правильно подсказал, что решать проблему нагрузки можно на уровне сервера, определяя по юзер агенту, подключая соответствующие стили. Но в данном случае, на мой взгляд, достаточно прописать пару хаков для мозилы и не париться. Сайт не той тематики и не той информативной подачи, чтобы париться за скорость загрузки страницы.

Comments

[Иван Желудков]

Спасибо, я скорей всего так и поступлю. Думал об этом. И вы как раз в точку.

Answer 3

[Юрий Лобанов]

Вы с данным сайтом задаете не первый вопрос, много спрашиваете о нагрузке на сервер и подобное. У меня в связи с этим есть уточнение: а исходя из в общем-то довольно узкой специфики - какую нагрузку Вы ожидаете на сервер? Неужели на сайт побегут толпы пользователей?
Если не использовать css3 анимацию, а сделать все по старинке - картинками и скриптами - то сайт давно бы уже был готов, сайт в общем-то простой. А на сэкономленные деньги можно нормальный хостинг приобрести. Так что я не понимаю - зачем столько проблем себе делать, с отдельными стилями для браузеров и так далее.
Я сам перфекционист, но иногда нужно идти на уступки здравому смыслу. Кроме того, Вы уверены, что у всех посетителей будут новые браузеры? я бы шел в этом направлении, лучше сделать хотя бы частичную поддержку того же ie8.

Comments

[Иван Желудков]

Я иду тяжелым путём только потому, что необходим такой опыт, так как не в этом проекте, так в следующем буду задавать такие глупые вопросы, поэтому, когда буду делать другой проект, вопросы будут уже другого уровня. Если бы я делал, чтобы отдать проект и получить быстро прибыль, я бы уже закончил, но я сейчас нахожусь на такой стадии, когда очень стремительно набираю опыт.

[Юрий Лобанов]

Так опыт-то от Вас никуда не денется. Я повторяю, что сам такой. Сейчас много таких исполнителей, который идут по пути наименьшего сопротивления, и потому я поддерживаю то, к чему Вы стремитесь. Но все же - не забывайте про здравый смысл :-)

[Иван Желудков]

Да да, я понимаю о чём вы. Спасибо за помощь

Answer 4

[Сергей Мельников]

а ты не пробовал использовать префиксы?

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

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

тогда вся анимация у тебя будет кроссбраузерная

Comments

[Иван Желудков]

у меня js плагин стоит, он префиксы ставит в зависимости от того, какой у тебя браузер, поэтому о проблемах префиксов я вообще не думаю, за меня это делает плагин. Если интересно, вот ссылка. http://leaverou.github.io/prefixfree/

Answer 5

[Максим Гречушников]

Сделал перевод статьи по анимациям для начинающих. От и до расписано что для чего. Живые примеры тут же в тексте. Можно копировать и вставлять сразу к себе на сайт.

в статье есть описание как сделать поддержку разных браузеров

devdocs.ru/verstka/css3-animations-for-beginners