Вендорные префиксы CSS
Новые свойства, которые постоянно появляются в CSS, но еще не принятыми окончательно в браузерах отсутствуют. Точнее они есть, но с применением специальных суфиксов (префикс). Для каждого браузера используются свои названия этих префиксов.
Вендорные префиксы для разных браузеров
- -moz- для браузера Firefox
- -webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
- -ms- для браузера Internet Explorer
- -o- , -op- , -xv- для браузера Opera
- -icab- — префикс для браузера iCab
- -khtml- для просмотра HTML документов разработанный для среды KDE для UNIX-систем.
Для использования префикса нужно добавить его в начало перед основным названием свойства. Например
style> .primer< -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); > /style>
Вендорные префиксы
Вендорные префиксы — это специальные приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, или не полностью реализованных в браузере CSS-свойств и значений.
Список вендорных префиксов по браузерам:
- -webkit- — Chrome, Safari, Edge, новые версии Opera.
- -moz- — Firefox.
- -o- — Старые версии Opera.
- -ms- — Internet Explorer.
Вручную прописывать их не нужно, для этого используются специальные инструменты которые автоматизируют процесс, например SASS-компилятор с дополнительными настройками. Для ознакомления можно использовать интерактивную площадку https://autoprefixer.github.io/.
Например, следующий CSS-код будет работать в большинстве последних версий современных браузеров.
.example display: flex; transition: all 0.5s; background: linear-gradient(to bottom, white, black); > После обработки автопрефиксером получаем следующий код, который будет гарантированно работать в последних 4-х версиях всех современных браузеров. Браузеры которые поддерживают нативные свойства и значения проигнорируют их аналоги с вендорными префиксами, и наоборот.
.example display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: -webkit-gradient( linear, left top, left bottom, from(white), to(black) ); background: -o-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black); > Нужное количество версий выбирается в интерфейсе автопрефиксера в специальном формате Browserslist — конфигурации описывающей версии браузеров которые должен поддерживать код проекта. Все современные инструменты, которые каким либо образом преобразовывают код, ориентируются на эту единую для всего проекта конфигурацию.
CSS: Префиксы
CSS не стоит на месте и в него постоянно добавляются новые правила. Перед тем, как свойство попадёт в официальный стандарт, оно проходит долгий путь обсуждений и «шлифовки». Производители браузеров тоже стараются идти в ногу со временем и добавляют в новые версии своих продуктов поддержку современных свойств.
Это используется для тестирования и корректировки поведения свойства в браузерах. Если правило важное, то впоследствии производители браузеров «договорятся» о тонкостях использования правил и внедрят поддержку в свои новые браузеры.
Многие из свойств, которые могут казаться вам стандартными прошли путь от идеи и частичной реализации до обычного свойства, которое вы будете использовать в повседневной работе. Что же происходит, если появляется новое свойство?
- Оно проходит этап обсуждения. Разработчики договариваются о том, как будет работать правило, на что влиять и как влиять на страницу
- Разработчики браузеров понемногу добавляют функционал нового свойства в свой продукт. Обычно, в это время, разные браузеры немного по разному обрабатывают свойства
- Свойство попадает в стандарт и все браузеры начинают поддерживать его «официально»
Если с пунктами 1 и 3 всё ясно, то пункт 2 самый интересный. В момент добавления функционала уже можно начинать пользоваться свойством, учитывая следующие моменты:
- Поведение может немного отличаться в разных браузерах
- Свойство не будет работать в ранних версиях браузера
Чтобы не путать разработчиков, свойства, которые ещё полностью не поддерживаются и не являются частью стандарта обозначают специальными конструкциями — префиксами. Они помогают браузеру определить, что перед ним новое свойство и, если для него существует реализация, то оно будет выполнено. Если реализации нет, то свойство будет считаться недействительным и игнорироваться
Например, раньше свойство box-shadow , которое устанавливает тень для элемента находилось в процессе обсуждения и реализации. Для его использования необходимо было дополнительно указать префиксы — небольшие дополнения к свойству, которые указываются перед названием свойства. В итоге CSS выглядел так:
.shadow
Можно заметить три упоминания свойства box-shadow :
- -webkit-box-shadow — свойство для браузера на WebKit
- -moz-box-shadow — свойство для браузеров на основе решений от компании Mozilla
- box-shadow — свойство без префиксов
Если браузер не мог обработать свойство box-shadow , то он искал свой префикс -webkit- или -moz- . Если не найдено и это, то правило игнорируется. Сейчас же использование таких префиксов поможет использовать свойство box-shadow в очень старых браузерах Chrome, Safari и Firefox.
Вам не нужно постоянно держать это в голове. Многие процессы уже автоматизированы и добавление префиксов осуществляется автоматически. В будущем вы откроете все инструменты для этого, если будете заниматься вёрсткой. Но очень важно знать о том, что такое префиксы и как они помогают новым и старым браузерам
Задание
В данном уроке нет задания. Можете нажимать кнопку «Проверить»
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
- Проверить совместимость разных свойств и необходимость указывать префиксы можно на сайте Can I use
Вендорные префиксы
Специальная запись CSS-свойств на этапе эксперимента.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье
- Кратко
- Кто такие вендоры?
- Префиксы
- Где нужны префиксы?
- Директивы
- Псевдоклассы
- Значения свойств
- Селекторы
Обновлено 5 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Вендорные префиксы — это приставки перед свойствами, селекторами, функциями или другими сущностями в CSS, позволяющие браузерам внедрять экспериментальные фичи до того, как они полностью стандартизированы и готовы для использования. Когда префикс отбрасывается — это знак, что всё готово.
Кто такие вендоры?
Скопировать ссылку «Кто такие вендоры?» Скопировано
Чтобы понять, что такое вендорные префиксы и зачем они нужны, надо немного разобраться с тем, как и кто разрабатывает CSS.
CSS — это одна из трёх основных мощных технологий, на которых строится веб. Его используют в своей работе тысячи разработчиков. А результат — стили сайта — видят миллионы пользователей.
Чтобы CSS во всём мире был единым, над его развитием работает так называемая Рабочая группа CSS (CSS Working Group), или коротко CSSWG. Они собирают потребности разработчиков сайтов и описывают возможности CSS в новых модулях. Получившийся документ называется спецификацией. В ней содержится описание того, как новое свойство должно работать.
Дальше наступает этап внедрения в браузеры. Каждый браузер разрабатывает отдельная компания, отдельные команды разработки. Когда в черновиках спецификации появляется новая CSS-фича, разработчики браузера начинают её реализовывать. Поскольку в спецификации не всегда описаны конкретные технические решения (черновик на то и черновик, что может меняться), то каждая команда разработки может делать это чуть иначе и принципы работы фичи вполне могут меняться со временем. До момента, пока не стабилизируется спецификация или пока не будут написаны все тесты, фича может работать в тестовом режиме, с вендорным префиксом.
Каждый браузер — это отдельный вендор (от англ. vendor — продавец) услуг просмотра сайтов, интернета. Отсюда и слово «вендорный». Буквально это означает, что существуют некие отдельные префиксы — они же приставки — которые работают в конкретном браузере — вендоре.
Префиксы
Скопировать ссылку «Префиксы» Скопировано
Основные браузеры используют следующие префиксы:
- -webkit — — Safari, Chrome, Opera 15+ и другие браузеры на основе движка WebKit или Blink.
- -moz — — Firefox и браузеры на движке Gecko.
- -o — — Opera 12 и раньше, на движке Presto.
- -ms — — Internet Explorer и старый Microsoft Edge 12–18.
Где нужны префиксы?
Скопировать ссылку «Где нужны префиксы?» Скопировано
В CSS существует много разных сущностей: селекторы и псевдоэлементы, свойства и их значения, функции, директивы. В процессе внедрения любой новой фичи используются вендорные префиксы.
Директивы
Скопировать ссылку «Директивы» Скопировано
Самый частый случай, когда вам может пригодится вендорный префикс для директивы — @keyframes :
@-webkit-keyframes animation 0% 100% > @keyframes animation 0% 100% >@-webkit-keyframes animation 0% left: 0; > 100% left: 100%; > > @keyframes animation 0% left: 0; > 100% left: 100%; > >Написать директивы @ — webkit — keyframes и @keyframes через запятую, чтобы не дублировать их содержимое, не получится.
Псевдоклассы
Скопировать ссылку «Псевдоклассы» Скопировано
В последнее время в CSS появляется много новых очень мощных псевдоклассов. Например, стилизовать плейсхолдер в поле ввода можно при помощи такого кода:
input::-webkit-input-placeholder color: #BADA55;> input:-moz-placeholder color: #BADA55;> input::-moz-placeholder color: #BADA55;> input:-ms-input-placeholder color: #BADA55;> input::-ms-input-placeholder color: #BADA55;> input::placeholder color: #BADA55;>input::-webkit-input-placeholder color: #BADA55; > input:-moz-placeholder color: #BADA55; > input::-moz-placeholder color: #BADA55; > input:-ms-input-placeholder color: #BADA55; > input::-ms-input-placeholder color: #BADA55; > input::placeholder color: #BADA55; >Как и в случае с директивами, префиксы в псевдоэлементах тоже приводят к дублированию кода: если перечислить всё через запятую, браузеры вас не поймут.
Значения свойств
Скопировать ссылку «Значения свойств» Скопировано
Бывает и так, что свойство старое, а вот значение для него новое, экспериментальное. В данный момент таким новым значением является функция image — set ( ) для свойства background — image :
div background-image: url('image.png'); background-image: -webkit-image-set(url('image.png') 1x, url('image-2x.png') 2x); background-image: image-set('image.png' 1x, 'image-2x.png' 2x);>div background-image: url('image.png'); background-image: -webkit-image-set(url('image.png') 1x, url('image-2x.png') 2x); background-image: image-set('image.png' 1x, 'image-2x.png' 2x); >Сначала браузер прочитает свойство background — image со значением url ( ) , которое он точно понимает. Потом увидит такое же свойство с другим значением, и если он его поймёт, то забудет первое свойство и применит второе. Это называется фолбэк.
Но браузер на этом не остановится и пойдёт дальше: если он поддерживает значение без префикса, то он предпочтёт его — ведь оно последнее. Поэтому порядок следования свойств с префиксами в значениях тоже важен: сначала идут значения с префиксами, потом — без, чтобы браузеры выбрали последний, максимально современный вариант.
Селекторы
Скопировать ссылку «Селекторы» Скопировано
Случается так, что в процессе внедрения фича меняется. Изначально планировалось, что функция выбора нескольких селекторов будет называться :any ( ) , потом :match ( ) , а в итоге пришли к :is ( ) . Чтобы селектор сработал везде, даже в старых браузерах, где функция называлась иначе, нужна будет такая запись:
:-moz-any(header, footer) a:hover color: red;> :-webkit-any(header, footer) a:hover color: red;> :matches(header, footer) a:hover color: red;> :is(header, footer) a:hover color: red;>:-moz-any(header, footer) a:hover color: red; > :-webkit-any(header, footer) a:hover color: red; > :matches(header, footer) a:hover color: red; > :is(header, footer) a:hover color: red; >В примере выше мы задаём красный цвет для ссылок при наведении курсора при условии, что эти ссылки находятся внутри или .
Как всё запомнить?
Скопировать ссылку «Как всё запомнить?» Скопировано
Скорее всего, вы сейчас думаете, а как же запомнить, где какие префиксы нужно писать, и для каких свойств они действительно нужны, а какие поддерживаются и без них.
Самый простой способ проверить поддержку свойства — найти его на сайте Can I use. Там, в том числе, написано, какие префиксы для каких браузеров нужны.
Но чаще всего разработчики не пишут префиксы руками, а используют инструменты автоматизации. Самым популярным из них на сегодня является Автопрефиксер. Вы можете попробовать его онлайн: вставляете ваш CSS, указываете, какие браузеры должны поддерживаться, и получаете код с проставленными префиксами там, где это нужно.
Порядок важен
Скопировать ссылку «Порядок важен» Скопировано
Очень важно указывать сущности (свойства, селекторы, директивы и так далее) с вендорными префиксами выше, чем без префиксов:
div -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;>div -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >Это нужно для того, чтобы браузер использовал самую последнюю стабильную реализацию. Если браузер уже поддерживает фичу без префиксов, то применится последнее из перечисленных. А если нет, то сработает подходящая запись из кода выше.