Что такое префиксы поставщиков CSS или браузеров?

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

Происхождение префиксов поставщиков

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

Общие префиксы

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

Вы можете использовать следующие префиксы браузера CSS (каждый из которых относится к разному браузеру):

• Android:

  -webkit-

• Хром:

  -webkit-

• Fire Fox:

  -моз-

• Internet Explorer:

  -РС-

• iOS:

  -webkit-

• Опера:

  -о-

• Сафари:

  -webkit-

Добавление префикса

В большинстве случаев, чтобы использовать новое свойство стиля CSS, вы берете стандартное свойство CSS и добавляете префикс для каждого браузера. Версии с префиксом всегда будут первыми (в любом порядке, который вы предпочитаете), в то время как обычное свойство CSS будет последним. Например, если вы хотите добавить в документ переход CSS3, вы должны использовать свойство перехода, как показано ниже:

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

Помните, что некоторые браузеры имеют другой синтаксис для определенных свойств, чем другие, поэтому не думайте, что версия свойства с префиксом браузера точно такая же, как и стандартное свойство. Например, чтобы создать градиент CSS, вы используете свойство linear-gradient. Firefox, Opera и современные версии Chrome и Safari используют это свойство с соответствующим префиксом, в то время как ранние версии Chrome и Safari используют свойство с префиксом -webkit-gradient.

Кроме того, Firefox использует значения, отличные от стандартных.

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

Префиксы поставщиков - это не взлом

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

Взлом CSS использует недостатки в реализации другого элемента или свойства, чтобы заставить другое свойство работать правильно. Например, взлом блочной модели использовал недостатки в синтаксическом анализе семейства голосов или в том, как браузеры анализируют обратную косую черту \. Но эти хаки были использованы, чтобы решить проблему разницы между тем, как Internet Explorer 5.5 обрабатывал коробочную модель и как Netscape интерпретировал это, и не имеет ничего общего с голосовым стилем семьи. К счастью, эти два устаревших браузера - те, о которых нам не нужно беспокоиться в наши дни.

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

Префиксы поставщиков раздражают, но временно

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

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10 пикселей;
-webkit-border-top-right-radius: 5 пикселей;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-нижний левый-радиус: 5 пикселей;
радиус границы: 10 пикселей 5 пикселей; 

Но теперь, когда браузеры полностью поддерживают эту функцию, вам действительно нужна только стандартизованная версия:

радиус границы: 10 пикселей 5 пикселей; 

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

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