Что такое префиксные свойства и зачем они нужны?

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

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

Что интереснее, префиксные свойства позволяют работать с экспериментальными фичами браузера, например изменять скроллбары:

/* ширина скроллбара */
::-webkit-scrollbar {
  width: 10px;
}

/* задний фон */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* ползунок */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* ползунок при наведении */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

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

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

Спасибо за прочтение, это важно для меня ❤️

Пример с кастомными скроллбарами

#web #theory #web #design