ベンダー接頭辞は使ってもよいか
ベンダー接頭辞つきのプロパティについて、質問をいただきました。
最近ではCSS3を使用したデザインパターンが数多く紹介されています。ボタン要素など簡単なものであれば、画像を用意する事なく表現が出来ると思います。
しかしソースレベルでは(-webkit-)(-moz-)などの接頭辞をつけないとブラウザがうまく処理を行えない現状としては、接頭辞がついたものを業務レベルで実装するべきではないのでしょうか？
※一般的に接頭辞を使用している要素などは納品データ内にあるべきでないのでしょうか？
使うべきでない、あるべきでないとは思いませんが、利用には細心の注意をはらう必要があるでしょう。
使える？避けるべき？
まず、CSS仕様には、ベンダー接頭辞の利用は避けるべき（Authors should avoid vendor-specific extensions
）と書かれています。仕様が安定して接頭辞を外す段階になったら、使い始めることができるという認識です。
しかし、仕様が安定してから実装に反映されるまで、さらに製品としてリリースされるまでには時間がかかります。たとえば、WebKitは接頭辞なしのborder-radiusを昨年7月に実装しましたが、そのコードが製品に反映されたのは今年1月のChrome 4が最初で、Safariにおいては6月のSafari 5までかかってしまいました。
とはいえ、border-radiusは昨年夏の段階で仕様も安定していました。接頭辞つきで実装されているものの安定しているプロパティもありますから、接頭辞つきプロパティを一概に「避けるべき」というのは実利的には思えません。
その機能が安定していると判断できれば、ベンダー接頭辞つきのプロパティを書くことに大きな問題はないと思っています。
接頭辞なしのプロパティを忘れないこと
ただし、この時大事なのが、接頭辞のない正式なプロパティも含めることです。「いまは機能しないから」と言った理由からか、接頭辞なしのプロパティを省いたWebページやサンプルに出くわすことがありますが、これにはいくつか問題があります。
まず、特定のエンジンでしか機能しないという問題があります。先日リリースされたOpera 10.60やIE9 Platform PreviewはCSS3 Backgrounds & Bordersの多くのプロパティに対応していますが、それらは接頭辞のない正式なプロパティとして実装されています。
ところが、ページのソースコードに-webkit-border-radiusや-moz-border-radiusだけしか書かれていないサンプルが意外に多いのです。これでは同等の機能を備えているにも関わらず、OperaとIE9ではその恩恵にあずかれません。
もうひとつの問題は、正式なプロパティを実装したあと、接頭辞つきプロパティのサポートが行われなくなることです。
プロパティが標準化されていれば、将来的に接頭辞は省かれた状態で実装されます。このとき、ベンダーによっては接頭辞付きのプロパティを引き続きサポートするか、それとも打ち切るかという選択ができます。
たとえば、WebKitは先程のborder-radiusをはじめ、多くのプロパティで -webkit-のつくプロパティも引き続きサポートしています。Microsoftも後方互換を非常に重視していますから、-ms-のついたプロパティを今後もサポートする可能性は非常に高いと思われます。
いっぽう、Mozillaは接頭辞つきのプロパティについて、早くからサポートを打ち切ることを考えているようです。background-originの接頭辞を外すバグの中で、開発者のDavid Baronが「製作者が接頭辞つきのプロパティを利用するのであれば、次のように接頭辞なしのプロパティも書いているはずだという立場をとっている。Web上にあるGecko固有の内容は最小化したい。」と語っています。
すべての接頭辞つきプロパティに対し同様の対応を行えるかは難しいところでしょう。たとえば、border-radiusのサブプロパティに、ひとつの角を丸めるプロパティ (-moz-border-top-right-radius など) がありますが、標準化の過程でプロパティ名や構文が変更されてしまいました。Geckoは古い構文のプロパティ (-moz-border-radius-topright) のみを以前から実装しているので、接頭辞を外すにせよ -moz-opacity のようにある程度の期間を設けてる対応を行うかもしれません。
接頭辞つきプロパティがサポートされ続けたとしても、接頭辞への依存は避けるべきです。接頭辞つきのプロパティを利用するのであれば、対応する正式なプロパティもあわせて記述すべきというのが基本的な見解です。
安定度合いを知るには
では、プロパティの安定度合いははどうやって判断すればよいのでしょうか。
ひとつ参考になるのが、仕様書のステータスです。接頭辞は仕様が勧告候補（仕様が固まり、実装を呼びかける段階）になった際に省くとされていますから、近々で勧告候補になっている仕様であれば、機能が安定しているとおおむね考えてよいでしょう。
また、CSS WGでもベンダー接頭辞を省くタイミングについてベンダーと連携し、プロパティごとの安定度を仕様書に盛り込むことなどを検討しているようです。そうなると、安定度合いを知るとても良いソースになります。
使うことを考えるには、仕様だけでなく実装状況についても知る必要があります。以下は各ベンダーの出している情報になります。
- Safari CSS Reference
- SafariのCSSリファレンスになります。プロパティには「Support Level」という項目があり、CSS3絡みでは「Stable CSS 3」「Experimental CSS 3」という段階があります。Stableはすでに接頭辞なしで実装されているものですので、接頭辞を書く必要はありません。Experimentalは接頭辞がついているもので、利用するのであれば正式なプロパティも併記すべきでしょう。
- Mozilla CSS support chart
- FirefoxでサポートされるCSSの機能になります。一番右の列に「-moz-」という文字があれば、基本的に接頭辞付きで実装されているものになります。
- Web specifications support in Opera
- OperaのWeb標準サポート状況に関するページです。英語サイトでは最新版の10.60に相当するPresto 2.6でのサポート状況が公開されています。CSS3についてはモジュールごとにページが用意されているなどかなり細かく、また接頭辞に関するページも用意され、そこでは接頭辞なしのプロパティを併記するようにとも書かれています。
- CSS Compatibility and Internet Explorer
- IEに関するドキュメンテーションです。IE9への言及はまだありませんが、IE8の際はベータ版が公開されたときにこの表がアップデートされていましたから、ベータ版を待ちましょう。
すこし厄介なのが、仕様が初期の段階で安定していないにもかかわらず、試験実装のあるプロパティです。ベンダー固有の拡張を標準化する際に良く起こりますが、CSS Image Valuesで定義される予定の画像グラデーションやCSS Animationsなどが当てはまるでしょうか。
このような仕様については、値だけでなくプロパティ名に変更が起こる可能性があります。ですから、接頭辞なしのプロパティを書くかどうかは難しいところです。しかし、実装も多くありませんから、接頭辞なしがどうこうというよりは、その機能に依存しないコンテンツ作りを心がることをまず考えましょう。
まとめ
長くなりましたが、まとめると
- 接頭辞つきプロパティは使っていけないものとは言えない
- 接頭辞つきプロパティを書くのであれば、正式なプロパティも含める
- 仕様の安定度や実装状況をみて、新しい機能に大きく依存しないように使う
3番目については、情報を集めるのがまだまだ難しいというのが現状だと思います。これについては、情報をまとめる場所が必要だと考えています。