HTML/CSS

【-webkit-】←ベンダープレフィックスについての疑問を解決する

よく使うこのコード「-webkit-」「-moz-」

-webkit-transform:translateY(-50%) translateX(-50%);

-moz-transform:translateY(-50%) translateX(-50%);

 

これは何のためにつけるのか、理解して使ってますか?

 

ベンダープレフィックスと言うものですが、

簡単に言うと、「スマホ対応するのに必要なコード」と言う覚え方でした。

 

-webkit-をつけるものと付けないものがあるし、結局どれに付けたらいいのかわからん。

ということで、ベンダープレフィックスの意味と、必要になるプロパティについてまとめてみました。

 

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

CSSのプロパティの中には、ブラウザごとにベンダープレフィックスが必要なものがあります。

これを書くことで、古いブラウザにもCSSを対応させることができるということで、ブラウザごとでデザインが違ったり、デザインが崩れたりしてしまうことを防いでくれます。

 

対応させるブラウザによって、記述するコードも違います。

では、よく見かける「-webkit-」はどのブラウザでしょうか?

 

ベンダープレフィックスにも種類がある

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

-webkit-・・・Google ChromeやSafari、Microsoft Edge

-moz- ・・・Firefox

-ms- ・・・Internet Explorer

-o- ・・・Opera

ブラウザごとに記述するコードが違いますので、注意が必要です。

 

では、どのコードを記述すればいいか??

 

それは、以下のポイントで変わってきます。

  1. どのブラウザまで対応させるか
  2. 使用するプロパティ

①によって、プロパティの頭に記述するコードが違ってきます。

ChromeやSafariのシェアが多いので、「-webkit-」で統一するのもありなのかな??

これについては、もっと勉強していきます。

 

では、必要なプロパティをみていきましょう。

必要なプロパティ

opacityベンダープレフィックスは不要
background-sizeベンダープレフィックスは不要
box-sizingベンダープレフィックスは不要
box-shadowベンダープレフィックスは不要
text-shadowベンダープレフィックスは不要
border-radiusベンダープレフィックスは不要
border-image-webkit-」旧Androidブラウザ対応に必要
rgba()ベンダープレフィックスは不要
transition()ベンダープレフィックスは不要
calc()ベンダープレフィックスは不要
liner-gradient()-webkit-」旧Androidブラウザ対応に必要
radial-gradient()-webkit-」旧Androidブラウザ対応に必要
animation()-webkit-」Androidブラウザ・旧iOS Safari対応に必要
transform()-ms-」IE9対応に必要
-webkit-」Androidブラウザ・旧iOS Safari対応に必要
filter-webkit-」Androidブラウザ・旧iOS Safari対応に必要
CSS Flexible Box Layout Module-webkit-」Androidブラウザ・旧iOS Safari対応に必要
CSS Grid Layout-ms-」IE11・旧Edge対応に必要

CSSのベンダープレフィックスを再確認してみる

 

これを見ると、基本的にはwebkitでいいのかなーという印象です。「transform()」「CSSGrid」については、-ms-が必要という覚え方で問題なさそう。

 

gulpで自動付与可能

なんと、gulpを使うと自動的にベンダープレフィックスを付けてくれるみたいです。

 

gulpはまだインストールしていないので、今後実践してみたいと思います。