Зачем нужны вендорные префиксы в css
Перейти к содержимому

Зачем нужны вендорные префиксы в css

  • автор:

Вендорные префиксы

Специальная запись CSS-свойств на этапе эксперимента.

Время чтения: 6 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Кто такие вендоры?
  3. Префиксы
  4. Где нужны префиксы?
    1. Директивы
    2. Псевдоклассы
    3. Значения свойств
    4. Селекторы

    Обновлено 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 и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.

    Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit- , -moz- , -ms- и др.

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:

    • -webkit- : браузеры Chrome, Safari, Opera;
    • -moz- : браузер Mozilla Firefox;
    • -ms- : браузер Internet Explorer.

    Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.

    Причины появления префиксов

    Причин для появления префиксов было достаточно много:

    • Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
    • Для решения проблем с кроссбраузерностью.
    • Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.

    Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.

    Как использовать префиксы

    Рассмотрим в качестве примере следующий код:

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

    При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

    Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.

    Применение свойств CSS к элементам веб-страницы в браузере Google Chrome

    На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing .

    Как проверить поддержку определенного свойства в браузере

    Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.

    Например: проверим, как реализовано свойство transform в браузерах.

    Проверка реализации свойства transform в разных браузерах

    На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

    • Красный прямоугольник — браузер, в котором данное свойство не реализовано;
    • Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
    • Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
    • Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.

    CSS: Префиксы

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

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

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

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

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

    1. Поведение может немного отличаться в разных браузерах
    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 свойства, которые добавляют производители браузеров для нестандартизированных свойств.

    Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с «-» или «_» зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.

    Какие они бывают?

    Вендорные префиксы самых распространенных браузеров приведены в таблице ниже:

    Вендорный префикс Производитель Браузер Браузерный движок
    -o-, -op-, -xv- Opera Software Opera Presto
    -moz- проект Mozilla Firefox, SeaMonkey, Camino и др. Gecko
    -ms- Microsoft Internet Explorer 8 Trident
    -khtml- проект KDE Safari до версии 3, Konqueror и др. KHTML послужил основой для WebKit
    -webkit- Apple Safari 3+, Google Chrome и др. WebKit

    Как это работает?

    Для элемента прописывается CSS свойство в прямом виде для браузеров, которые его понимают. Следом за ним через точку с запятой перечисляется то же самое свойство, но с разными вендорными префиксами для разных браузеров. Браузер из такого кода интерпретирует только то свойства, которое написано под него, а написанные для других браузеров игнорирует.

    Например, CSS свойство opacity, отвечающее за прозрачность элемента, кроссбраузерно используется так:

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/ -moz-opacity:0.5;/* Mozilla 1.6 */ -khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */ opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */

    Для чего это нужно?

    В своем блоге разработчики Internet Explorer называют три причины использования вендорного префикса -ms- для браузера IE8:

    1. Если это свойство разработано только для Microsoft IE и не описано в спецификации или CSS модуле
    2. Если CSS модуль, к которому относится это свойство находится в разработке W3C и еще не достиг статуса кандидата в рекомендацию (Candidate Recommendation)
    3. Если свойство только частично реализует функции свойства, описанного в CSS модуле или спецификации

    Остальные разработчики используют вендорные префиксы по схожим причинам. Например Mozilla имеет огромный перечень индивидуальных CSS свойств и их значений с вендорными префиксами -moz-, которые разработаны специально для Firefox, и не описаны ни в модуле CSS ни в спецификации.

    Кроме того, разработчики Microsoft ухитрились с помощью вендорных префиксов скрывать от валидатора невалидные конструкции. Это касается, прежде всего, фильтров. Для IE 5.5-7 фильтр выглядел так:

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/

    Такая конструкция пройти валидацию в принципе не может! Но ее преспокойно проходит новая конструкция того же фильтра, но уже для IE 8:

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/

    Конечно, не очень хочется в коде писать несколько строчек кода с вендорными свойствами под каждый браузер вместо одной строчки кода со стандартными свойствами. Но не нужно забывать, что спецификация CSS3 пока еще находится в разработке. Возможно, что в описании свойства при стандартизации что-то поменяется, либо его совсем не будет в спецификации. Тогда безусловно разработчикам будет легче отказаться от вендорного свойства и поддерживать стандарты. Согласитесь, если в разных версиях браузера одно и то же свойство будет работать по-разному, ничего хорошего из этого не получится. Пускай лучше в старых версиях браузеров будут работать вендорные свойства, а новые версии будут поддерживать спецификацию в прямом виде, а свойства с вендорными префиксами будут игнорироваться.

    Приятный бонус

    Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.

    Верстальщик уже сейчас может реализовать большинство возможностей предоставляемых CSS3, в том числе разнообразные переходы и анимации без использования скриптов, но используя вендорные префиксы.

    Наглядным примером такой реализации может быть использование CSS3 свойства transition. Поставим задачу реализовать для ссылки плавное изменение цвета фона при наведении курсора, не используя JavaScript. Для этого в CSS для ссылки нужно дописать следующий код

    -webkit-transition:background-color 5s ease-in 3s;/* работает в Safari 3.1+, Chrome 1+ */ -o-transition:background-color 5s ease-in 3s;/* работает в Opera 10.5+ */ -moz-transition:background-color 5s ease-in 3s;/* планируется для Firefox 4.0+ */ transition:background-color 5s ease-in 3s;/* в прямом виде не поддерживает ни один браузер */

    Живой пример можно посмотреть тут.

    Кроме того, согласно заявлениям разработчиков, данный демо пример будет также работать в Firefox 4.0, первая бета версия которого вышла в июле года.

    Подытожим

    Вендорные префиксы — это специальные приставки к названию CSS свойства, заточенные под конкретный браузер, которые позволяют ему понимать экспериментальные CSS свойства и одновременно игнорировать записи, предназначенные для других браузеров.

    Свойства с вендорными префиксами не соответствуют стандартам и не пройдут валидацию. Если тебя это не сильно беспокоит, их можно применять, т.к. в умелых руках это очень мощный инструмент. И многие ведущие студии рунета этим пользуются.

    Заметка

    Свойства по спецификации всегда пишем последними.

    Материалы

    • CSS 2.1 Specification:: Vendor-specific extensions
    • MSDN:: Microsoft CSS Vendor Extensions
    • developer.mozilla:: Mozilla CSS Extensions
    • quirksmode:: CSS vendor prefixes considered harmful
    • alistapart:: Prefix or Posthack by Eric Meyer
    • Анатомия CSS
    • История развития CSS
    • Что такое CSS
    • CSS анимация
      • Анимация в CSS3. Часть I
      • Анимация в CSS3. Часть II
      • Вендорные префиксы
      • Box model — блочная модель
      • Схлопывание margin
      • Блочные элементы
      • Введение
      • Дерево документа HTML
      • Каскад в CSS
      • Наследование
      • Наследование: общие сведения
      • Специфичность
      • Вложенные таблицы стилей
      • Внешние таблицы стилей
      • Встроенные стили
      • Группируем CSS. Директива @import
      • Cелектор идентификатора
      • Селектор атрибутов
      • Селектор дочернего элемента
      • Селектор класса
      • Селектор обобщенных родственных элементов
      • Селектор потомка
      • Селектор сестринского элемента
      • Селектор типа
      • Селекторы псевдоклассов
      • Селекторы псевдоэлементов
      • Селекторы: общие сведения
      • Составные селекторы. Комбинаторы
      • Универсальный селектор
      • Эффективность CSS селекторов
      Похожие публикации:
      1. Komodo edit как поставить русский язык
      2. Как выключить полноэкранный режим на телефоне
      3. Как построить линию тренда в excel
      4. Копировать css и svg в фотошопе что это

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *