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

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

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

1. Оно проходит этап обсуждения. Разработчики договариваются о том, как будет работать правило, на что влиять и как влиять на страницу
2. Разработчики браузеров понемногу добавляют функционал нового свойства в свой продукт. Обычно, в это время, разные браузеры немного по разному обрабатывают свойства
3. Свойство попадает в стандарт и все браузеры начинают поддерживать его «официально»

Если с пунктами 1 и 3 всё ясно, то пункт 2 самый интересный. В момент добавления функционала уже можно начинать пользоваться свойством, учитывая следующие моменты:

1. Поведение может немного отличаться в разных браузерах
2. Свойство не будет работать в ранних версиях браузера

Чтобы не путать разработчиков, свойства, которые ещё полностью не поддерживаются и не являются частью стандарта обозначают специальными конструкциями — префиксами. Они помогают браузеру определить, что перед ним новое свойство и, если для него существует реализация, то оно будет выполнено. Если реализации нет, то свойство будет считаться недействительным и игнорироваться

Например, раньше свойство box-shadow, которое устанавливает тень для элемента находилось в процессе обсуждения и реализации. Для его использования необходимо было дополнительно указать префиксы — небольшие дополнения к свойству, которые указываются перед названием свойства. В итоге CSS выглядел так:

.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);
}

Можно заметить три упоминания свойства box-shadow:

• -webkit-box-shadow — свойство для браузера на WebKit
• -moz-box-shadow — свойство для браузеров на основе решений от компании Mozilla
• box-shadow — свойство без префиксов

Если браузер не мог обработать свойство box-shadow, то он искал свой префикс -webkit- или -moz-. Если не найдено и это, то правило игнорируется. Сейчас же использование таких префиксов поможет использовать свойство box-shadow в очень старых браузерах Chrome, Safari и Firefox.

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

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