Как пользоваться автопрефиксером онлайн
В процессе разработки веб сайтов и приложений, разработчик сталкивается с проблемой поддержки всех, нужных для него, браузеров. Но некоторые свойства работают только с вендорными префиксами (в некоторых браузерах). Для это был создан проект Autoprefixer. В идеальном варианте, его нужно встроить в систему сборки проекта (gulp или grunt). Но это не всегда возможно. Иногда нам нужно просто проверить нужны ли префиксы для определенного свойства или просто расставить нужные и убрать ненужные. И для этого, а может и для чего-то еще был написан Autoprefixer online. Сервис очень прост в использовании. В левую колонку вставляете свой CSS код, а в правой получается он-же, но только после расстановки и удаления вендорных префиксов в зависимости от выбранных вами браузеров (по умолчанию последние 2 версии).
Настройка поддерживаемых браузеров
Часто у людей, не знакомых с синтаксисом автопрефиксера, возникают проблемы с фильтром для браузеров. По умолчанию автопрефиксер поддерживает последние 2 версии основных браузеров (таких как google chrome и т.д.). Но вы можете выбрать, какие браузеры вам нужны по имени (к примеру "ff 21" — это Firefox 21 версии) или по шаблонам. Последние 2 версии основных бразуеров — "last 2 versions" . Браузеры с долей пользования больше чем 1% в мире — "> 1%" . Новые версии браузера начиная с определенной версии — "ff > 20" или "ff >= 20" . Или же можно написать просто название и версию браузера — iOS 7 Список браузеров доступных для использования в фильтре:
- Android .
- BlackBerry или bb для браузера Blackberry.
- Chrome для Google Chrome.
- Firefox или ff для Mozilla Firefox.
- Explorer или ie для Internet Explorer.
- iOS или ios_saf для iOS Safari.
- Opera для Opera.
- Safari для десктопного Safari.
- OperaMobile или op_mob для Opera Mobile.
- OperaMini или op_mini для Opera Mini.
- ChromeAndroid или and_chr для Chrome под Android (очень похож с Chrome ).
- FirefoxAndroid или and_ff для Firefox для Android.
- ExplorerMobile или ie_mob для Internet Explorer Mobile.
К примеру у вас нет поддержки мобильных браузеров, Internet Explorer версии 8+ и последние 3 версии основных браузеров.
Для этого вы можете написать ie >= 8, last 3 versions, > 2% .
На всякий случай я включил в пример поддержку браузеров с долей выше 2%, на всякий случай.
Дополнения и замечания оставляйте на github.
Актуальных префиксов вам вместе с Autoprefixer online.
VS Code Plugin for Autoprefixer
Press F1 and run the command named Autoprefixer: Run .
Supported languages
Supported settings
autoprefixer.findExternalAutoprefixer
- Type: Boolean
- Default: false
Use an external Autoprefixer package instead of built-in version.
You must install Autoprefixer using:
- npm i -D autoprefixer
- npm i -g autoprefixer
About first run with this option
When you first start the plugin is looking for an installed Autoprefixer. Therefore, the first run may take a long time. Subsequent runs are much faster.
autoprefixer.options
- Type: Object
- Default: <>
Any options supported by autoprefixer — documentation.
autoprefixer.formatOnSave
- Type: Boolean
- Default: false
Add vendor prefixes to CSS when you save a file.
autoprefixer.ignoreFiles
- Type: Array
- Default: []
- Example: [«variables.less», «mixins/**/*»]
An optional array of glob-patterns to ignore files.
Keyboard shortcuts
For changes keyboard shortcuts, create a new rule in File -> Preferences -> Keyboard Shortcuts :
Changelog
See the Releases section of our GitHub project for changelogs for each release version.
License
This software is released under the terms of the MIT license.
Как добавить вручную вендорные префиксы для flex в плагин css-auto-prefix (VS Code)?
Открыл файл defaultSettings.json, нашёл там примеры префиксов но для display: flex; там ничего не прописано.
Решил прописать в юзерском файле Settings.json. Добавил:
«css-auto-prefix.prefixes»: «display»: [
«webkit»,
«moz»,
«ms»,
«o»
]
>
и оно ставит префиксы со словом display:
-webkit-display: flex; и т.п.
А надо чтобы добавлялись к flex:
display: -webkit-flex;
Ставлю слово flex в настройках — ничего не даёт. В репозитории плагина разрабы не отвечают минимум год на вопросы.
Может кто подскажет как его правильно настроить чтобы автоматом и для display: flex; прописывались вендорные префиксы (В Sublime3 таких проблем не замечал).
П.С. Я так понял, что это единственный более-менее нормальный плагин для ВСки.
- Вопрос задан более двух лет назад
- 388 просмотров
5 комментариев
Простой 5 комментариев
Настройка Autoprefixer под Webpack
Autoprefixer — это плагин PostCSS для добавления вендорных префиксов на основе данных сервиса Can I Use. Благодаря этому плагину, создание кроссбраузерного CSS стало проще. Не нужно добавлять ‘мусорный’ код, так как PostCSS является постобработчиком и добавляет уже, непосредственно, при сборке web-приложения. Это будет небольшой заметкой как быстро настроить Autoprefixer для Webpack 2 .
1. Установка
Для начала необходимо установить postcss-loader , который позволяет использовать PostCSS в экосистеме Webpack, без лишних “телодвижений” :
npm install postcss-loader Также устанавливаем сам плагин:
npm install autoprefixer 2. Конфигурация
Импортируем в файл webpack-конфигурации: const autoprefixer = require(‘autoprefixer’);
И правим в разделе module.rules . Добавляем правило для .scss или .css типов:
loader: 'postcss-loader', options: plugins: [ autoprefixer( browsers:['ie >= 8', 'last 4 version'] >) ], sourceMap: true > >, Важно чтобы оно было расположено после style-loader , css-loader и до sass-loader (если таковой имеется). В опции postcss-loader добавляем плагин, у него же в конструктор передаются опции. Опции можно посмотреть в официальном мануале. Большинство из них включены по умолчанию, можно их опционально отключить. Мы передадим массив браузеров, которые мы хотим использовать. Autoprefixer поддерживает выражения Browserlist , такие как: ‘ie >= 8’ , ‘last 4 version’ .
В конечном счете, для .scss были добавлены следующие правила:
module: rules: [ test: /\.scss$/, use: [ loader: 'style-loader' >, loader: 'css-loader', options: sourceMap: true > >, loader: 'postcss-loader', options: plugins: [ autoprefixer( browsers:['ie >= 8', 'last 4 version'] >) ], sourceMap: true > >, loader: 'sass-loader', options: includePaths: [ helpers.root('src', 'styles', 'global'), ], sourceMap: true > > ], >, ] >, Плюсом такого подхода является скорость настройки и отсутствие необходимости создавать специальные файлы конфигурации для PostCSS .