Как пользоваться автопрефиксером онлайн

В процессе разработки веб сайтов и приложений, разработчик сталкивается с проблемой поддержки всех, нужных для него, браузеров. Но некоторые свойства работают только с вендорными префиксами (в некоторых браузерах). Для это был создан проект Autoprefixer.

В идеальном варианте, его нужно встроить в систему сборки проекта (gulp или grunt). Но это не всегда возможно. Иногда нам нужно просто проверить нужны ли префиксы для определенного свойства или просто расставить нужные и убрать ненужные. И для этого, а может и для чего-то еще был написан Autoprefixer online.

Сервис очень прост в использовании. В левую колонку вставляете свой CSS код, а в правой получается он-же, но только после расстановки и удаления вендорных префиксов в зависимости от выбранных вами браузеров (по умолчанию последние 2 версии).

Autoprefixer online
Autoprefixer online

Настройка поддерживаемых браузеров

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

Фильтер браузеров для autoprefixer online
Фильтер браузеров для autoprefixer online

По умолчанию автопрефиксер поддерживает последние 2 версии основных браузеров (таких как google chrome и т.д.). Но вы можете выбрать, какие браузеры вам нужны по имени (к примеру "ff 21" — это Firefox 21 версии) или по шаблонам.

Последние 2 версии основных бразуеров — "last 2 versions". Браузеры с долей пользования больше чем 1% в мире — "> 1%". Новые версии браузера начиная с определенной версии — "ff > 20" или "ff >= 20". Или же можно написать просто название и версию браузера — iOS 7

Список браузеров доступных для использования в фильтре:

  1. Android.
  2. BlackBerry или bb для браузера Blackberry.
  3. Chrome для Google Chrome.
  4. Firefox или ff для Mozilla Firefox.
  5. Explorer или ie для Internet Explorer.
  6. iOS или ios_saf для iOS Safari.
  7. Opera для Opera.
  8. Safari для десктопного Safari.
  9. OperaMobile или op_mob для Opera Mobile.
  10. OperaMini или op_mini для Opera Mini.
  11. ChromeAndroid или and_chr для Chrome под Android (очень похож с Chrome).
  12. FirefoxAndroid или and_ff для Firefox для Android.
  13. ExplorerMobile или ie_mob для Internet Explorer Mobile.

К примеру у вас нет поддержки мобильных браузеров, Internet Explorer версии 8+ и последние 3 версии основных браузеров.

Для этого вы можете написать ie >= 8, last 3 versions, > 2%.

На всякий случай я включил в пример поддержку браузеров с долей выше 2%, на всякий случай.

Дополнения и замечания оставляйте на github.

Актуальных префиксов вам вместе с Autoprefixer online.