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

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

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

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

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

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

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

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

-WebKit-переход: все 4S легкость;
-Моз-переход: все 4с легкость;
-мс-переход: все 4с легкость;
-o-переход: все 4с легкость;
переход: все 4с легкость;

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

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

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

Приставочные префиксы — не хак

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

Хакер CSS использует недостатки в реализации другого элемента или свойства, чтобы заставить другое свойство работать правильно. Например, при взломе блочной модели использовались недостатки в разборе голосового семейства или в том, как браузеры анализируют обратную косую черту \. Но эти хаки были использованы для устранения проблемы разницы между тем, как 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;
радиус границы: 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 и ниже не поддерживают его с префиксами или без них).

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

Ссылка на основную публикацию