Префиксы

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. Теперь можно быть уверенным, что даже в старых браузерах у нужного нам блока появится тень.

Задание

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


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

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