ほんっとにはじめての HTML5 と CSS3

今回は CSSのベンダープレフィックスについてメモっておきます。

また、主なブラウザベンダーは、ベンダープレフィックスではない他の方法に切り替えようとしているそうです。その件についてもメモっています。

1. CSS のベンダープレフィックスとは
2. ベンダープレフィックスの種類
3. ベンダープレフィックスの書き方
4. どのくらいの期間ベンダープレフィックスをつけるの？
5. ベンダープレフィックスが必要かを調べる「Can I use」
6. ベンダープレフィックスは いずれ無くなる方向へ
   1. ベンダープレフィックスに替わるかも な @supports
   2. @supports の使い方

CSS のベンダープレフィックスとは

W3Cが仕様を勧告する前に、草案（ドラフト）段階、勧告候補段階があります。
この勧告前の段階で、各ブラウザベンダーが先行実装する時、仕様が勧告時に「変更・削除・新規追加」される場合に備えて、今のところの独自の拡張機能として実装します。
（じゃないと正式勧告後、無効なものも含んだ 複数の書き方が混在してしまうから）
接頭辞（Prefix）をプロパティや値につけて、勧告後の正式仕様と区別しておくんです。
これが ベンダープレフィックス（Vendor Prefix）です。

Vendor（ベンダー）は「供給業者」。
Prefix（プレフィックス）は「接頭辞」。先頭につけて意味や機能などをプラスする文字列です。

ベンダープレフィックスの種類

ブラウザによって、ベンダープレフィックスが違います。

ベンダープレフィックスで 実際に使うのは「-webkit-」がいちばん多く、それ以外だと「-moz-」くらいです。

ベンダープレフィックス	対象ブラウザ
-webkit-	Google Chrome　 Safari（PC版、iOS版） Android　 Opera（PC版 ver.15以降、Android版 ver.14以降）
-moz-	Firefox
-ms-	Internet Explorer Microsoft Edge
-o-	Opera（ver.12以前）

●Opera のベンダープレフィックスは「-o-」でしたが、2013年に レンダリングエンジンが Blink に変更され、ver.15以降（Android版は Opera 14 for Android から）は -webkit- になりました。

● Microsoft のベンダープレフィックスは「-ms-」ですが、これはMS独自のもの（独自実装、試験段階のセレクタやプロパティ）に用いられ、W3Cの草案仕様に付けて使うことはあんまり無いそうです。

ベンダープレフィックスの書き方

ベンダープレフィックス付きの指定と一緒に、必ず標準の書き方を併記します。
こうしておけば、仕様が勧告された後でもそのまま使えますから。

ブラウザは、自分が理解できる指示で表示し、理解できない指示は無視してくれます。
また、複数理解できる場合は、最後の指示を採用します（それ以前の指示を上書きする）。
ですので標準の書き方は、一番最後に書くのが無難です。

下記は使用例です。

セレクタ {
  -webkit-box-pack: justify;　←古いAndroid（4.3）用
  -moz-box-pack: justify;　←古いFirefox（21）用
  -webkit-justify-content: space-between;　←古いPC-Safari と iOS8.4 Safari用
  justify-content: space-between　←標準型（各ブラウザの最新バージョン用）
  }

Flexboxについては【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）をご覧ください。

どのくらいの期間ベンダープレフィックスをつけるの？

仕様が正式に勧告されると、各ブラウザは正式仕様を実装したバージョンを出します。

仕様が勧告された直後では、前のバージョンを使っている人がまだ多いので、ベンダープレフィックスをしばらく残す必要があります。

その後、何度かバージョンアップして、古いバージョンのシェアが減った頃、ベンダープレフィックス付きの書き方を削除します。
問題は「その時期」を、どう知るか？ですよね。

簡単に調べられるサイトがあります。↓

ベンダープレフィックスが必要かを調べる「Can I use」

Can I use は、HTML の要素や CSS のプロパティなどに対して、各ブラウザバージョンの対応状況を教えてくれます。

ブラウザのどのバージョンが正式仕様を実装しているか、未実装なら どのベンダープレフィックスを付ければいいか、などを簡単に調べられます。

例えば、CSS の グラデーション を調べると、よほど古いブラウザが対象じゃない限り、もうベンダープレフィックスは不要なのがわかります。

しかし、clip-pathプロパティ（現時点（2017年10月）では勧告前）を調べると、ベンダープレフィックス付きのほうが多いことがわかります。

勧告前 または勧告直後の仕様は、 Can I use で調べてから使うのが無難です。
シェアが少なすぎる場合は、最初から使わないほうが無難です。

