Вендорные префиксы
Специальная запись 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; >Это нужно для того, чтобы браузер использовал самую последнюю стабильную реализацию. Если браузер уже поддерживает фичу без префиксов, то применится последнее из перечисленных. А если нет, то сработает подходящая запись из кода выше.
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
Кроссбраузерный код
На сегодняшний день существует большое количество разных браузеров и устройств, при помощи которых посетитель просматривает сайты. Проблема в том, что в них один и тот же сайт может отображаться по-разному.
Основные браузеры
Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.
Одно и то же свойство CSS может поддерживаться одним браузером и не работать в другом, особенно это касается новейшей спецификации. Для того, чтобы узнать, какие свойства CSS можно использовать уже сегодня, воспользуйтесь сервисом caniuse.
Вендорные префиксы
Часто разработчики топовых браузеров внедряют новые свойства css, которые еще не стандартизированы. Эти свойства предваряются специальными приставками, которые называются «вендорные префиксы». Каждый браузер имеет свой префикс:
- -o- — префикс для браузера Опера
- -moz- — префикс для браузера Mozilla
- -ms — префикс для Internet Explorer
- -webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome
Пример с вендорными префиксами:
-webkit-transition-duration:0.6s;
-moz-transition-duration:0.6s;
-o-transition-duration:0.6s;
-ms-transition-duration:0.6s;
transition-duration:0.6s;Вначале пишутся экспериментальные свойства, а затем – свойство без префикса.
Стандартные стили браузера
Разные браузеры имеют разные настройки стилей по умолчанию для каждого элемента HTML. То есть, размеры шрифтов и отступы между элементами могут варьироваться в зависимости от браузера. Если верстальщик не переопределит такое свойство в своем файле стилей, браузер применит свои настройки. И тогда верстка вполне может «поплыть».
Чтобы это не произошло и код Вашего сайта был максимально кроссбраузерным, можно использовать специальные технологии по обнулению тех стилей, которые содержатся в браузере по умолчанию. Для этого разработаны технологии reset.css и normalize.css. Рассмотрим их подробно.
reset.css
Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.
Недостатком этого подхода является то, что разработчику приходится прописывать заново стили и отступы абсолютно для всех элементов, что может замедлить разработку.
normalize.css
Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация. То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.
Этот css-документ использует популярный фреймворк Bootstrap.
Оба файла – reset.css и normalize.css распространяются бесплатно.
Эти нехитрые приемы позволят Вам писать качественный и кроссбраузерный код, который будет одинаково хорошо отображаться в основных браузерах.
Свойство -moz-box-sizing
Свойство -moz-box-sizing способ расчета размеров элемента.
Свойство -moz-box-sizing относится к спецификации CSS, применяется к всем элементам, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка Gecko (браузер Firefox), и не совместимо с другими браузерами.
Смотри также:
- box-sizing — способ расчета размеров элемента
- -webkit-box-sizing — способ расчета размеров элемента
- Спецификация стандарта CSS 3
- Описание на Mozilla Developer Network
- Описание на Microsoft Developer Network
- Описание на Safari Developer Library
Краткое описание
способ расчета размеров элемента
Синтаксис:
content-box | border-box | inherit
Наследование:
не наследуется
Объектная модель документа (DOM):
[элемент].style[‘-moz-box-sizing’]
Кроссбраузерная совместимость
Internet Explorer
не поддерживается
Firefox
2.0 3.0 3.5 3.6 4.0 5.0 6.0 7.0 8.0 9.0 10.0 11.0 12.0 13.0 + / — + / — + / — + + + + + + + + + + +