A script that adds standardised equivalents to CSS declarations that uses only prefixed code
JavaScript
Pull request Compare This branch is 4 commits ahead, 14 commits behind webcompat:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
cssfixme.js
package.json

README.md

css-fixme

-webkit- prefix のついたプロパティを -webkit- prefix がついていない状態へとよしなに変換します。 なお、このツールはhallvors/css-fixmeをコマンドライン上で叩けるように魔改造したものです。

使用する際には、注意事項をよく読んでください。 手動で変換する必要のあるものがいくつか残っています。

余裕があれば、どなたか自動でよしなにするように修正していただけるとありがたいです。

インストール

npm i -g git://github.com/Kuniwak/css-fixme.git

使い方

css-fixme path/to/legacy.css > path/to/converted.css

Whoa, Sir!が出る場合は、その箇所の変換に自信がないことを示しています。 なので、該当する箇所を変換後のCSSから探し、修正してください。

注意事項

missing '{' が出る場合

css-fixmeはCSSしか解析ができません。 Less等の構文//によるコメントや、mixinなどが返還前のLessに含まれているとこのようなメッセージが出ます。 css-fixmeを使う場合は、Lessの構文が含まれないように気をつけてください。

Multiple background について

複数指定のbackgroundがきたとき、うまく処理できません。 手動で書き換えてください。

.hoge {
background:-webkit-gradient(linear, left top, left bottom, from(#990), to(#066)), url(hoge.png);
}

-webkit-gradient180deg について

180deg指定は、S Browserを搭載するAndroid端末のみで問題になる変換結果になってしまいます(参考情報)。

.hoge {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#edeae0));
}

は下のように変換されるので、

.hoge {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#edeae0));
background: linear-gradient(180deg, #fff 0%, #edeae0 100%);
}

180degto bottom に書き換えてください。

/* 手動で変更 */
.hoge {
background: linear-gradient(to bottom, #fff 0%, #edeae0 100%);
}

-webkit-device-pixel-ratio について

-webkit-device-pixel-ratio は変換されません。 手動でmin-resolutionへと変換してください(参考情報)。

@media only (-webkit-device-pixel-ratio: 1.5){}
/* 手動で変更 */
@media only (min-resolution: 1.5){}

謝辞