Autoprefiximg Semantic-пользовательский интерфейс

#html #css #semantic-ui #semantic-ui-css

#HTML #css #семантический пользовательский интерфейс #семантический-пользовательский интерфейс-css

Вопрос:

Я новичок и хотел бы спросить, как автоматически исправить меньшее количество файлов semantic-ui? Согласно документам,

 Add vendor prefixes for supported browsers with autoprefixer
  

Ответ №1:

Autoprefixer — популярный плагин, который разработчики интегрируют в свой рабочий процесс, чтобы не сойти с ума, пытаясь запомнить все префиксы поставщика. Вот ссылка:https://github.com/postcss/autoprefixer

Если вы используете текстовый редактор Sublime, вы также можете установить его через менеджер пакетов. В пользовательских настройках пакета вы можете выбрать, какие браузеры вы хотите поддерживать. Например: ['> 5%', 'last 1 version']

Autoprefixer использует Browerlist, чтобы указать, на какие браузеры следует настроить таргетинг.

Поскольку Autoprefixer является постпроцессором для CSS, вы также можете использовать его с препроцессорами, такими как Sass, Stylus или LESS.

Один из методов, который вы можете использовать вместо открытия каждого файла LESS и применения к нему Autoprefixer, — это использовать gulp-less плагин.

Вот пример:

 var LessAutoprefix = require('less-plugin-autoprefix');
var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });

return gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [autoprefix]
  }))
  .pipe(gulp.dest('./public/css'));
  

Исходный код: https://github.com/plus3network/gulp-less

Комментарии:

1. Или OP мог бы просто использовать glup.js файл, являющийся частью установки Semantic-UI. Различные задачи там используют autoprefixer, когда это уместно.