Производительность и загрузка DOM с использованием префиксов конкретных поставщиков для CSS3

Question

Мне было любопытно какое-то время с этим сейчас.

Свойства css3 еще не стандартизированы, но могут быть реализованы браузерами с использованием префикса для конкретного браузера. Например, можно использовать border-radius, и он отлично работает в современных браузерах. Однако для предыдущих версий поставщиков браузеров мы можем использовать для работы префиксы специфических свойств, таких как -moz, -webkit и т. Д.

Теперь для своей страницы я использовал градиенты и border-radius, создал пару классов, которые их используют, и применил эти классы.

Что из следующего лучше сделать?

1. Использование javascript для определения наличия поддержки и использование свойств, если они поддерживаются, если выше ложно, проверьте пользовательский агент и примените свойства, специфичные для поставщика.

2. Использование всех префиксов браузера в классах и позволить браузеру использовать то, что ему подходит.

Меня интересует и беспокоит производительность и время загрузки DOM.

Answer 1

Что из следующего лучше сделать?

1. Использование javascript для определения наличия поддержки и использование свойств, если они поддерживаются, если выше ложнопроверьте пользовательский агент и примените соответствующие свойства поставщика.

2. Используя все префиксы браузера в классах и разрешите браузеру использовать тот, который ему подходит.

Вариант 1 состоит из использования JavaScript для определения поддержки, затем условного написания кода CSS с префиксами или без них и предоставления браузеру возможности применять стили.

Вариант 2 состоит из простого использования CSS иполагаться на браузер, чтобы игнорировать префиксы / объявления, которые он не понимает.

Как видите, в варианте 1 вводится дополнительный слой (JavaScript), который не нужен, если вы просто хотите использовать некоторые возможности CSS3, где это возможно., Вариант 2 будет наиболее эффективным решением.

Answer 2

Как всегда с этим вопросом, ответ - это зависит.Это зависит от того, какие префиксы вы используете, как часто они встречаются в HTML, с каким браузером вы тестируете и т. Д.

Решение состоит в том, чтобы написать код, профилировать его и выяснить.Очень часто вы обнаружите, что производительность приемлема в любом случае.

Answer 3

Я использую вариант 2 - добавьте все префиксы браузера (а также версию без префикса) в CSS:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Браузеры пропустят объявления, которые они не понимают, без проблем (хотяВаш CSS не будет проверяться), но все еще применяет стили.Вероятно, лучше использовать генератор CSS , чтобы избежать необходимости вводить каждый префикс.

Вам следует избегать использования Javscript для обнаружения функций CSS, поскольку это нарушает разделение проблем - CSS для презентации, а Javascript для поведения.