Пора переглянути вендорные префікси в CSS

2

Від автора: префікс -webkit — сьогодні настільки поширений в CSS, що деякі сайти відмовляються правильно працювати без нього. У той час як для розробників вендорные префікси css останні пару років означали прямий знак не зовсім ідеальною роботи властивостей, це призвело до того, що Mozilla пішли на відчайдушний, але необхідний крок. У Firefox 46 чи 47 (реліз буде в квітні або травні 2016) Mozilla планує ввести підтримку серії нестандартних –webkit — префіксів для підвищення сумісності браузера з даними префіксом (навіть на мобільних пристроях).

Ідея не нова, Microsoft Edge також підтримує різні -webkit — префікси для сумісності. Opera почала підтримувати -webkit — префікси в 2012, а потім перейшла на движок Webkit Blink. W3C і розробники браузерів не планували використовувати даний префікс в розробці сайтів:

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

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

Способи Mozilla і Microsoft більшості сайтів тільки нашкодять. У більшої частини сайтів вже будуть підключені префікси –moz — або з’ясується, що з новим оновленням Mozilla стане підтримувати нові властивості без потреби вносити зміни. Однак як професійні веб-розроблювачі ми повинні покінчити з цим і зрозуміти, що в деяких дизайнах можуть виявитися неоднозначні результати. Ви, може бути, вже й самі знаєте, які з ваших проектів угробить це оновлення. Веб-розробники, настав час переосмислити свій підхід до вендорным префиксам і до їх тестування на сайтах.

Нові префікси

Mozilla збирається включити ряд –webkit — префіксів. З того, що я зібрав, видно, що Mozilla не збирається порівнювати свій список з властивостями Edge. Не всім властивостям потрібна сумісність з движком Mozilla. Серед префіксів, які Mozilla збирається додати, судячи по сторінці вікі Compatibility/Mobile/Non Standard Compatibility будуть наступні:

-webkit-flexbox

-webkit — для градієнтів

-webkit-transforms

-webkit-transitions

-webkit-appearance

-webkit-background-clip

-webkit-device-pixel-ratio

-webkit-animation

-webkit-border*

Деякі інші властивості можуть бути @-webkit-keyframes.

Тест на кросбраузерність буде мати вирішальне значення

Якщо ви веб-розробник не стали включати –moz — префікс, щоб не перевіряти нові властивості CSS Firefox, а термін здачі підходить до кінця, і замовник змушує вас додати даний префікс, то вам доведеться заново тестувати сайт в Firefox 46 чи 47. Дані версії вийдуть у квітні або травні, так що у вас ще є трохи часу.

Щоб протестувати свій веб-сайт, не чекаючи виходу Firefox 46/47, можна активувати дані зміни в Firefox Nightly за допомогою налаштування layout.css.prefixes.webkit в about:config. Якщо у вас встановлена остання версія Nightly, то за замовчуванням має стояти true. Поки що в Firefox Nightly працюють не всі зміни –webkit — префіксів, але все ж це хороший майданчик, щоб протестувати, як ваш сайт скоро буде виглядати. Я б почекав березня перед серйозним тестуванням сайту в Firefox Nightly.

Набагато важливіше, що Microsoft Edge вже інтерпретує і відображає –webkit — префікси схожим чином. А це означає, що будь-які WebKit стилі вашого сайту вже відображаються в браузері, від якого цього зовсім не чекали. Якщо ви ще не працювали з даними браузером, то встановіть собі Windows 10 і отримаєте доступ до нього для тестування сайтів.

Вендорные префікси поступово йдуть

На щастя, вендорные префікси поступово йдуть паралельно з тим, як команди розробників знаходять нові рішення. Команда Chrome/Blink трохи змінили свій підхід:

«Забігаючи наперед, замість включення вендорних префіксів за замовчуванням ми будемо тримати звичайні властивості за прапором «активувати експериментальні властивості веб-платформи» в about:flags до тих пір, поки дані властивості не будуть включені за замовчуванням.» — Команда The Chrome/Blink

Команда Firefox пішла по схожому шляху: «Основний напрямок роботи в Mozilla зараз це відхід від вендорних префіксів, шляхом їх відключення або ж переведення їх у стан звичайних властивостей, якщо вони вже стабільні. Це як мінімум наша спільна політика, окремі випадки заслуговують винятків. » — Борис з Mozilla

Microsoft Edge також націлені на видалення підтримки префіксів: «Microsoft також намагається позбутися вендорних префіксів Edge. Це означає, що розробникам при використанні особливих HTML5 тегів або CSS властивостей не доведеться додавати спеціальний префікс для браузера Edge. Замість цього розробники будуть писати код.» — Mashable

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

Відхід від вендорних префіксів означає тільки одне – методика витонченої деградації через префікси більше не вихід. Виділення конкретних браузерів через вендорные префікси (наприклад, для Chrome) не входило в завдання цих префіксів; розробникам завжди рекомендувалося використовувати всі префікси (від –webkit — до –o-). Якщо ви використовуєте який-небудь функціонал, який працює на властивостях з вендорными префіксами, а також використовували тенхнику витонченої деградації в вашому дизайні для інших браузерів, то це більше не працює.

Висновок

Часи змінюються. WebKit домінування було ненавмисним і викликало переполох і несумісність в інтернеті. Інші браузери шукають спосіб розширити сумісність шляхом додавання –webkit — префіксів. Поступово, з відходом вендорних префіксів, піде і дана проблема. Розробникам ж варто перевірити, чи не викликає використання префіксів небажаних наслідків не WebKit браузерах.