ベンダープレフィックスは いずれ無くなる方向へ

主なブラウザベンダーは、ベンダープレフィックスをやめようとしているんだそうです。

ベンダープレフィックス付きの仕様を出すと、ウェブサイト制作者は、まだ実験的な仕様なのに本番サイトで使っちゃうので、ブラウザベンダーが、互換性を確保したり新しい機能を開発するのを困難にしてるんだって。

また、ベンダープレフィックス付きの指定をいっぱい書くことで、ブラウザは、他のブラウザのプレフィックスまで読まなきゃならなくて、とても有害なんだそうです。

参考：
●Vendor Prefix - Glossary | MDN
●CSS hack - Wikipedia | 3.1 Browser prefixes | Limitations

ベンダープレフィックスに替わるかも な @supports

で、ベンダープレフィックスではない他の方法の候補の１つが @supports だそうです。
話のついでに、@supports についてもメモっておきます。

CSSの「@-規則」と言うものがあるんですが、その中には、
そのまま宣言する形で使う
@charset（CSSで使う文字エンコードを定義）
@import （外部のスタイルシートを取り込む）
などや、
内容を { } に入れて使う
@media （メディアクエリで条件分岐に使う）
@font-face （外部フォントをダウンロード）
などがあります。

@supports （サポート状態での条件分岐）は、内容を { } に入れる形で使います。

@supports は 今のところ勧告候補ですが、ほとんどのブラウザがサポートしています。IE11 だけは未実装（2017年10月記）。

なので、IE11 用に CSSを書いて、その他のブラウザ用に @supports で分岐させて新しいプロパティを使うといい感じですね。

@supports の使い方

@supports は、メディアクエリの @media と同じように、@supports ( ) { } として、( ) の中に条件を、{ } の中に CSSの指定を書きます。

下記は、display: flex が使える場合の指定。

@supports (display: flex) {
   header ul {
     display: flex;
   }
}

使えない場合を条件にするなら、not を条件の（）の前に付けます。

@supports not (display: flex) {
   header ul li {
     display: inline-block;
     margin-right: .5em;
   }
}

and や or も使えます。

@supports (display: flex) and (justify-content: space-between) {
   header ul {
     display: flex;
     justify-content: space-between;
   }
}

また、条件にベンダープレフィックス付きの指定を入れることもできます。

@supports (display: flex) or (display: -webkit-flex) {
   header ul {
     display: -webkit-flex
     display: flex;
   }
}

not や or や and が複数ある場合は、（）にネストして範囲を明示します。

例えば、下記の書き方は範囲がはっきりしない=意味不明なので無効です。

/*これはNGな例です*/
@supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {
  /*...ここにCSS指定...*/
}

下記のように（）で囲んで、or や and の範囲を明示すればOK。

/*これはOKな例*/
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
  /*...ここにCSS指定...*/
}

/*これもOKな例*/
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
  /*...ここにCSS指定...*/
}

参考：
●CSS Conditional Rules Module Level 3 - W3C Candidate Recommendation 4 April 2013 - 6. Feature queries: the '@supports' rule（勧告候補）
●CSS Conditional Rules Module Level 3 - Editor’s Draft, 11 October 2017 - 6. Feature queries: the '@supports' rule（ドラフト）

次回予告

いかがでしたか。
勧告前のベンダープレフィックス付きの仕様は、使わないのがいちばん良いんですよね。でも、つい使いたくなっちゃうww

さて次回からはHTML要素に戻って「テキストのための要素」を見ていきましょう。

次回はまず「ルビ」を表す <ruby>要素を使ってみよう。
読めない漢字に小さく仮名をふる、あのルビです。

関連記事

• [24] 追加を示す ins要素と 削除を示す del要素を使おう
• （ちょっとメモ）HTML5で廃止される要素一覧
• [23] b要素、i要素、small要素も まだ使えます
• [22] HTML5の新要素 mark を使ってみよう
• [21] 重要性を示す strong要素 と強調を示す em要素を使い分けよう
• [20] 上付き文字と下付き文字を使おう（sup, sub）
• [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
• （ちょっとメモ）CSS の ベンダープレフィックス について
• [18-5] 水玉、ボーダー、チェック柄を作ろう（background-size）
• [18-4] 円形（放射）グラデーションを作ろう (radial-gradient)
• [18-3] テキストにシャドウをつけよう（text-shadow）
• [18-2] 要素にシャドウをつけよう（box-shadow）
• [18-1] 要素を角丸にしよう（border-radius）
• [17-6] メインコンテンツを表す main要素
• [17-5] ヘッダーの header、フッターの footer、連絡先の address要素