-moz-transformのskewが削除されてた

何の気なしにこのサイトをFirefoxで見てみたら、タイトル部分の傾きとかが適用されていない事に気が付いた。以前まで同じように表示されていたのに。

上がChrome、下がFirefox。
って事で原因とか調べてみたら、タイトルの通り、-moz-transformのskewが削除されてたという事で、経緯と代わりの方法も調べてみました。
最初に見つかったのは以下のページ。
transform - CSS: Cascading Style Sheets | MDN
skewの項を見ると、「Non-standard」と共に、以下のように書かれています。

Note: The skew() function was present in early drafts. It has been removed and is still present in some implementations. Do not use it.
To achieve the same effect, use skewX() if you were using skew() with one parameter or matrix(1, tan(ax), tan(ay), 1, 0, 0) for the general way. Note that tan() isn't a CSS function and you have to precalculate it yourself.

とありました。要するに、早期ドラフト状態だから実装を取りやめたよって事のようです。それと、パラメータ１つだったらskewX()もしくはmatrix()でやれと。幸いパラメータは１つだけだったので、skewXで対処できそうです。
また、skewY()も使えるので、パラメータ２つの場合でも、記述を分ける事で対処できそうです。

んじゃ、これっていつ実装を止めたの？と思って調べてヒットしたのが以下。
Firefox 14 for developers - Mozilla | MDN
CSSの項には以下のようにありました。

ドラフト標準から削除されたため、skew() 関数のサポートが transform プロパティから削除されました。

なるほど。

という事で、最終的に以下のようになりました。

-moz-transform: rotate(356deg) scale(1.043) skew(-6deg) translate(0px);
-moz-transform: rotate(356deg) scale(1.043) skewX(-6deg) translate(0px);

ベンダープレフィックスの付いたCSSは、当然こういった事も含めて使用するかどうかを考えないといけないんですよね。実際以下のサイトのように否定する意見が昔からあって、その意見はまっとうだと思うんですよね。

個人サイトやウチみたいな実験サイトなら自分の裁量でやれば良い話ですが、製品となると話は別ですし。