Unformed Building

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

公開：
更新：

パーマリンク

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

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

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

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

border-radius

When can I use CSS3 Border-radius?

-[webkit/moz]-border-radius
  • Chrome - 4.0
  • Safari 3.0 - 4.0
  • iOS Safari 4.0.4
  • 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+（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

When can I use CSS3 Box-shadow?

-[webkit/moz]-box-shadow
  • Chrome - 9.0
  • Safari 3.1 - 5.0
  • iOS Safari 4.0.4 - 5.0.2
  • 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+（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

When can I use CSS3 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 グラデーション

When can I use CSS Gradients?

-webkit-gradient([linear/radial], ...)
  • Chrome - 9.0
  • Safari 4.0 - 5.0
  • iOS Safari 4.0.4 - 5.0
  • 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+（2011年10月12日～）
  • Android 4.0+（搭載端末は2011年12月2日～）

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

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

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

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

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

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

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