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. Он покажет поддержку правила браузерами и подскажет, если необходимо добавить префиксы.
Задание
В данном уроке нет задания. Можете нажимать кнопку «Проверить»