Что такое вендорные префиксы?

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

Основные префиксы:

• -webkit-: Chrome, Safari, Opera (некоторые версии), большинство мобильных браузеров (в т.ч. на Android и iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (некоторые версии).
• -o-: Opera (старые версии).

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

.element {
  -webkit-border-radius: 10px; /* Safari версии 5 и ниже */
  -moz-border-radius: 10px; /* Firefox версии 4 и ниже */
  border-radius: 10px; /* Стандартное свойство */
}

В настоящее время использование вендорных префиксов значительно сократилось благодаря более активному внедрению новых CSS-свойств всеми браузерами. Однако они могут быть необходимы для поддержки старых версий браузеров или при работе с экспериментальными API.

Для автоматизации управления вендорными префиксами часто используются PostCSS с плагином Autoprefixer.

// Пример конфигурации PostCSS с Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%'] // Настройка поддерживаемых браузеров
    })
  ]
};

Autoprefixer анализирует CSS и добавляет необходимые префиксы на основе настроек совместимости с браузерами. Это упрощает разработку и снижает вероятность ошибок, связанных с ручным добавлением и управлением префиксами.