CSS: Префиксы
CSS не стоит на месте и в него постоянно добавляются новые правила. Перед тем, как свойство попадёт в официальный стандарт, оно проходит долгий путь обсуждений и «шлифовки». Производители браузеров тоже стараются идти в ногу со временем и добавляют в новые версии своих продуктов поддержку современных свойств.
Это используется для тестирования и корректировки поведения свойства в браузерах. Если правило важное, то впоследствии производители браузеров «договорятся» о тонкостях использования правил и внедрят поддержку в свои новые браузеры.
Многие из свойств, которые могут казаться вам стандартными прошли путь от идеи и частичной реализации до обычного свойства, которое вы будете использовать в повседневной работе. Что же происходит, если появляется новое свойство?
- Оно проходит этап обсуждения. Разработчики договариваются о том, как будет работать правило, на что влиять и как влиять на страницу
- Разработчики браузеров понемногу добавляют функционал нового свойства в свой продукт. Обычно, в это время, разные браузеры немного по разному обрабатывают свойства
- Свойство попадает в стандарт и все браузеры начинают поддерживать его «официально»
Если с пунктами 1 и 3 всё ясно, то пункт 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— свойство для браузеров на основе решений от компании Mozillabox-shadow— свойство без префиксов
Если браузер не мог обработать свойство box-shadow, то он искал свой префикс -webkit- или -moz-. Если не найдено и это, то правило игнорируется. Сейчас же использование таких префиксов поможет использовать свойство box-shadow в очень старых браузерах Chrome, Safari и Firefox.
Вам не нужно постоянно держать это в голове. Многие процессы уже автоматизированы и добавление префиксов осуществляется автоматически. В будущем вы откроете все инструменты для этого, если будете заниматься вёрсткой. Но очень важно знать о том, что такое префиксы и как они помогают новым и старым браузерам
Задание
В данном уроке нет задания. Можете нажимать кнопку «Проверить»
Полезное
Проверить совместимость разных свойств и необходимость указывать префиксы можно на сайте Can I use
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Ваше упражнение проверяется по этим тестам
1const { test } = require('tests');
2
3test(({ query, expect }) => {
4 expect(true);
5});
6Решение учителя откроется через:
