Wie kann ich testen, ob ein Autoprefixer funktioniert?

Question

Ich versuche derzeit, die autoprefixer npm package einzurichten. Ich möchte etwas css einfügen, um zu sehen, ob es Vendor-Präfixe wie benötigt hinzufügt. Ich bin mir jedoch nicht sicher, welche CSS ich hinzufügen würde, die eine automatische herstellerspezifische Einfügung auslösen würde.

Wie könnte ich herausfinden, welche CSS ich verwenden könnte, um zu bestätigen, dass das Paket funktioniert?

Zum Beispiel, wenn ich OSX Chrome v49.x verwende, was würde ich verwenden?

Answer 1

Ich bin neu zu Schlucken und wollte testen, dass meine Datei auch funktionierte. Ich benutzte das Optionen-Objekt in der Autoprefixer-Funktion, um (vorübergehend) meine Anforderungen so einzustellen, dass sie einige alte Browser-Versionen unterstützen. Sie benötigen ein Präfix für bestimmte CSS-Eigenschaften, z. B. "linear-gradient". Code unten:

gulpfile.js

var gulp = require('gulp'); 
var autoprefixer = require('gulp-autoprefixer'); 

gulp.task('prefix', function() { 
    return gulp.src("app/css/**/*.css") 
    .pipe(autoprefixer({ browsers: ['IE 6','Chrome 9', 'Firefox 14']})) 
    .pipe(gulp.dest("app/css")); 
}); 

Vor autoprefix, app/css/styles.css:

html, body { 
    height: 100%; 
    margin: 0; 
    height: 0; 
    display: flex; 
    background: linear-gradient(#e98a00, #f5aa2f); 

Nach, app/css/styles.css :

html, body { 
    height: 100%; 
    margin: 0; 
    height: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: flex; 
    background: -webkit-gradient(linear, left top, left bottom, from(#e98a00), to(#f5aa2f)); 
    background: -moz-linear-gradient(#e98a00, #f5aa2f); 
    background: linear-gradient(#e98a00, #f5aa2f); } 

Arbeiten!

Answer 2

Autoprefixer verwenden http://caniuse.com Datenbank, so dass Sie auch alle Eigenschaften dort überprüfen können.

Zum Beispiel Übergang: und Transformation: sind diejenigen, die ich normalerweise debuggen mit