CSSプロパティの中にはFireFoxやSafariなど、特定のブラウザで対応していないものがあります。その場合、CSSが適応されなかったプロパティを適応させるために「ベンダープレフィックス」を使用します。
この記事では、そんなクロスブラウザ対応ができるベンダープレフィックスについて解説します。
CSSのベンダープレフィックスとは
ベンダープレフィックスとはベンダー接頭辞のことで、試験的・非標準なCSSプロパティに対して付けられます。
それぞれのブラウザでCSSを正しく適用するためにベンダープレフィックスをつけます。
ベンダープレフィックスは以下のような種類があります。
ベンダープレフィックスの種類
- -webkit-：Chrome、Safari、ほぼ全てのiOSブラウザ
- -moz-：Firefox
- -o-：古いOpera
- -ms-：Internet Explorer、Microsoft Edge
ベンダープレフィックスの使用例
具体的にベンダープレフィックスを使用した場合の記述は以下になります。
<div>
<p>仮の文章が入ります。</p>
</div>p {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}-webkit-transformの-webkit-の部分が、Chrome、Safari、ほぼ全てのiOSブラウザ対応用に付けたものです。
-ms-部分がInternet Explorer、Microsoft Edge対応用ということになります。そしてベンダープレフィックスを付けない標準のプロパティも同時に併記します。
ベンダープレフィックスを付与する方法
ベンダープレフィックスを付与する方法はいくつかあります。
ベンダープレフィックス付与の方法
- 自ら記述する
- Autoprefixer（VSCode拡張機能）を利用する
- Live sass compilerを利用する
- Gulpを利用する
- オンラインツールを使う（例：Autoprefixer CSS online）
ベンダープレフィックスが必要なプロパティに対して一つ一つ記述するのは非常に効率が悪いです。
上記で示したようなツールを使えば、必要なプロパティに自動でベンダープレフィックスを付与することができるので活用してみてください！
まとめ
この記事では各ブラウザでCSSを適応させるベンダープレフィックスについて紹介しました。
ほとんどのプロパティはベンダープレフィックスをつけなくても、最新版のブラウザで対応されています。
しかし古いブラウザからアクセスするユーザーにも配慮をし、ベンダープレフィックスをつけられるようになりましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
