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

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

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

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

Префикс браузера CSS, который вы можете использовать (каждый из которых зависит от другого браузера):

Android:
-webkit-
Хром:
-webkit-
Fire Fox:
-moz-
Internet Explorer:
-Миз-
IOS:
-webkit-
Opera:
-о-
Сафари:
-webkit-

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

переход

свойство, как показано ниже:

-webkit- переход: все 4s легкость; -moz- переход: все 4s легкость; -Миз- переход: все 4s легкость; -о- переход: все 4s легкость;переход: все 4s легкость;

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

линейный градиент
имущество. Firefox, Opera и современные версии Chrome и Safari используют это свойство с соответствующим префиксом, в то время как ранние версии Chrome и Safari используют свойство prefixed

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

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

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

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

CSS hack использует недостатки в реализации другого элемента или свойства, чтобы заставить другое свойство работать правильно. Например, взломанная модель моделирует недостатки при анализе

Голос семьи
или как браузеры анализируют обратную косую черту (

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

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

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

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

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

-moz-border-radius: 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;border-radius: 10px 5px;
Но теперь, когда браузеры полностью поддерживают эту функцию, вам действительно нужна стандартизованная версия:

border-radius: 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 и ниже не поддерживали его с префиксами или без них).

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