(ちょっとメモ)CSS の ベンダープレフィックス について

最終更新日:2017年10月18日  (初回投稿日:2011年08月18日)

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

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

本日のINDEX
  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

で、ベンダープレフィックスではない他の方法の候補の1つが @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;
   }
}

orand も使えます。

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

notorand複数ある場合は、()にネストして範囲を明示します。

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

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

下記のように()で囲んでorand の範囲を明示すればOK。

@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
  /*...ここにCSS指定...*/
}
@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>要素を使ってみよう。
読めない漢字に小さく仮名をふる、あのルビです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.