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日間無料で、正しくWebサイトを作る力が身につく実践型の学習環境を提供しています。
- メンターとあなただけの学習ロードマップを作れる
- 現場経験豊富なプロへ回数無制限で質問ができる
- 元ランサーズの技術責任者監修のカリキュラム
このレベルの環境を、入会金も月謝も一切なしで提供しているのはZeroPlus Gateだけです。ただし、参加者の数には制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
登録は30秒、今すぐ次の一歩へ
