Префікси постачальника CSS

Що вони таке і для чого слід їх використовувати

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

Коли вперше було запроваджено CCS3, ряд збуджених властивостей почав вражати різні браузери в різний час. Наприклад, браузери, що працюють на Webkit (Safari та Chrome), першими запровадили деякі властивості стилю анімації, такі як перетворення та перехід. Використовуючи властивості префіксів постачальників, веб-дизайнери змогли використати ці нові функції у своїй роботі та побачити їх у браузерах, які підтримують їх відразу, замість того, щоб чекати, коли кожен інший виробник браузера наздожене!

Загальні префікси

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

Префікси браузера CSS, якими ви можете скористатися (кожен з яких є специфічним для іншого браузера), є:

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Опера: -o-
  • Сафарі: -webkit-

У більшості випадків для використання абсолютно нового властивості стилю CSS ви берете стандартну властивість CSS та додаєте префікс для кожного браузера. Попередньо встановлені версії завжди будуть першими (у будь-якому порядку, який ви хочете), тоді як звичайне властивість CSS буде останнім. Наприклад, якщо ви хочете додати перехід CSS3 до свого документа, ви використовуєте властивість переходу, як показано нижче:

-webkit-перехід: всі 4с легкість;
-моз-перехід: всі 4с легкість;
-ms-перехід: всі 4s легкість;
-о-перехід: всі 4с легкість;
перехід: всі 4с легкість;

Пам’ятайте, що деякі веб-переглядачі мають певний синтаксис для певних властивостей, ніж інші, тому не припускайте, що попередньо встановлена ​​браузером версія властивості точно така ж, як і стандартна властивість. Наприклад, щоб створити градієнт CSS, ви використовуєте властивість лінійного градієнта. Firefox, Opera та сучасні версії Chrome та Safari використовують цю властивість із відповідним префіксом, тоді як у ранніх версіях Chrome та Safari використовується властивість -webkit-gradient.

Також Firefox використовує різні значення, ніж стандартні.

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

Префікси постачальника - це не рубати

Коли вперше були введені префікси постачальників, багато веб-професіоналів цікавились, чи це хакер чи зсув назад у темні дні, коли потрібно передати код веб-сайту для підтримки різних браузерів (пам’ятайте, що "Цей сайт найкраще переглядати в IE"). Однак префікси постачальників CSS не є хаками, і ви не повинні мати застережень щодо використання їх у своїй роботі.

Злом CSS використовує недоліки в реалізації іншого елемента або властивості, щоб змусити іншу властивість працювати належним чином. Наприклад, хакерська модель хаку використовувала недоліки при синтаксичному розборі сімейства голосів або в тому, як браузери аналізують зворотні риски. Але ці хаки використовувались для вирішення проблеми різниці між тим, як Internet Explorer 5.5 обробляв модель коробки та тим, як її інтерпретував Netscape, і не мають нічого спільного з сімейним стилем голосу. На щастя, ці два застарілі браузери - це ті, з якими нам не доводиться турбуватися в ці дні.

Префікс постачальника не є злому, оскільки він дозволяє специфікації встановлювати правила для того, як можна реалізувати властивість, і в той же час дозволяє розробникам браузера реалізувати властивість по-іншому, не порушуючи все інше. Крім того, ці префікси працюють з властивостями CSS, які згодом стануть частиною специфікації. Ми просто додаємо код, щоб отримати доступ до ресурсу завчасно. Це ще одна причина, чому ви закінчуєте правило CSS звичайним властивістю без префіксу. Таким чином, ви можете скинути попередньо встановлені версії після досягнення повної підтримки браузера.

Хочете знати, що таке підтримка браузера для певної функції? Веб-сайт CanIUse.com - чудовий ресурс для збору цієї інформації та повідомлення про те, які браузери та які версії цих браузерів на даний момент підтримують функцію.

Префікси постачальників дратівливі, але тимчасові

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

-моз-кордон-радіус: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
межі-радіус: 10px 5px;

Але тепер, коли браузери повністю підтримали цю функцію, вам справді потрібна лише стандартизована версія:

межі-радіус: 10px 5px;

Chrome підтримує властивість CSS3 з версії 5.0, Firefox додав його у версії 4.0, Safari додав її у 5.0, Opera у 10.5, iOS в 4.0 та Android у 2.1. Навіть Internet Explorer 9 підтримує його без префікса (а IE 8 і нижчі не підтримували його з префіксами або без них).

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