Css autoprefixer: Автопрефиксер CSS онлайн

Leave a Comment / Css / By /

Содержание

Работа с CSS | Vue CLI

Проекты Vue CLI предоставляют поддержку для PostCSS, CSS-модулей, а также пре-процессоров, включая Sass, Less и Stylus.

Указание ссылок на ресурсы

Весь скомпилированный CSS обрабатывается css-loader, который будет парсить url() и разрешать их как зависимостями модуля. Это означает, что вы можете ссылаться на ресурсы, используя относительные пути на основе локальной файловой структуры. Обратите внимание, что если вы хотите ссылаться на файл внутри npm-зависимости или через псевдоним webpack, путь должен начинаться с префикса ~ для избежания двусмысленности. Подробнее в разделе Обработка статических ресурсов.

Пре-процессоры

Вы можете выбрать пре-процессоры (Sass/Less/Stylus) при создании проекта. Если вы этого не сделали, то внутренняя конфигурация webpack всё равно настроена для их использования. Вам лишь требуется вручную доустановить соответствующие загрузчики для webpack:

# Sass
npm install -D sass-loader sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus

Примечание при использовании webpack 4

При использовании webpack версии 4, по умолчанию во Vue CLI 4, следует убедиться в совместимости используемых загрузчиков. 10 sass

Теперь вы можете импортировать соответствующие типы файлов, или использовать их синтаксис внутри файлов *.vue с помощью:

<style lang="scss">
$color: red;
</style>

Совет по производительности Sass

Обратите внимание, при использовании Dart Sass синхронная компиляция вдвое быстрее асинхронной по умолчанию, из-за накладных расходов на асинхронные коллбэки. Чтобы избежать их можно воспользоваться пакетом fibers для вызова асинхронных импортёров по пути синхронного кода. Для этого просто установите

fibers в качестве зависимости проекта:

npm install -D fibers

Также имейте в виду, поскольку это нативный модуль, то могут возникнуть различные проблемы совместимости, в зависимости от ОС и окружения сборки. В таких случаях выполните npm uninstall -D fibers для устранения проблемы.

Автоматические импорты

Если вы хотите автоматически импортировать файлы (для цветов, переменных, примесей. ..), можно использовать style-resources-loader. Вот пример для stylus, который импортирует ./src/styles/imports.styl в каждый однофайловый компонент и в каждый файл stylus:

// vue.config.js
const path = require('path')
module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'),
      ],
    })
}

Вы также можете использовать vue-cli-plugin-style-resources-loader.

PostCSS

Vue CLI использует PostCSS внутри себя.

Вы можете настроить PostCSS через .postcssrc или любую другую конфигурацию, которая поддерживается postcss-load-config, а также настраивать postcss-loader через опцию css. loaderOptions.postcss в файле vue.config.js.

Плагин autoprefixer включён по умолчанию. Чтобы определить целевые браузеры используйте поле browserslist в файле

package.json.

Примечание о префиксных CSS правилах

В сборке для production Vue CLI оптимизирует ваш CSS и удаляет ненужные префиксные правила CSS, основываясь на целевых браузерах. С autoprefixer включённым по умолчанию, вы должны всегда использовать только CSS-правила без префиксов.

CSS-модули

CSS-модули в файлах *.vue доступны из коробки с помощью <style module>.

Для импорта CSS или других файлов пре-процессоров в качестве CSS-модулей в JavaScript, необходимо чтобы имя файла заканчивалось на .module.(css|less|sass|scss|styl):

import styles from './foo.module.css'
// работает для всех поддерживаемых пре-процессоров
import sassStyles from './foo.module.scss'

Если вы не хотите указывать .

module в именах файлов, установите css.requireModuleExtension в false внутри файла vue.config.js:

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

Если вы хотите настроить генерируемые имена классов для CSS-модулей, вы можете сделать это с помощью опции css.loaderOptions.css в vue.config.js. Все настройки css-loader поддерживаются, например localIdentName и camelCase:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // Примечание: формат конфигурации отличается между Vue CLI v4 и v3
        // Для пользователей Vue CLI v3, обратитесь к документации css-loader v1
        // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
        modules: {
          localIdentName: '[name]-[hash]'
        },
        localsConvention: 'camelCaseOnly'
      }
    }
  }
}

Передача настроек в загрузчики пре-процессоров

