Два нових підходи до подолання кризи з вендорними префіксами

Крейг Баклер

Оригінал: sitepoint.com/css3-vendor-prefix-crisis-solutions-2

Переклад: Влад Мержевич

Веб-розробники почали хвилюватися щодо кризи з вендорними префіксами з лютого 2012 року. Підводячи підсумок, ось що має статися в ідеальному світі.

  1. Виробники браузерів впроваджують експериментальні властивості CSS3 за допомогою власних префіксів, наприклад: -webkit-transform, -moz-transform, -ms-transform, -o-transform.
  2. Розробники можуть використовувати сучасні технології без порушення кросбраузерності. Щоб властивості працювали скрізь, їх можна перераховувати з префіксами або без них.
  3. Після того, як властивість входить у рекомендацію W3C, всі виробники браузерів можуть забезпечити стабільну властивість без префікса, наприклад, transform.
  4. За необхідності розробники можуть видаляти властивості з префіксами зі своїх стилів. Однак це не є обов'язковим, якщо властивість без префікса визначається останньою у правилах CSS.

Ось що відбувається у реальному світі.

  1. Виробники браузерів впроваджують експериментальні властивості CSS3 за допомогою власних префіксів. У деяких випадках виробники просувають їх як "стандарт" HTML5, навіть якщо властивості працюють лише для конкретного пристрою або взагалі не представлені в W3C.
  2. Деякі розробники використовують пропрієтарні властивості лише для одного браузера, наприклад, -webkit-transform. Це може бути внаслідок незнання, через лінощі або тому, що тестують на обмеженій кількості пристроїв.
  3. Після того, як властивість входить у рекомендацію W3C, всі виробники браузерів можуть забезпечити стабільну властивість без префікса, наприклад, transform...
  4. але розробники не звертають уваги на зміну своїх стилів. Сайт виглядає добре в деяких браузерах, але гірше в інших, навіть якщо він підтримує стандарт специфікації W3C.
  5. Постачальники виражають занепокоєння і додають підтримку інших префіксів у свій браузер, наприклад, Opera впровадила префікс -webkit для деяких властивостей. Процес порушується і, хоча ще зарано передбачити результат, більшість розробників вважають, що це поганий крок.

Ми докладно обговорили ці питання на SitePoint, але не прийшли до простих рішень. Тим не менш, членами W3C було піднято два цікавих пропозиції.

Варіант 1. Властивості без префікса підтримуються з першого дня

Перше пропозиція прийшла від Флоріана Рівоаля, представника Opera в W3C.

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

Автори повинні писати свої стилі, використовуючи властивості без префікса і лише додавати версії властивостей з префіксом (нижче властивостей без префікса) при виявленні помилок або несумісності в поведінці браузера.

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

Наприклад, ви можете використовувати наступний код c transform у вашому CSS:

transform: rotate(30deg);

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

transform: rotate(30deg);
-webkit-transform: rotate(-30deg);

Це просте рішення і його легко реалізувати. Більшість існуючих стилів буде продовжувати працювати і властивості з префіксами будуть потрібні рідко. У більшості випадків вам знову ніколи не доведеться оновлювати CSS.

Однак, що станеться, якщо Webkit змінить обертання за замовчуванням на обертання за годинниковою стрілкою, затверджене W3C? Розробники мусять будуть виправляти свої таблиці стилів, видаляючи або переставляючи властивість -webkit-transform: rotate(-30deg). Нажаль, не всі використовують одну й ту ж версію Webkit одночасно. Ви можете стикнутися з ситуацією, коли ваш сайт працює в Chrome, але не працює кілька місяців в Safari.

Варіант 2. Новий модифікатор !производитель-draft

Друге пропозиція прийшла від Франсуа Ремі.

Дозвольте представити модифікатор "!производитель-draft". Я пропоную з самого початку використовувати властивості без префікса, але з маркером, пояснюючи яку версію властивості ми вбудували в наш CSS:

border-radius: 3px !webkit-draft;

Будь-який не Webkit-браузер, розуміючи border-radius у випадку, якщо він сумісний з webkit-draft, може підтримувати декларацію. У цьому відмінність від префіксів: інші браузери не видають себе за Webkit, вони просто визнають, що підтримують одну певну властивість шляхом додавання webkit-draft. Несумісні з цим методом браузери будуть просто ігнорувати декларацію. Для браузерів, які змінюють поведінку властивості, рекомендуємо повторювати прапор "!производитель-draft" (з номером версії, якщо потрібно).

Це вирішує проблему зі зміною значення властивості, а не її імені (аналогічно до !important). Знову ж таки, може бути використаний наступний код з transform:

transform: rotate(30deg);

Але за замовчуванням обертання проти годинникової стрілки може бути виправлено в будь-якому браузері, дотримуючись специфікації Webkit.

transform: rotate(30deg);
transform: rotate(-30deg) !webkit-draft;

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

Це також дозволяє впровадити підтримку версій, наприклад.

transform: rotate(30deg);
transform: rotate(-30degrees) !webkit-draft;
transform: rotate(-30deg) !webkit-draft-2;

Це гнучке рішення, яке, в кінцевому підсумку, враховує проблему розвитку властивостей з часом.

На жаль, цей варіант складніший у реалізації і впровадження може зайняти кілька місяців, навіть якщо всі виробники домовляться сьогодні. Технічно це може бути краще, але підхід принципово інший і він може порушити існуючі стилі. У короткостроковій перспективі виробники, ймовірно, будуть підтримувати як префікси, так і модифікатори, що може призвести до плутанини.

Мені подобаються обидва рішення. З точки зору перспективи варіант з модифікаторами виглядає найбільш логічним, але я сумніваюся, що його можна враховувати, поки постачальники не "завершать" роботу над CSS3 і не розпочнуть CSS4.

Підтримка властивостей без префіксів більш практична, але напевно викличе безліч проблем, які не можуть бути виправлені в CSS самостійно. Але, можливо, це ціна, яку ви платите за використання ек

Часті запитання