Яка причина вводити префікси в нові функції 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 тут і тут .

Я також зрозумів, якби різні браузери мали різні формати реалізації ... [b] ut насправді, це не так; принаймні всі нові функції 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 .

Якщо двигун браузера не реалізує специфікацію належним чином, браузер не буде сумісним, незалежно від того, чи не реалізує він його у попередньо встановленій формі, чи не реалізує його у попередньо встановленій формі.

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