2016-04-09 16 views
1

現在、autoprefixer npm packageを設定しようとしています。私はいくつかのCSSを挿入して、必要に応じてベンダープレフィックスを追加するかどうかを確認したいと思います。しかし、私はそれが自動的にベンダー固有の挿入をトリガーするCSSを追加するか分からない。オートプレフィクサーが動作しているかどうかをテストするにはどうすればよいですか?

パッケージが動作していることを確認するためにどのようなCSSを使用することができますか?

たとえば、OSX Chrome v49.xを使用している場合はどうすればよいですか?

+0

なぜdownvoteですか?私が質問を改善できるように、否定的なフィードバックだけでなく、コメントを提供してください。 – andersr

+1

[This](http://shouldiprefix.com/)が役に立ちます。また、古いブラウザをインストールしてテストしてください。 – Aziz

+0

はい、私はhttp://shouldiprefix.com/を見ましたが、自動プレフィックステストを行うためにそのリストにinformaitonをどのように適用しますか?また、私は古いブラウザを使用するというアイデアが気に入っていますが、インストールするのではなく、頭痛を覚えると思います。browserstackのようなサービスを使用すると思っています。とにかく、それは正しい道のように思えます。どうも! – andersr

答えて

2

私はgulpを初めて使っていて、自分のファイルがうまく動作していることをテストしたいと思っていました。私はautoprefixer関数のoptionsオブジェクトを利用して、(一時的に)いくつかの古いブラウザのバージョンをサポートするための要件を設定しました。 「線形勾配」など、特定のCSSプロパティの接頭辞が必要になります。以下のコード:

gulpfile.js autoprefix前

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")); 
}); 

アプリ/ CSS/Styles.cssを

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

後、アプリ/ 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); } 

作業中!

+0

私のために働いた!ありがとう。 –

0

自動プレフィクサーはhttp://caniuse.comデータベースを使用するので、そこのすべてのプロパティもチェックすることができます。

例:transition:とtransform:私が通常デバッグするもの

関連する問題