Иногда может возникнуть необходимость передать настройки в загрузчик пре-процессора для webpack. Вы можете сделать это с помощью опции css.loaderOptions в vue.config.js. Например, для передачи глобальных переменных во все стили Sass/Less:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // передача настроек в sass-loader
      // @/ это псевдоним к каталогу src/ поэтому предполагается,
      // что у вас в проекте есть файл `src/variables.scss`
      // Примечание: эта опция называется "prependData" в sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // по умолчанию опция `sass` будет применяться к обоим синтаксисам
      // потому что синтаксис `scss` по сути также обрабатывается sass-loader
      // но при настройке опции `prependData` синтаксис `scss` требует точку с запятой
      // в конце оператора, в то время как для `sass` точки с запятой не требуется
      // в этом случае синтаксис `scss` можно настроить отдельно с помощью опции `scss`
      scss: {
        additionalData: `@import "~@/variables.
  scss";`
      },
      // передача настроек Less.js в less-loader
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` — имя поля глобальных переменных
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

Загрузчики которые можно настраивать с помощью опции loaderOptions:

  • css-loader
  • postcss-loader
  • sass-loader
  • less-loader
  • stylus-loader

Совет

Это предпочтительнее, чем вручную обращаться к конкретным загрузчикам, используя

chainWebpack, потому что настройки необходимо применять в нескольких местах, где используется соответствующий загрузчик.

Включить автозаполнение префиксов поставщика в файлах CSS в Visual Studio Code

Главная » IT

Автор Кирилл Соколов На чтение 3 мин. Просмотров 493 Опубликовано

Как я могу указать VSCode автоматически добавлять свойства стиля с префиксом поставщика при добавлении свойства без префиксов поставщика, добавленных в файлы CSS (не файлы SASS и LESS)?

Я использовал плагин css-auto-prefix . Большинство свойств CSS3 работает нормально. Хотя все еще находится в бета-версии, улучшения продолжаются. Вы должны попробовать это, это экономит время и энергию.

Выполните следующие шаги для установки css-auto- плагин префикса в vscode.

  1. Открыть VS Code.
  2. Щелкните Ctrl + Shift + X (в Windows) или щелкните значок расширений слева большая часть панели.
  3. Появится окно поиска. Просто введите css-auto-prefix .
  4. Установите и перезагрузите, и все готово.

css -auto-prefix

Поделиться

Улучшите этот ответ

отредактировано 05 дек. ’18 в 18:20

ответил 05 дек. ’18 в 6:02

добавить комментарий |

Я использовал плагин css-auto-prefix . Для большинства свойств CSS3 он работает Хорошо. Хотя все еще находится в бета-версии, улучшения продолжаются. Вы должны попробовать эту, она экономит время и энергию.

Выполните следующие шаги, чтобы установить плагин css-auto-prefix в vscode.

  1. Открыть код VS.
  2. Нажмите Ctrl + Shift + X (в Windows) или щелкните значок расширений на самой левой панели.
  3. Появится окно поиска. Просто введите css-auto-prefix .
  4. Установите и перезагрузите, и все готово.

css -авто-префикс

Я был с помощью плагина VS Code Autoprefixer . Он поддерживает CSS, SCSS и SASS.

Выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: Run .

Если ничего не происходит, добавьте следующий раздел в settings.json для Autoprefixer –

 "autoprefixer. options": {"браузеры":  ["последние 4 версии", "ie> = 9", "> 5%"]}

После этого выберите весь CSS, затем нажмите палитру команд, затем нажмите

AutoPrefixer: запустить , и он будет работать.

Поделиться

Улучшите это ответ

ответ дан 28 окт. в 13: 33

добавить комментарий |

Я использовал плагин VS Code Autoprefixer . Он поддерживает CSS, SCSS и SASS.

Выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: Run .

Если ничего не происходит, добавьте следующий раздел в settings.json для Autoprefixer –

 "autoprefixer.options": {"браузеры":  ["последние 4 версии", "ie> = 9", "> 5%"]}

После этого выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: запустите , и он будет работать.

Вы можете установить расширение “ Auto prefix ” или “ Css Auto Prefix ” в свой код vs, но я не совсем уверен, было бы нормально написать наш собственный snippest для префикса, возможно, так он будет более настраиваемым.

Но мы также всегда можно установить "автоматический префикс" через NPM в диспетчер пакетов узла .

Поделиться

Улучшите этот ответ

18 янв. в 9:19

добавить комментарий |

Вы можете установить « Автоматический префикс » или « Автоматический префикс Css “Расширение в вашем коде vs, но я не совсем уверен, можно ли было бы написать наш собственный snippest для префикса, возможно, так оно и будет быть более настраиваемым.

Но мы также всегда можем установить "автоматический префикс" через NPM на узел менеджер пакетов .

Autoprefixer против PostCSS | Каковы различия?

Home

Application and Data

Languages ​​& Frameworks

CSS Pre-processors / Extensions

Autoprefixer1. 2K Stacks

PostCSS603 Stacks

Autoprefixer

Stacks1.2K

Followers49

+ 1

Votes0

PostCSS

Стеки603

Подписчики509

+ 1

Голоса49

Добавить инструмент

Autoprefixer и PostCSS: в чем разница?

Автопрефиксер: Плагин PostCSS для разбора CSS и добавления префиксов поставщиков к правилам CSS . Это постпроцессор CSS. Он просматривает скомпилированные файлы CSS, чтобы добавить или удалить префиксы поставщиков, такие как -webkit и -moz, после проверки кода; PostCSS: Преобразование CSS с помощью плагинов JS . PostCSS — это инструмент для преобразования CSS с помощью плагинов JS. Эти плагины могут поддерживать переменные и миксины, транспилировать будущий синтаксис CSS, встроенные изображения и многое другое.

Autoprefixer и PostCSS можно отнести к категории «препроцессоров/расширений CSS» инструментов.

PostCSS — это инструмент с открытым исходным кодом, имеющий 21,2 тыс. звезд GitHub и 1,16 тыс. форков GitHub. Вот ссылка на открытый репозиторий PostCSS на GitHub.

Rainist , Uploadcare и Twilio SendGrid — некоторые из популярных компаний, использующих PostCSS, тогда как Autoprefixer используется Startae , Бригада и Вырезки . PostCSS имеет более широкое одобрение, упоминается в 95 стеках компаний и 240 стеков разработчиков; по сравнению с Autoprefixer, который указан в стеках компаний 6 и стеках разработчиков 11 .

Советы по Autoprefixer и PostCSS

awesomebanana2018

CEO at ME! · | 5 голосов «за» · 271,7 тыс. просмотров

Нужен совет

на

0003

и

Stylus

Изначально я собирался начать использовать Sass с Parcel , но потом узнал о Stylus , который выглядел интересно, потому что он может получать значения свойств чего-то напрямую, а не через переменные , и PostCSS , что выглядело интересно, потому что вы можете настроить предварительную/постобработку. Какой инструмент вы бы порекомендовали?

Подробнее

Ответов (2)

Андрей Кирмас

| 2 голоса «за» · 86,4 тыс. просмотров

Рекомендует

на

PostCSS

Вы не правы, говоря «против Postcss». Вы используете Less/Sass/Stylus/… для создания «CSS» (возможно, расширенный означает, что у него будут некоторые будущие функции), а затем в любом случае будет воспроизводиться PostCSS (он поставляется с Parcel/NextJS/CRA/… )

Подробнее

Enyo Onuche

| 1 голос «за» · 1,1 тыс. просмотров

Рекомендует

Подробнее

Получите консультацию от разработчиков вашей компании с помощью StackShare Enterprise. Зарегистрируйтесь в StackShare Enterprise.

Узнать больше

Плюсы Autoprefixer

Плюсы PostCSS

    Будьте первым, кто покинет профессионал

    — Общедоступный репозиторий GitHub недоступен —

    Что такое Autoprefixer?

    Это постпроцессор CSS. Он просматривает скомпилированные файлы CSS, чтобы добавить или удалить префиксы поставщиков, такие как -webkit и -moz, после проверки кода.

    Что такое PostCSS?

    PostCSS — это инструмент для преобразования CSS с помощью плагинов JS. Эти плагины могут поддерживать переменные и миксины, транспилировать будущий синтаксис CSS, встроенные изображения и многое другое.

    Вакансии, в которых Autoprefixer и PostCSS упоминаются в качестве желаемого набора навыков0010 Какие компании используют Autoprefixer?

    Какие компании используют PostCSS?

    • Startae
    • Clippings
    • tribe29
    • eeSea
    • Uploadcare
    • Brigade
    • cryptobotAI.ml1
    • Lendit
    • Uploadcare
    • Twilio SendGrid
    • WeGift
    • Rainist
    • HHEY
    • Pleo

    Узнайте, какие команды внутри вашей компании используют Autoprefixer или PostCSS.

    Зарегистрируйтесь в StackShare EnterpriseПодробнее

    Какие инструменты интегрируются с Autoprefixer?

    Какие инструменты интегрируются с PostCSS?

      No integrations found

      • React. js Boilerplate
      • Vite
      • Adobe Dreamweaver
      • SvelteKit
      • tachyons
      • JSFiddle
      • Jetpack

      Blog Posts

      How Uploadcare Built a Stack That Handles 350M File Запросы API…

      28 июля 2017 г., 7:41

      Uploadcare

      Какие есть альтернативы Autoprefixer и PostCSS?

      Автоматизация задач системы сборки: минификация и копирование всех файлов JavaScript, статических изображений. Больше возможностей для просмотра файлов для автоматического повторного запуска задачи при изменении файла.

      Sass — это расширение CSS3, добавляющее вложенные правила, переменные, примеси, наследование селекторов и многое другое. Он переводится в хорошо отформатированный стандартный CSS с помощью инструмента командной строки или плагина веб-фреймворка.

      Animate.css

      Это набор классных, забавных и кроссбраузерных анимаций, которые вы можете использовать в своих проектах. Отлично подходит для акцентов, домашних страниц, ползунков и вообще просто добавь воды.

      Less — это препроцессор CSS, что означает, что он расширяет язык CSS, добавляя функции, позволяющие использовать переменные, примеси, функции и многие другие методы, которые позволяют сделать CSS более удобным в сопровождении, тематизируемым и расширяемым.

      Stylus

      Stylus — это революционно новый язык, обеспечивающий эффективный, динамичный и выразительный способ создания CSS. Поддержка как синтаксиса с отступом, так и обычного стиля CSS.

      See all alternatives

      Related Comparisons

      PostCSS vs Sass vs StylusPostCSS vs SassPostCSS vs PurifyCSSCompass vs PostCSS vs SassBourbon vs PostCSS

      Trending Comparisons

      Django vs Laravel vs Node.jsBootstrap vs Foundation vs Material-UINode.js vs Spring BootFlyway против LiquibaseAWS CodeCommit против Bitbucket против GitHub

      Основные сравнения

      Bootstrap против MaterializeBitbucket против GitHub против GitLabHipChat против Mattermost против SlackPostman против Swagger UI

      Все об автопрефиксере, что нужно знать

      Перейти к основному содержанию

      Все об Autoprefixer, что нужно знать

      Кто-то говорит:

      Autoprefixer упрощает создание кода CSS Grid, совместимого с IE, используя только чистый CSS в исходном коде.

      Что такое Autoprefixer

      Autoprefixer — это подключаемый модуль PostCSS, который анализирует ваш CSS и добавляет префиксы поставщиков, используя базу данных «Могу ли я использовать», чтобы определить, какие префиксы необходимы.

      Почему мы должны использовать Autoprefixer

      Когда мы пишем код CSS, мы не знаем, как заставить его работать во всех браузерах, поэтому вы ищете Google, читаете Stackoverflow, чтобы заставить его работать, и это слишком отнимает ваше время.

      Используя Autoprefixer, вы можете избежать повторения бесполезной задачи при написании кода CSS. Этот инструмент может помочь вам забыть, как сделать код CSS кроссбраузерным, просто напишите обычный код, а затем инструмент может добавлять префиксы поставщиков непосредственно в ваш код.

      Например:

       .пример {
  отображение: сетка;
  переход: все .5с;
}

      Он должен транспилироваться в:

       .example {
  отображение: -ms-сетка;
  отображение: сетка;
  -webkit-переход: все . 5s;
  -о-переход: все .5s;
  переход: все .5s;
}

      Кто использует Autoprefixer

      Многие известные компании используют Autoprefixer, такие как Google, Facebook, Twitter, Aliaba…

      Как это работает

      Autoprefixer добавляет префиксы поставщиков, используя базу данных Can I Use, чтобы определить, какие префиксы необходимы .

      По умолчанию Autoprefixer поддерживает 2 последние версии основных браузеров, как это делает Google. Но вы можете выбрать, какие браузеры поддерживаются в вашем проекте, по имени (например, ff 21) или по шаблону:

      • Последние 2 версии каждого основного браузера, использующие последние 2 версии.
      • Более 1 % глобальной статистики использования использует > 1 %.
      • Только более новые версии от ff > 20 или ff >= 20.

      Использование Autoprefixer с Webpack

      В Webpack вы можете использовать postcss-loader с автопрефиксером и другими плагинами PostCSS.

       модуль. экспорт = {
  модуль: {
    правила: [{
      тест: /\.css$/,
      используйте: ["style-loader", "css-loader", "postcss-loader"]
    }]
  }
}

      И создайте postcss.config.js с:

       module.exports = {
  плагины: [
    требуют('автопрефиксер')
  ]
}

      Использование Autoprefixer с WordPress, Joomla

      Если вы все еще используете старые сайты, такие как WordPress, Joomla… и у вас нет современного инструмента сборки, такого как Webpack, Gulp или Grunt, вы можете использовать онлайн-инструмент CSS AutoPrefixer, он отлично работает для вас.

      • Лам Тхо Нао Хоан Тхин Ку Нанг Джао Тип

        12 мая 2020 г.

      • Biết giao tiep tốt và hợp tác trong lam việc nhom

        4 мая 2020 г.

      • Hiểu nhung nguyên tắc cơ bản của việc kinh doanh

        30 апр. 2020 г.

      • Chuyện phỏng vấn hay la về bài toán формат số tiền.

        29 июля 2018 г.

      • Quy tắc 333 hay la phiếm đàm về chuyện phỏng vấn Старший разработчик

        10 июня 2018 г.

      • Программисты романтичны или нет?

        30 мая 2018 г.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *