CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
Как пользоваться Генератор Вендорных Префиксов CSS
- 1
Вставьте CSS
Вставьте свои правила CSS, например объявление flex или transition, в поле ввода кода.
- 2
Выберите префиксы
Выберите, какие вендорные префиксы добавить, включая -webkit-, -moz-, -ms- и -o-, в зависимости от браузеров, которые нужно поддерживать.
- 3
Сгенерируйте CSS с префиксами
Нажмите «Сгенерировать префиксы», чтобы получить версию кода с добавленными соответствующими свойствами с префиксами.
- 4
Скопируйте результат
Скопируйте CSS с префиксами из вывода и вставьте его обратно в свою таблицу стилей.
Вендорные префиксы CSS простыми словами
Что на самом деле такое вендорный префикс
Вендорный префикс — это короткая строка, которую создатель браузера ставил перед именем свойства или значения, чтобы выпустить функцию ещё до её окончательного утверждения. Четыре префикса, которые вам встретятся, — это -webkit- для движка, стоящего за Chrome, Safari и современным Edge, -moz- для Firefox, -ms- для старого Internet Explorer и первоначального Edge, и -o- для старой Opera на движке Presto. Так в переходные годы вы могли писать и transition-property, и -webkit-transition-property: вариант с префиксом для браузеров, выпустивших функцию раньше, и голый — для браузеров, следующих окончательному стандарту.
Механически браузер игнорирует любое свойство, которое он не распознаёт, и именно это делает безопасным наложение префиксов друг на друга. Можно перечислить варианты с префиксами первыми, а стандартное свойство — последним, и каждый движок просто берёт ту строку, которую понимает, и пропускает остальное.
Почему вообще появились префиксы
Префиксы были прагматичным ответом на сложную проблему. Когда новая функция вроде градиентов, трансформаций или флексбокса ещё проектировалась, разработчики браузеров хотели позволить программистам экспериментировать, не закрепляя синтаксис, который спецификация могла изменить. Выпуск функции под префиксом был способом сказать: это экспериментально и может поменяться. Если бы окончательный стандарт отличался, свойство без префикса могло бы перенять исправленное поведение, тогда как свойство с префиксом сохраняло бы старое, чтобы существующие страницы не сломались незаметно.
На практике система дала обратный эффект. Сайты стали настолько сильно зависеть от -webkit-функций, что другим движкам в итоге пришлось реализовать некоторые свойства с префиксом -webkit- у себя — просто чтобы веб отображался корректно. Именно этот исход и стал причиной того, что весь подход в значительной мере отвергнут в пользу флагов функций для экспериментальной работы.
Как писать вариант с префиксом и стандартный вместе
Правило простое, и порядок имеет значение: пишите каждую нужную версию с префиксом, а затем стандартное свойство без префикса — последним. Поскольку при равном понимании побеждают более поздние объявления, размещение стандартной строки внизу означает, что полностью современный браузер использует окончательное, правильное поведение, тогда как более старый откатывается на понятную ему строку с префиксом. Этот инструмент следует данному соглашению, выдавая выбранные вами варианты с префиксами рядом с исходным стандартным объявлением, чтобы каскад разрешался так, как вы ожидаете.
Та же идея иногда применяется к значениям, а не только к именам свойств, поскольку несколько функций получали префикс и на стороне значения. Безопасная привычка та же самая: предоставьте более старую форму с префиксом, а затем дайте стандартной форме переопределить её для браузеров, которые догнали.
Большей части современного CSS префиксы уже не нужны
Это та часть, которую стоит усвоить: подавляющему большинству свойств, когда-то требовавших префиксов, они больше не нужны. Переходы, трансформации, анимации, box-shadow, border-radius, градиенты и современный синтаксис флексбокса — всё это поддерживается без префиксов в актуальных браузерах. Добавление -webkit-, -moz-, -ms- и -o- ко всему этому сегодня порождает мёртвый код, который раздувает вашу таблицу стилей, может сбить с толку будущих читателей, а в редких случаях даже активирует ошибочное старое поведение. Если ваш проект нацелен только на актуальные браузеры, вам, весьма вероятно, не нужны никакие префиксы вообще.
Именно поэтому продуманный рабочий процесс не добавляет префиксы ко всему по привычке. Он добавляет префиксы только к тому, что требуют фактические целевые браузеры, и это сохраняет вывод лаконичным и честным, а не перегруженным строками, которые никто никогда не выполнит.
Где префиксы всё ещё по-настоящему важны
Горстка функций остаётся доступной только с префиксом или прежде всего с префиксом в выпускаемых браузерах, и именно здесь префикс — не устаревший хлам, а актуальное требование. Префикс -webkit- в особенности по-прежнему встречается для таких вещей, как техника line-clamp, используемая для обрезки текста до фиксированного числа строк, определённого поведения backdrop и appearance, а также некоторых настроек полос прокрутки и подсветки при касании в мобильном Safari. Для них отсутствие префикса означает, что функция просто не работает, поэтому именно тут обращение к префиксу правильно.
Если вы поддерживаете более старые, но всё ещё реальные версии браузеров для конкретной аудитории, префиксы также снова входят в картину для свойств, стандартизированных лишь недавно. Решающий вопрос — никогда не в том, как ощущается свойство, а в том, что на самом деле содержит ваша матрица поддержки.
Autoprefixer и современный подход на этапе сборки
Нынешняя лучшая практика — перестать писать префиксы вручную и позволить инструменту добавлять их на основе реальных данных. Autoprefixer, запускаемый как часть этапа сборки, читает объявленный в вашем проекте список поддерживаемых браузеров и вставляет ровно те префиксы, которые требуются этим браузерам, не больше и не меньше, используя актуальные данные о совместимости. Вы пишете чистый стандартный CSS, а правильные префиксы генерируются автоматически во время сборки и снова убираются в тот момент, когда ваш список поддержки в них больше не нуждается.
Этот конвертер — ручной аналог такого рабочего процесса, идеальный, когда у вас нет конвейера сборки, когда вы хотите быстро добавить конкретный префикс к фрагменту или когда вы изучаете, как соотносятся форма с префиксом и стандартная. Для большой кодовой базы настройка Autoprefixer означает, что вы больше никогда об этом не задумаетесь.
Проверьте поддержку, прежде чем ставить префикс
Прежде чем добавлять любой префикс, убедитесь, что он действительно нужен, сверившись с актуальным справочником совместимости вроде caniuse, который свойство за свойством показывает, какие версии браузеров поддерживают стандартную форму, а какие всё ещё требуют префикс. Сочетание этой проверки с явным списком браузеров, которые поддерживает ваш проект, превращает расстановку префиксов из гадания в решение, которое вы можете обосновать. Цена поддержки устаревших префиксов реальна, поэтому удаление тех, что вам больше не нужны, столь же ценно, как и добавление тех, что нужны.
Часто задаваемые вопросы
Для чего нужны вендорные префиксы CSS?
Какие префиксы может добавлять этот инструмент?
Добавляет ли он префиксы к каждому вставленному свойству?
Нужны ли вендорные префиксы сегодня?
Отправляется ли мой CSS куда-либо?
Похожие инструменты
Продолжайте работу с этими удобными инструментами