CSS

【CSS基礎】ベンダープレフィックスの役割とその書き方とは？

  /
CSS

 

今回はCSSでよく使われるベンダープレフィックスについて解説したいと思います。

よし
よし
ベンダープレフィックスを必要とするプロパティは少なくなってきてるけど、必要なものもまだあるよ！
この記事の内容
  1. ベンダープレフィックスとは
  2. ベンダープレフィックスの種類
  3. ベンダープレフィックスの書き方

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

CSSのプロパティには、ブラウザによって表示が異なるものがあります。

その差異を無くしてどのブラウザでも正しく表示させてくれるものが、ベンダープレフィックスです。

ブラウザには以下のような種類があります。

  • Google Chrome（グーグルクローム）
  • Firefox（ファイヤーフォックス）
  • Microsoft Edge（マイクロソフト エッジ）
  • Internet Explorer（インターネットエクスプローラー）
  • Safari（サファリ)

などなど、、、

 

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

ベンダープレフィックスは以下の４つが存在しています。

  • -webkit-
  • -moz-
  • -ms-
  • -o-

 

それぞれの対応ブラウザを見ていきましょう。

-webkit-

Google ChromeやSafari、Microsoft Edgeのブラウザ用ベンダープレフィックスです。

-moz-

Firefoxのブラウザ用ベンダープレフィックスです。

-ms

Internet Explorerのブラウザ用ベンダープレフィックスです。

-o-

Operaのブラウザ用ベンダープレフィックスです。

 

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

最後にベンダープレフィックスの書き方を見ていきましょう。

今回は例として、「border-radius」というプロパティを使って書いていきます。

ベンダープレフィックスを使うと以下のようになります。

.left-side-box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

 

よし
よし
CSSのプロパティ名の前にプレフィックスをつけるだね！

 

もしくは、ベンダープレフィックスを変数で定義しても使うことができます。

$prefixes: -webkit-, -moz-, -ms-, -o-, '';

@mixin borderadius {
  @each $prefix in $prefixes {
    #{$prefix}border-radius: 10px;
  }
}

 

 

今回はCSSでよく使われるベンダープレフィックスの役割と書き方について紹介しました。

使う頻度は減ってきてはいますが大事な機能なので、ぜひこの機会に覚えてしまいましょう。

CSS
こんな記事もおすすめ