【CSS】2020年版ベンダープレフィックスの必要・不要&自動付与の方法
2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。
ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。
- 「vendor」ベンダー…各ブラウザの提供者のこと。
- 「prefix」プレフィックス…頭につける定型文のようなもので「接頭辞」などと訳されます。
個人的にはほぼBootstrapを利用するのでベンダープレフィックスについてあまり気にせずコーディングして、最終段階でクロスブラウザチェックの際におかしい部分があれば対応するという流れにしていて、特に近年問題はありませんでした。
多くの問題はIE10以前に抱えていたものがほとんどなので、流石にその辺りは切り捨ててよい時代になったということでしょう。
色々と調べてみると現在のブラウザのCSS3対応状況で、今後ベンダープレフィックスをどう記述するべきかわかってきたので、今回簡単に述べたいと思います。
近年よく使われているブラウザではほとんどのCSSプロパティが対応済
主に角丸のborder-radiusや、レイアウト系のFlexやGrid、シャドウ系やグラデーション系などの新しめのプロパティにブラウザが正式対応していない場合に主にベンダープレフィックスを使用し、テスト段階での機能を使って対応させていました。
主なベンダープレフィックスは以下の通り。
主要ブラウザのベンダープレフィックス
- -moz- …… Firefox
- -webkit- …… Google Chrome、Safari
- -o- …… Opera
- -ms- …… Internet Explorer
上記ブラウザでほぼ現状対応済み。
先に述べた角丸、FlexやGridなどは既に各ブラウザが正式対応済なので、ベンダープレフィックスをつける必要がなくなっています。
ちなみに対応状況については以下のサイトで確認可能です。
「Can I use...」何が使えるか？という通り、上記サイトの検索窓に使えるか調べたいCSSのプロパティを入力すると、下に各ブラウザの対応状況が出てきます。
バージョンによっての対応状況はまちまちなので、よく使われているバージョンなども合わせて調べるとよいと思います。
以下Google検索結果↓
「よく使われるブラウザ」とちょっと馬鹿っぽく検索してますが、「ブラウザシェア 日本」等と検索すると詳細なデータが出てくるサイト等見つかるかと思います。
まだブラウザが対応していないプロパティは少数
以下のプロパティは-webkit-などを頭につけて使用するとよさそうです。
- appearance
- overflow-scrolling
- tap-highlight-color
- text-size-adjust
- writing-mode
自動でベンダープレフィックスをつける方法もあり
Autoprefixerという自動でベンダープレフィックスをつけてくれる機能があります。
これはwebpackやgulpといったビルドツールが必要なのですが、もっとお手軽簡単に出来る方法もあります。
その方法とは、以下のサイト。
こちらのサイトへCSSを貼り付けて変換すると、必要なプロパティには自動でベンダープレフィックスを付与してくれるようです。便利ですね！
2020年現在、ほぼベンダープレフィックス不要そう
先述した未対応な主なプロパティは、個人的にはほとんど使うことがないようなプロパティなので、2020年現在はほぼベンダープレフィックス無しでもよい状況だと思います。
ただしまだまだIEに対応してくれというような要望のクライアントもいるとは思いますので、状況に応じて対応していきましょう。
最後までお読みいただいてありがとうございました！
リンク
今すぐ使えるCSSレシピブック
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
