CSS: Префиксы

CSS не стоит на месте и в него постоянно добавляются новые правила. Перед тем, как правило попадёт в официальный стандарт, оно проходит долгий путь обсуждений и «шлифовки». Производители браузеров тоже стараются идти в ногу со временем и добавляют в новые версии своих продуктов поддержку новых правил.

Это используется для тестирования и корректировки поведения свойства в браузерах. Если правило важное, то впоследствии производители браузеров «договорятся» о тонкостях использования правил и внедрят поддержку в свои новые браузеры.

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

Одним из примеров правила, которое ранее требовало использования префиксов — box-shadow, позволяющее добавить тень к блочному элементу. Если при использовании box-shadow необходима поддержка старых браузеров, то запись принимает следующий вид:

.block-shadow {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

У правил появились префиксы -webkit- для браузеров Google Chrome и Safari, а также префикс -moz- для браузера Firefox. Теперь можно быть уверенным, что даже в старых браузерах у нужного нам блока появится тень.

Чтобы узнать, стоит ли использовать префиксы для того или иного правила, можно воспользоваться сервисом Can I use. Он покажет поддержку правила браузерами и подскажет, если необходимо добавить префиксы.

Задание

В данном уроке нет задания. Можете нажимать кнопку «Проверить»