Префиксы поставщиков CSS

Обзор CSS Vendor Prefixes, Autoprefixer и почему они не так актуальны в будущем

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

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

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

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

Тем не менее, давайте посмотрим, что такое префиксы поставщиков.

Я особенно помню их по работе с переходами CSS в прошлом. Вместо того, чтобы просто использоватьtransitionproperty, вам нужно было сделать это:

.myClass {
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

Теперь вы просто используете

.myClass {
	transition: all 1s linear;
}

поскольку это свойство теперь хорошо поддерживается всеми современными браузерами.

Используемые префиксы:

  • -webkit-(Chrome, Safari, iOS Safari / iOS WebView, Android)
  • -moz-(Fire Fox)
  • -ms-(Edge, Internet Explorer)
  • -o-(Opera, Opera Mini)

Поскольку Opera и Edge основаны на Chromium,-o-и-ms-вероятно, скоро выйдет из моды. Но, как мы уже говорили, вендорные приставки в целом тоже выходят из моды.

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

Если вы используете React или Vue, такие проекты, какcreate-react-appи Vue CLI, два распространенных способа начать сборку приложения, используютautoprefixerпрямо из коробки, так что вам даже не придется об этом беспокоиться.

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css:


Tech Wiki Online!