CSSをminify化(ファイル圧縮)した際、CSSアニメーションが動かないという事があり、原因を調べてみました。
圧縮する際のエラーかなと思っていたのですが、エラーというよりはCSSの書き方に注意が必要でした。
事の発端
ワードプレステーマのCocoonには高速化機能があり、CSSファイルやJavaScriptファイルをminify化(ファイル圧縮)してくれる機能があるのですが、自分で追加した@keyframesを使ったCSSのアニメーションが動いておらず、minify化せずに、そのまま放置しておりました。
仕事ではCSSファイルをコンパイルしてminify化してるのですが、問題なく動いてる(それが普通)、ふ「原因は圧縮のようで圧縮じゃない?」と思い出し原因を探りました。
エラーになる原因
Cocoonでは「PHP Function to Minify HTML, CSS and JavaScript」というminify化のライブラリを使用しているみたいで、このライブラリがminify化の際に、余分な物としてソースの一部を除外されてしまいCSSアニメーションが動かなかった模様。
除外というのも、僕的には「しょうがないのかなぁ」と思う箇所で、以下のような@keyframesで「0%」を指定した際に今回の事例が起きました。
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
CSSでは基本、0(ゼロ)は何をやっても絶対的に0だから単位は不要(僕はそう解釈)。
上記の様に@keyframesの「0%」は本来必要な内容ですが、このライブラリではminify化の際、不要な対象と認識され「%」が除外されてしまったのが原因です。
CSSアニメーション、対処法
対処方法は簡単、以下のように「0%」を「from」に変更すれば、問題ありません。
@keyframes fade {
from {
opacity: 0;
}
100% {
opacity: 1;
}
}
まとめ
minify化の注意点というよりは、「どのツールでminify化したか」という所が一番重要な部分なので、今回書いた内容が当てはまる方は少ないかなと思います。
ただ、WPテーマCocoonで使用されている、「PHP Function to Minify HTML, CSS and JavaScript」ライブラリに限らず、コンパイルするツールによっては同じ事が起きるかもしれません。
対応・対策内容としては、めちゃくちゃ簡単なんで、すぐ解決できると思います。
そもそも、こんな事あまり発生しないと思いますが!
いつかブラウザ側が@keyframesの指定を「0」でも対応して、誰もこの事に気づかないまま、過ぎ去りそう。
コメント