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

本記事掲載の2011年当時は、まだCSS3のプロパティが草案状態のものが多く、ベンダープレフィックスが必要でしたが、2016年3月現在では、ほとんどのPCブラウザの最新バージョンで、ベンダープレフィックス無しでOKのプロパティが増えました(Border-radiusとかグラデーションとかね)
ですが、仕様が勧告されたばかりのプロパティだと、少し前のブラウザに対応させるために、ベンダープレフィックスが必要な場合もあるので要注意です。
また、Opera は途中でレンダリングエンジンが変わったため、バージョン15以降は「-webkit-」になりました。本文を追加修正しておきます。(2016年3月記)

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

CSS3のベンダープレフィックス(Vendor Prefix)とは、ブラウザが独自の拡張機能を実装、または草案段階の仕様を先行実装するときに「これは拡張機能だ」と明示する識別子のことです。
Prefix は「接頭辞」という意味で、プログラミング分野では「先頭につけて何らかの意味や機能などを付与する文字列」という意味です。Vendorはブラウザを作っている会社のことね。

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

-webkit- Chrome 
Safari(PC版、iOS版)
Android 
Opera(PC版 ver.15以降、Android版 ver.14以降)
-moz- Firefox
-ms- Internet Explorer
-o- Opera(ver.12以前)

どうして ベンダープレフィックスをつけるの?

CSSは、W3C(World Wide Web Consortium)での草案段階から、いずれ勧告候補とされてその後正式に勧告されます。
で、草案(ドラフトと言います)の段階では、各ブラウザは「先行実装」として実装しておいて、勧告になるまではベンダープレフィックスを付けた指定で反応するようにしておきます。
正式に勧告になったら、各ブラウザのメーカーは実装したバージョンを発表して、ベンダープレフィックス無しの標準の書き方で表示させるというわけです。

ですので勧告前のプロパティはベンダープレフィックス付きで指定するモノが多いんです。
で、仕様が勧告されたばかりの時期は、少し前のバージョンのブラウザをそのまま使っている人のためにベンダープレフィックスを残す必要もあります。

単なる装飾用で、そのCSSが効かなくても大して問題ない指定(ボックスの角丸とか)なら、ベンダープレフィックスを取っちゃってイイのですが、レイアウトに関わる大事な指定(効かなければページが読めないなど。フレキシブルボックスとか)なら、ベンダープレフィックスは当分残しておく必要がありますね。

指定の書き方ですが、ベンダープレフィックスがついた指定に加えて、必ず本来の標準の書き方を併記します。こうしておけば、仕様が勧告された後でもそのままエラー無く使えますから。
標準型を1番最後に書くのが一般的です。

これは Flexbox でのベンダープレフィックスの使用例です。(Flexboxに関しては後日詳細)

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

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

ブラウザのどのバージョンならベンダープレフィックスが必要か を調べられるサイトがあります。
「Can I use」というサイトで、メッチャ便利です。お世話になっています。

(この↑画像は、2016年3月のものです)

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 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 - - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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