• WEB

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

  • フモ
    フモ デザインちーむ
  • このエントリーをはてなブックマークに追加

こんにちは、デザインちーむのフモです。

CSSでスタイリングするときに「-webkit」とか「-moz」って頭につけるときがありますよね。

あれって一体どういう意味をもっているんでしょうか?

今回は

  • 「-webkit」や「-moz」の正体を知りたい方
  • 「 ベンダープレフィックス 」の基本の使い方を知りたい方

上記のような人向けに、これさえ押さえておけば大丈夫!なポイントを説明していきます。

基本知識

「-webkit-」や「-moz-」など、CSSプロパティの接頭につけるものを「 ベンダープレフィックス 」といいます。

ベンダープレフィックス -vendor prefix
CSSで各WEBブラウザメーカーが独自に実装した、まだ標準化されていない仕様(拡張機能)を記述するための識別子。
主にCSS3の動作・装飾を使いたいときに必要となる。
通常のCSSプロパティの接頭(プレフィックス)に各WEBブラウザメーカーを表す文字列を追記する。

ベンダープレフィックス

ブラウザごとの ベンダープレフィックス

ベンダープレフィックス は各WEBブラウザメーカーごとに違います。

InternetExplor -ms-
Chrome iso -webkit-
Mozilla -moz-
Opera -o-

IEはマイクロソフトの「ms」をとっていますし、Mozillaは頭の「moz」をとっていますね。
各ブラウザ毎に分かりやすいネーミングになっています。

使い方

簡単なルール

  • サポートされているCSSプロパティも記述する
  • 記述する順序
  • 必要なものだけ使う

サポートされているCSSプロパティも記述する

というのはつまりこういうことです。

サポートされている= ベンダープレフィックス をつけない

div {
    /* ベンダープレフィックス あり */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radrius:10px;
    -ms-border-radius:10px;

    /* ベンダープレフィックス なし */
    border-radius:10px;
}

このとき、ベンダープレフィックス なしのCSSプロパティは最後に記述しましょう。
CSSは上から下へ順番に読まれますので、最終的には下に書いてあるものが作動します。

ベンダープレフィックス は標準化された正式なCSSプロパティではないため、本来なら最後に記述されている ベンダープレフィックス なしのCSSプロパティが読まれたほうがよいのです。

記述する順序

これは先ほども書いた通り、 ベンダープレフィックス なしのCSSプロパティは最後がいいでしょう。

その他の、 ベンダープレフィックス については特に決まりはないようです。
お好きな順番で問題ないでしょう。

必要なものだけ使う

ベンダープレフィックス は、CSSプロパティによって必要なブラウザが違います。

ブラウザによってはすでにサポートされているプロパティもあるので、常に全部の ベンダープレフィックス を記述する必要はありません。

使いたいCSSプロパティがどのブラウザでサポートされているか、どの ベンダープレフィックス をつければいいのかを知るにはこのサイトが役立ちます。

http://caniuse.com/

たとえば「box-shadow」の場合
CSS ベンダープレフィックス とは?

以前はbox-shadowの記述には必ず ベンダープレフィックス を付けていました。

しかし、上述のサイトで確認するともうその必要はないみたいです。
IE8とOperaMiniではサポートされていないようですが、この2つは ベンダープレフィックス がないので対応させる場合はCSShackなど別の方法をとることになります。

box-shadowに ベンダープレフィックス が必要なくなっただけでも、だいぶコードがすっきりしますね!

さらに楽に、さらにコードをきれいにするには

ベンダープレフィックスについては分かったけど、いちいち必要かどうかを検証するのは面倒・・

ですね!

Sass・Compassを使ったCSSを書くためのツールなどを使えば、自動で必要なベンダープレフィックスをつけてくれます。

↓こちらの記事で楽にCSSを書く方法を紹介しています。
CSS拡張メタ言語「Compass」をすぐに使える便利アプリ
Sassの入門編!初心者でも簡単にできる環境整備のやり方。

まとめ

  • 「-webkit-」や「-moz-」は、 ベンダープレフィックス と呼びます。
  • ベンダープレフィックス は、どのブラウザでも同じ挙動・見た目にするために必要となります。
  • 主にCSS3の仕様や、各ブラウザが独自に実装した仕様を使うときにも必要となります。
  • ベンダープレフィックス を使うときには、どのブラウザ用のものを記述すればいいのかきちんと確認しましょう。

以上、おつきあいありがとうございましたm(_ _)m

CSSについてこちらの記事もおすすめです。
このエントリーをはてなブックマークに追加

フモが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