KARTE Template Guidelines

Autoprefixer

CSS をベンダープレフィックス付きに変換してくれます。
対応ブラウザ向けの記述漏れを防ぐため利用推奨です。

サンプルコード

  • 変換前

    .example {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    flex-direction: row;
    justify-content: space-between;
    transition: .5s;
    user-select: none;
}

  • 変換後

    .example {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 1;
            flex-grow: 1;
    -webkit-flex-basis: 0;
            flex-basis: 0;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    transition: .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

利用方法

ローカル環境では npm-scripts や gulp などのタスクランナーを利用するか、
素早く済ませたい場合は Web サービスの利用をお勧めします。

対象ブラウザとフィルタは下記を参考に最適化します。

ローカル環境

Autoprefixer - GitHub
フィルタ
> 1% in JP, ie >= 11, safari >= 8, iOS >= 8, Android >= 4.4

Web サービス

Autoprefixer CSS online
フィルタ
last 2 Chrome versions, last 2 ChromeAndroid versions, last 2 Firefox versions, last 2 Edge versions, ie >= 11, safari >= 8, iOS >= 8, Android >= 4.4

※リージョン指定 > 1% in JP が非対応のため指定が異なります。
※コードを全て貼り付けて利用するのはなるべく避けましょう。