CSS

CSS|ベンダープレフィックス(接頭辞)はどこまで必要?

ベンダープレフィックスというのは、各ブラウザがまだ正式に対応していないプロパティ、つまりデザインを反映させたいときにプロパティの値の前に付ける「接頭辞」のことです。プロパティに普通に値を指定するのと一緒にベンダープレフィックス付きの値も入れることで各ブラウザに対応させることができます。

ところで、ベンダープレフィックスはひとつではありません。説明すると長くなってしまうので省きますがブラウザによって異なります。下記の表をご覧ください。

ベンダープレフィックス ブラウザ
-ms-
IE
IE
Edge
Edge
-moz-
Firefox
Firefox
-webkit-
Chrome
Chrome
Safari
Safari
Edge
Edge
Opera
Opera

例えば、一昔前までは角丸を表現するborder-radiusはこんな感じで書いていました。

CSS

.example{
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
}

現在は、こんなにやらなくてもちゃんと反映してくれます。

さて、ブラウザとそれに対応したベンダープレフィックスが分かったところで、どうやってそれが必要かを判断したら良いのか疑問に思いませんか?それを確認するのがcaniuseというサイトです。

試しに、border-radiusのリアルタイムな対応状況をキャプチャしてみましょう。
※これは今現在のキャプチャです。

https://caniuse.com/#search=border-radius

対応
一部対応
未対応

このようにそれぞれのブラウザの状況が一覧で簡単に分かるようになっています。「caniuse」の詳しい使い方については、下記の記事にも載っていますので、良かったら参考にしてください。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP