そのベンダー接頭辞はいつまで書くの?

Category : CSS

ベンダー接頭辞(プレフィックス)については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状の CSS についての話です。

新しい CSS モジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。
CSS のコードも冗長で読みづらくなりますし、もう使われていない(使われることもない)であろうものを残しておくのもちょっとなー。
実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。

また、はてなダイアリーの方でも書きましたが(もうチュートリアル記事には -webkit-gradient() 書かなくてもいいんじゃないかな)、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった(終わりつつある)のに、なんでそれしか書いてないの」と思うことが結構あります。どちらかというと実際に使われているコードよりこっちの方が気になっています。
対象ブラウザが広い場合には理由があるんだと分かりますが「CSS3 で作る何とか!」みたいなタイトルで書かれていると、なんか、こう……。
実際に使われているものならともかく、チュートリアルとしてはどうなの、と思っちゃうわけです。

とりあえず、現状はどうなっているのか気になっているものを調べてみました。
それと、Android の OS バージョン別シェアは Platform Versions で見ることができます。日本のシェアとは違うでしょうが……。

border-radius

-[webkit/moz]-border-radius
  • Chrome – 4.0
  • Safari 3.0 – 4.0
  • iOS Safari 4.0.4 (iOS 3.2)
  • Android 2.1
  • Firefox 2.0 – 3.6
border-radius
  • Chrome 5.0+ (2010年5月25日~)
  • Safari 5.0+ (2010年6月7日~)
  • iOS Safari 4.0.5+ (iOS 4.0+) (2010年6月21日~)
  • Android 2.2+ (搭載端末は2010年6月29日以降?)
  • Firefox 4.0+ (2011年3月22日~)
  • 使用可能になった Internet Explorer 9+ と Opera 10.5+ では接頭辞は必要ない

これはもう接頭辞いらないんじゃないでしょうか。
Webkit で必要になるのは Android 2.1 向けだけのような状態ですが(iOS の人はアップデートしてるでしょうし)、上記の Android バージョン別シェア(2012年5月1日版)では 5.5% しかありません。国内ではもう少し多いでしょうが、2.1 が出てから2年近く経ってますし、どんどん減ってくると思います。

Firefox 3.6 は先日サポートが切られましたし、書く必要ないと思います。
まあまだ 3.6 相当な Lunascape Gecko と Sleipnir Gecko もサポートしたいという方は書けばいいんじゃないでしょうか。
2012年06月28日リリースの Sleipnir 3.5 で Gecko のサポートは終了しました。

box-shadow

-[webkit/moz]-box-shadow
  • Chrome – 9.0
  • Safari 3.1 – 5.0
  • iOS Safari 4.0.4 – 5.0.2 (iOS 3.2 – 4.3)
  • Android 2.1 – 現行(4.0)
  • Firefox 3.5 – 3.6
box-shadow
  • Chrome 10.0+ (2011年3月8日~)
  • Safari 5.1+ (2011年7月20日~)
  • iOS Safari 5.1+ (iOS 5.0) (2011年10月12日~)
  • Firefox 4.0+ (2011年3月22日~)
  • 使用可能になった Internet Explorer 9+ と Opera 10.5+, Opera Mobile 11.0+ では接頭辞は必要ない

デスクトップブラウザ向けには接頭辞いらない感じですね。
Webkit は iOS が微妙なところですが、Android 4.0 でも接頭辞が必要なのでモバイル向けには書いたほうがいいかもしれません。
実務はともかく、チュートリアルなんかでは接頭辞ありは補足的な扱いで十分な気がします。

box-sizing

-[webkit/moz]-box-sizing
  • Chrome – 9.0
  • Safari 3.1 – 5.0
  • iOS Safari 4.0.4 – 5.0.2 (iOS 3.2 – 4.3)
  • Android 2.1 – 2.3 & 3.0
  • Firefox 2.0 – 現行(12.0)
box-sizing
  • Chrome 10.0+ (2011年3月8日~)
  • Safari 5.1+ (2011年7月20日~)
  • iOS Safari 5.1+ (iOS 5.0) (2011年10月12日~)
  • Android 4.0+ (搭載端末は2011年12月2日~)
  • 使用可能になった Internet Explorer 8+ と Opera 9.5+, Opera Mini 5.0+, Opera Mobile 10.0+ では接頭辞は必要ない

Webkit は Android が 4.0 以降なのでモバイル向けにはまだ必要かと思いますが(対応機種がまだ少ないので)、デスクトップ向けには要らない気がします。
Firefox は現行の 12.0 でも接頭辞が必要です。

Webkit の CSS グラデーション

-webkit-gradient([linear/radial], ...)
  • Chrome – 9.0
  • Safari 4.0 – 5.0
  • iOS Safari 4.0.4 – 5.0 (iOS 3.2 – 4.2.1)
  • Android 2.1 – 2.3 & 3.0
-webkit-[linear/radial]-gradient()
  • Chrome 10.0+ (2011年3月8日~)
  • Safari 5.1+ (2011年7月20日~)
  • iOS Safari 5.1+ (iOS 5.0) (2011年10月12日~)
  • Android 4.0+ (搭載端末は2011年12月2日~)

モバイル向けにはまだ -webkit-gradient() な感じですが、デスクトップ向けには -webkit-[linear/radial]-gradient() でいい気がします。

それよりもつい最近見たチュートリアル記事で -webkit-gradient() しか書かれていないのを見て、もう流石にそれはどうなの、と思ったわけです。これを書こうと思ったきっかけでもありますが。

それに、CSS グラデーションの構文は今年の1月に新しくなりましたし、チュートリアル的なものには標準のコードとしてそっちも載せておいた方が親切ではないでしょうか。構文はまた変更されるかもしれませんが、そのときはそのときで対応すればいいだけです。

ちなみに、to キーワードは Firefox と Opera が既にサポートし始めています。


現状でも他にもあるとは思いますが、とりあえずこんなところで。
こういったことはこれからどんどん増えてくると思います。
昔の記事にあるコードも全部書き直せとまでは思いませんが、ときどきでもブラウザのサポート状況を見てから記事に書くコードを考えてみてはどうでしょう。

まあ対応ブラウザによって接頭辞を書く書かないは違ってくるでしょうし、どう書こうが人の勝手なんですが、こういう普段使いのスニペット的なものはたまにはアップデートしたほうがいいんじゃないかな、という話でした。

どうでもいいですが、このブログでは最近は記事内にはできるだけ接頭辞を書かないようにしてます。
接頭辞なんかなくても大丈夫な日が来たときでも記事の読みやすさが保たれるかもな、と考えてのことです。
それと、本当はベンダー接頭辞なんて書きたくないと思っているからです。面倒くさいし読みづらいし長くなるし……。

Trackbacks & Pingbacks

Leave a Reply