Что является причиной для добавления префиксов в новые функции CSS?

Есть ли уважительная причина для браузеров префикс новых функций CSS вместо того, чтобы позволить веб-мастерам использовать версию без префикса?

Например, пример кода для градиента фона выглядит так:

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

Какой смысл заставлять веб-мастеров копировать-вставлять один и тот же код четыре раза, чтобы получить одинаковый результат?

Примечание. Одна из часто упоминаемых причин заключается в том, что префиксные стили должны быть временными, если либо браузер неправильно реализует спецификацию, либо спецификация не является окончательной .

ИМО, эта причина чепуха

• Если механизм браузера не реализует спецификацию правильно, браузер не будет совместим, независимо от того, реализует ли он его в форме без префикса или не реализует его в форме с префиксом.
• Если спецификация не является окончательной, это может иметь значение, когда были предыдущие реализации с тем же именем. Например, если бы CSS2 имел linear-gradient, но CSS3 предназначался для расширения linear-gradientс дополнительными функциями, было бы разумно временно префикс новой, черновой реализации, префикс, -css3-<style>дифференцируя рабочий CSS2 и экспериментальный CSS3. На практике CSS2 не имеет linear-gradientили других новинок CSS3.

Я бы также понял, если бы разные браузеры имели разные форматы реализации : например, скажем, требуется Firefox для тени текста <weight-of-shadow distance-x distance-y color>, а Chrome требуется <distance-x distance-y weight-of-shadow color>. Но на самом деле это не так; по крайней мере, все новые возможности CSS3, которые я использовал до сих пор, имели такой же формат.

Согласно этому примечанию W3C :

Чтобы избежать конфликтов с будущими функциями CSS, спецификация CSS2.1 оставляет за собой префиксный синтаксис для собственных и экспериментальных расширений CSS.

До того, как спецификация достигнет стадии Рекомендации кандидата в процессе W3C, все реализации функции CSS считаются экспериментальными. Рабочая группа CSS рекомендует, чтобы реализации использовали синтаксис с префиксом поставщика для таких функций, в том числе в рабочих проектах W3C. Это позволяет избежать несовместимости с будущими изменениями в проекте.

Вы можете следить за состоянием CSS здесь и здесь .

Я бы также понял, если бы у разных браузеров были разные форматы реализации ... но на самом деле это не так; по крайней мере, все новые возможности CSS3, которые я использовал до сих пор, имели такой же формат.

Это говорит мне, что вы не играли в эту игру достаточно долго.

Проблема в том, что веб-браузеры никогда не реализуют новые функции одинаково. Обычно браузер реализует функции, которые не были стандартизированы, и в результате все работает по-разному в разных браузерах.

Мало того, что новые функции часто содержат ошибки (мы будем избегать вызова IE по имени), и поэтому, даже если синтаксис для различных элементов одинаков, результат будет другим.

Это вызывает головную боль для разработчиков, которые пытаются использовать новые функции. После того как они закончили писать свою таблицу стилей, они быстро поняли, что она отображается по-разному в разных браузерах по необъяснимым причинам.

До появления префиксов разработчики были вынуждены полагаться на обнаруживаемые различия между браузерами, часто используя ошибки в синтаксическом анализаторе CSS. Это привело к таким мерзостям, как это:

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

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

Стандартизируя префиксы, он позволяет разработчикам использовать функции, нестабильные в разных браузерах. -moz-И -webkit-префиксы сделать это совершенно ясно , что автор пытается представить стиль , который должен быть применен только в определенных веб - браузеров.

Как только функции станут стабильными и браузеры начнут действовать одинаково, вы можете удалить префикс и объявить функцию один раз.

Я думаю, что важно понимать, что префиксы НЕ означают, что вы должны объявлять стили один раз для каждого браузера. Префиксы означают, что должны объявлять дополнительные стили всякий раз, когда вы обнаружите, что веб-браузер не соответствует стандарту. Например, вместо приведенного выше кода вы должны начать с:

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Если вы вдруг осознаете, что Microsoft не может правильно рассчитать линейный градиент, вы можете добавить префикс для решения проблемы в IE:

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Внезапно ваша страница выглядит одинаково в каждом браузере, несмотря на то, что один из них сделал что-то по-другому.

Вы найдете, что это было рассмотрено очень подробно в этой статье на A List Apart .

Если механизм браузера не реализует спецификацию правильно, браузер не будет совместим, независимо от того, реализует ли он его в форме без префикса или не реализует его в форме с префиксом.

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