꿀꺽의 autoprefixer는 MOZ 접두사

Question

내 프로젝트 autoprefixer로 쭉 마시는를 사용하고 추가하지 않으며,이 같은 배경 그라데이션 사용해야합니다 :

background: linear-gradient(#e98a00, #f5aa2f); 

을하지만 출력은 다음과 같습니다

background:-webkit-linear-gradient(#e98a00,#f5aa2f); 
background:linear-gradient(#e98a00,#f5aa2f); 

무엇 나 잘못 생각해? Gulpfile.js

gulp.task('styles', function() { 
    return gulp.src(['css/less/mainPage.less']) 
    .pipe(plumber()) 
    // .pipe(concat('base.scss')) 
    .pipe(less()) 
    .pipe(prefix([{ browsers: ['IE 8', 'IE 9', 'last 5 versions', 'Firefox 14', 'Opera 11.1'] }])) 
    .pipe(minifyCSS({keepBreaks: true})) 
    .pipe(gulp.dest('css')) 
    .pipe(connect.reload()); 
}); 

스피의

부 꿀꺽 - autoprefixer에게

를 사용하여 스피

browsers: ['Firefox 14'] 

출력 여전히 설정하는 경우에도 :

background:-webkit-linear-gradient(#e98a00,#f5aa2f); 
background:linear-gradient(#e98a00,#f5aa2f); 

Answer 1

사용 "꿀꺽 - postcss"와 "autoprefixer 코어". 사용 예 :

var MASK_SRC = "./src/mask/page0/"; 

var gulp = require("gulp") 
var plumber = require("gulp-plumber") 
var postcss = require('gulp-postcss'); 
var sourcemaps = require('gulp-sourcemaps'); 
var autoprefixer = require('autoprefixer-core'); 
var csso = require("gulp-csso") 

gulp.task("styles", function() { 
    return gulp.src(MASK_SRC + "scss/*.css") 
    //.pipe(plumber()) 
    .pipe(postcss([ autoprefixer({ browsers: ["> 0%"] }) ])) 
    //.pipe(csso()) 
    .pipe(gulp.dest(MASK_SRC + "/css/")) 
}) 

gulp.task("dev", ["styles"], function() { 
    gulp.watch(MASK_SRC + "scss/**/*", function(event) { 
    gulp.run("styles") 
    }) 
}) 

Answer 2

http://caniuse.com/#search=linear-gradient을 확인하면 적어도 버전 30은 moz- 접두사가 필요하지 않으므로 Firefox가 표시됩니다. 버전 버전 30은 < 1 %의 세계 시장 점유율을 가지고 있으며 사용자가 설정했습니다 '> 1%'

Answer 3

아무 문제가 없습니다. 모두 예상대로 작동하는 것 같습니다.

것은 Firefox가 v16 이후 -moz 접두사를 필요로하지 않는다, 당신은 Firefox 14, Can I Use에 의해보고 된이 버전의 글로벌 브라우저 사용 0.04%입니다 설정 한 경우에도 그렇게 그렇지 않은 경우 > 1%을 precised했습니다 출력에 추가됩니다.

Firefox 14에 -moz이라는 접두어를 추가하려면 browsers 목록에서 > 1%을 제거해야합니다.

Answer 4

gulp-autprefixer의 버그가 있습니다. "-moz-"접두사를 추가 할 수 없습니다.

Autoprefixer 독립형 잘 작동 : http://jsfiddle.net/tsvppawk/

같은 쿼리 "파이어 폭스> = 2"에 꿀꺽 - atuprefixer가 생성

background: -webkit-linear-gradient(#e98a00, #f5aa2f); 
background: linear-gradient(#e98a00, #f5aa2f);