для браузера mozilla firefox вендорный префикс для стилей выглядит так
Вендорные префиксы. Что это?
На первый взгляд кажется, что вендорные префиксы это что-то из разряда грамматики. Вендорные префиксы, вендорные суффиксы и вендорные окончания. Но какое отношение это имеет к верстке?
Оказывается, самое прямое! Вендорные префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.
Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с «-» или «_» зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.
Какие они бывают?
Вендорные префиксы самых распространенных браузеров приведены в таблице ниже:
Как это работает?
Для элемента прописывается CSS свойство в прямом виде для браузеров, которые его понимают. Следом за ним через точку с запятой перечисляется то же самое свойство, но с разными вендорными префиксами для разных браузеров. Браузер из такого кода интерпретирует только то свойства, которое написано под него, а написанные для других браузеров игнорирует.
Например, CSS свойство opacity, отвечающее за прозрачность элемента, кроссбраузерно используется так:
Для чего это нужно?
Кроме того, разработчики Microsoft ухитрились с помощью вендорных префиксов скрывать от валидатора невалидные конструкции. Это касается, прежде всего, фильтров. Для IE 5.5-7 фильтр выглядел так:
Такая конструкция пройти валидацию в принципе не может! Но ее преспокойно проходит новая конструкция того же фильтра, но уже для IE 8:
Конечно, не очень хочется в коде писать несколько строчек кода с вендорными свойствами под каждый браузер вместо одной строчки кода со стандартными свойствами. Но не нужно забывать, что спецификация CSS3 пока еще находится в разработке. Возможно, что в описании свойства при стандартизации что-то поменяется, либо его совсем не будет в спецификации. Тогда безусловно разработчикам будет легче отказаться от вендорного свойства и поддерживать стандарты. Согласитесь, если в разных версиях браузера одно и то же свойство будет работать по-разному, ничего хорошего из этого не получится. Пускай лучше в старых версиях браузеров будут работать вендорные свойства, а новые версии будут поддерживать спецификацию в прямом виде, а свойства с вендорными префиксами будут игнорироваться.
Приятный бонус
Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.
Верстальщик уже сейчас может реализовать большинство возможностей предоставляемых CSS3, в том числе разнообразные переходы и анимации без использования скриптов, но используя вендорные префиксы.
Наглядным примером такой реализации может быть использование CSS3 свойства transition. Поставим задачу реализовать для ссылки плавное изменение цвета фона при наведении курсора, не используя JavaScript. Для этого в CSS для ссылки нужно дописать следующий код
Живой пример можно посмотреть тут.
Кроме того, согласно заявлениям разработчиков, данный демо пример будет также работать в Firefox 4.0, первая бета версия которого вышла в июле 2010 года.
Подытожим
Вендорные префиксы — это специальные приставки к названию CSS свойства, заточенные под конкретный браузер, которые позволяют ему понимать экспериментальные CSS свойства и одновременно игнорировать записи, предназначенные для других браузеров.
Свойства с вендорными префиксами не соответствуют стандартам и не пройдут валидацию. Если тебя это не сильно беспокоит, их можно применять, т.к. в умелых руках это очень мощный инструмент. И многие ведущие студии рунета этим пользуются.
Заметка
Свойства по спецификации всегда пишем последними.
В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в CSS.
Что такое префиксы
Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.
Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:
Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.
Причины появления префиксов
Причин для появления префиксов было достаточно много:
Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.
Как использовать префиксы
Рассмотрим в качестве примере следующий код:
При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.
Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.
Как проверить поддержку определенного свойства в браузере
Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.
Например: проверим, как реализовано свойство transform в браузерах.
На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:
Вендорные префиксы
Время чтения: 6 мин
Обновлено 18 августа 2021
Кратко
Вендорные префиксы — это приставки перед свойствами, селекторами, функциями или другими сущностями в CSS, позволяющие браузерам внедрять экспериментальные фичи до того, как они полностью стандартизированы и готовы для использования. Когда префикс отбрасывается — это знак, что всё готово.
Кто такие вендоры?
Чтобы понять, что такое вендорные префиксы и зачем они нужны, надо немного разобраться с тем, как и кто разрабатывает CSS.
CSS — это одна из трёх основных мощных технологий, на которых строится веб. Его используют в своей работе тысячи разработчиков. А результат — стили сайта — видят миллионы пользователей.
Чтобы CSS во всём мире был единым, над его развитием работает так называемая Рабочая группа CSS (CSS Working Group), или коротко CSSWG. Они собирают потребности разработчиков сайтов и описывают возможности CSS в новых модулях. Получившийся документ называется спецификацией. В ней содержится описание того, как новое свойство должно работать.
Дальше наступает этап внедрения в браузеры. Каждый браузер разрабатывает отдельная компания, отдельные команды разработки. Когда в черновиках спецификации появляется новая CSS-фича, разработчики браузера начинают её реализовывать. Поскольку в спецификации не всегда описаны конкретные технические решения (черновик на то и черновик, что может меняться), то каждая команда разработки может делать это чуть иначе и принципы работы фичи вполне могут меняться со временем. До момента, пока не стабилизируется спецификация или пока не будут написаны все тесты, фича может работать в тестовом режиме, с вендорным префиксом.
Каждый браузер — это отдельный вендор (от англ. vendor — продавец) услуг просмотра сайтов, интернета. Отсюда и слово «вендорный». Буквально это означает, что существуют некие отдельные префиксы — они же приставки — которые работают в конкретном браузере — вендоре.
Префиксы
Основные браузеры используют следующие префиксы:
Где нужны префиксы?
В CSS существует много разных сущностей: селекторы и псевдоэлементы, свойства и их значения, функции, директивы. В процессе внедрения любой новой фичи используются вендорные префиксы.
Директивы
Самый частый случай, когда вам может пригодится вендорный префикс для директивы — @keyframes :
Написать директивы @-webkit-keyframes и @keyframes через запятую, чтобы не дублировать их содержимое, не получится.
Псевдоклассы
В последнее время в CSS появляется много новых очень мощных псевдоклассов. Например, стилизовать плейсхолдер в поле ввода можно при помощи такого кода:
Как и в случае с директивами, префиксы в псевдоэлементах тоже приводят к дублированию кода: если перечислить всё через запятую, браузеры вас не поймут.
Значения свойств
Бывает и так, что свойство старое, а вот значение для него новое, экспериментальное. В данный момент таким новым значением является функция image-set() для свойства background-image :
Но браузер на этом не остановится и пойдёт дальше: если он поддерживает значение без префикса, то он предпочтёт его — ведь оно последнее. Поэтому порядок следования свойств с префиксами в значениях тоже важен: сначала идут значения с префиксами, потом — без, чтобы браузеры выбрали последний, максимально современный вариант.
Селекторы
Как всё запомнить?
Скорее всего, вы сейчас думаете, а как же запомнить, где какие префиксы нужно писать, и для каких свойств они действительно нужны, а какие поддерживаются и без них.
Самый простой способ проверить поддержку свойства — найти его на сайте Can I use. Там, в том числе, написано, какие префиксы для каких браузеров нужны.
Но чаще всего разработчики не пишут префиксы руками, а используют инструменты автоматизации. Самым популярным из них на сегодня является Автопрефиксер. Вы можете попробовать его онлайн: вставляете ваш CSS, указываете, какие браузеры должны поддерживаться, и получаете код с проставленными префиксами там, где это нужно.
Порядок важен
Очень важно указывать сущности (свойства, селекторы, директивы и так далее) с вендорными префиксами выше, чем без префиксов:
Это нужно для того, чтобы браузер использовал самую последнюю стабильную реализацию. Если браузер уже поддерживает фичу без префиксов, то применится последнее из перечисленных. А если нет, то сработает подходящая запись из кода выше.
Vendor Prefix
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers’ code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.
Note: Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it’s also been harmful to smaller browsers who wind up forced to add other browsers’ prefixes in order to load popular web sites.
Lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly.
CSS prefixes
The major browsers use the following prefixes:
API prefixes
Historically, vendors have also used prefixes for experimental APIs. If an entire interface is experimental, then the interface’s name is prefixed (but not the properties or methods within). If an experimental property or method is added to a standardized interface, then the individual method or property is prefixed.
Interface prefixes
Prefixes for interface names are upper-cased:
Property and method prefixes
The prefixes for properties and methods are lower-case:
-prefix-free: изящный и миниатюрный «костыль» на JavaScript, избавляющий от необходимости вспоминать и перечислять префиксы свойств CSS3 для разных браузеров
Всякому такому автору сайта, который снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes).
Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется в Google Chrome и в Apple Safari (и в других браузерах на основе в Опере — в IE — а в Konqueror (и в наиболее ранних версиях
На практике, однако же, автор сайта чаще всего использует своего рода «общий знаменатель» возможностей нескольких браузеров — значения свойств CSS3, работающие одинаково (или почти одинаково) во всех современных браузерах. Да и записываются все они также одинаково. Указание префиксов сводится поэтому ко многократному повторению свойств. Например, чтобы придать нескольким кнопкам ColorBox закруглённые края и заставить их отбрасывать тень, поневоле придётся записать в CSS вот что:
Во-первых, это задалбывает.
Во-вторых, это неэкономично.
В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс. (В списке «How to avoid common CSS3 mistakes» эта ошибка — на первом месте.)
Поэтому рано или поздно должно было появиться средство, позволяющее автору указать одни только безпрефиксные формы а автоматика позаботилась бы об их адаптации к каждому конкретному браузеру.
И такое средство появилось — благодаря Lea Verou. Вот оно:
Скрипт который занимает всего лишь 2 Kb в сжатом виде, обрабатывает свойства CSS3 и адаптирует их ко браузерам.
Это JavaScript, он работает на стороне читателя. Очевидно поэтому, что скрипт не сработает, если у читателя отключены джаваскрипты; зато он получает возможность непосредственно во браузере проверить и понять, в каких префиксах браузер нуждается, а не полагаться на обнюхивание заголовка да и не зависеть от готового (возможно, устаревшего) списка неподдерживаемых свойств, как это было бы на сервере.
Скрипт обрабатывает стили, указанные внутри элементов и в атрибутах а также внешние стили, подключённые элементами (но только не из других доменов). Тому примером — стиль самогó сайта Однако не умеет обрабатывать стили, подключённые директивою @import.
В браузерах Opera и Google Chrome по умолчанию не поддерживается обработка стилей, подключённых из локальных файлов (она требует донастройки браузера вручную). В браузере IE (а также в Mozilla Firefox и более ранних) не работают безпрефиксные значения свойств в атрибутах причём в этих старых Файерфоксах — не только значения, свойств.
К скрипту прилагается пара плагинов: меньший из них позволяет библиотекою jQuery (с помощью считывать и устанавливать свойства CSS3 без префиксов, следит за появлением новых элементов за изменениями атрибутов за вызовами методов CSSOM (объектной и оперативно снабжает нужные свойства префиксами.
Правда, у такого слежения опять же есть ограничения: за изменениями атрибутов (совершаемыми методом не удаётся проследить в Webkit, а в Google Chrome к тому же не сработает задание беспрефиксных свойств через CSSOM (например, ), хотя чтение сработает.
В итоге чтения документации (основные выдержки из которой я только что пересказал) у меня сложилось впечатление, может сгодиться для оформления такого сайта, у читателей которого обыкновенно включён JavaScript, а динамическое изменение стилей сводится к управлению скорее классами, нежели напрямую значениями свойств элементов. Что же касается необходимости хранения этих значений не в атрибутах а в стилевых элементах и файлах, так это и всегда считалось хорошим тоном отделения представления от содержимого.
С другой стороны, конечно, не надо забывать, что префиксы появились не на пустом месте — у них есть своя цель в жизни: преодоление взаимной несовместимости браузеров (в том числе старой и новой версии одного и того же браузера). Подробнее об этом поведал Эрик Мейер в статье «Prefix or Posthack» («A List Apart», 6 июля 2010 года). От подпирания свойств CSS3 «костылём» следует отказываться, когда оно может создать такую несовместимость.
С третьей стороны, употребление префиксов не следует доводить до фанатизма: когда оно лишается смысла, хороший «костыль» всего лишь экономит время автора сайта, не будучи способен привести к проблемам совместимости. Тот же Эрик Мейер у себя в Твиттере похвалил скрипт и поблагодарил Lea Verou.