Как пользоваться автопрефиксером онлайн
В процессе разработки веб сайтов и приложений, разработчик сталкивается с проблемой поддержки всех, нужных для него, браузеров. Но некоторые свойства работают только с вендорными префиксами (в некоторых браузерах). Для это был создан проект 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.
How do I enable auto prefix in visual studio code?
I’ve been trying to make my website more responsive but I’m having trouble enabling auto prefixer in visual studio code. I installed the extension but it doesn’t seem to work. Any help would be appreciated.
asked Sep 24, 2020 at 10:23
Emmanuel Appiah Emmanuel Appiah
33 2 2 silver badges 6 6 bronze badges
2 Answers 2
You shoud go to visual studio extensions.
1 — Install Autoprefixer.
2 — Ctrl + Shift + P > Type «Preferences: Open Settings(JSON)».
3 — Add this code snippet : «autoprefixer.options»: < "browsers": [ "last 4 versions", "ie >= 9″, «> 5%» ] >
4- Restart Visual Studio Code.
5 — Select the css code you want to prefix.
6 — Ctrl + Shift + P > Type «Autoprefixer: Run».
answered Feb 21, 2021 at 16:06
Bruno Vinícius Bruno Vinícius
86 1 1 silver badge 5 5 bronze badges
You can go to setting and search for auto prefixer in search bar at the top you will be able to enable and customize any extension. Moreover, you can check the detail of the extension to know how to use it, Or You check out this answer also Enable vendor prefix autocomplete in CSS files in Visual Studio Code.
answered Sep 24, 2020 at 10:34
66 5 5 bronze badges
- visual-studio
- visual-studio-code
- webkit
- autoprefixer
-
The Overflow Blog
Linked
Related
Hot Network Questions
Subscribe to RSS
Question feed
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2024 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2024.1.9.3159
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Как добавить вручную вендорные префиксы для 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 таких проблем не замечал).
П.С. Я так понял, что это единственный более-менее нормальный плагин для ВСки.
- Вопрос задан более трёх лет назад
- 391 просмотр
5 комментариев
Простой 5 комментариев
Включить автозаполнение префиксов поставщика в файлах CSS в Visual Studio Code
Как я могу указать VSCode автоматически добавлять свойства стиля с префиксом поставщика при добавлении свойства без префиксов поставщика, добавленных в файлы CSS (не файлы SASS и LESS)?
Я использовал плагин css-auto-prefix . Большинство свойств CSS3 работает нормально. Хотя все еще находится в бета-версии, улучшения продолжаются. Вы должны попробовать это, это экономит время и энергию.
Выполните следующие шаги для установки css-auto- плагин префикса в vscode.
- Открыть VS Code.
- Щелкните Ctrl + Shift + X (в Windows) или щелкните значок расширений слева большая часть панели.
- Появится окно поиска. Просто введите css-auto-prefix .
- Установите и перезагрузите, и все готово.
Поделиться
Улучшите этот ответ
отредактировано 05 дек. ’18 в 18:20
ответил 05 дек. ’18 в 6:02
добавить комментарий |
Я использовал плагин css-auto-prefix . Для большинства свойств CSS3 он работает Хорошо. Хотя все еще находится в бета-версии, улучшения продолжаются. Вы должны попробовать эту, она экономит время и энергию.
Выполните следующие шаги, чтобы установить плагин css-auto-prefix в vscode.
- Открыть код VS.
- Нажмите Ctrl + Shift + X (в Windows) или щелкните значок расширений на самой левой панели.
- Появится окно поиска. Просто введите css-auto-prefix .
- Установите и перезагрузите, и все готово.
Я был с помощью плагина VS Code Autoprefixer . Он поддерживает CSS, SCSS и SASS.
Выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: Run .
Если ничего не происходит, добавьте следующий раздел в settings.json для Autoprefixer –
"autoprefixer.options": = 9", "> 5%"]>
После этого выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: запустить , и он будет работать.
Поделиться
Улучшите это ответ
ответ дан 28 окт. в 13: 33
Проголосуйте за введение плагина. Я не знал, что такое было �� – Shamshirsaz.Navid 28 окт.2020 в 11:18
добавить комментарий |
Я использовал плагин VS Code Autoprefixer . Он поддерживает CSS, SCSS и SASS.
Выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: Run .
Если ничего не происходит, добавьте следующий раздел в settings.json для Autoprefixer –
"autoprefixer.options": = 9", "> 5%"]>
После этого выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: запустите , и он будет работать.
Вы можете установить расширение “ Auto prefix ” или “ Css Auto Prefix ” в свой код vs, но я не совсем уверен, было бы нормально написать наш собственный snippest для префикса, возможно, так он будет более настраиваемым.
Но мы также всегда можно установить «автоматический префикс» через NPM в диспетчер пакетов узла .
Поделиться
Улучшите этот ответ
18 янв. в 9:19
добавить комментарий |
Вы можете установить « Автоматический префикс » или « Автоматический префикс Css “Расширение в вашем коде vs, но я не совсем уверен, можно ли было бы написать наш собственный snippest для префикса, возможно, так оно и будет быть более настраиваемым.
Но мы также всегда можем установить «автоматический префикс» через NPM на узел менеджер пакетов .