CSSプロパティはブラウザの進化とともに常に増え続けています。昔は暗記できるほどのCSSプロパティしかありませんでしたが、今は少し厳しい量になっています。CSSプロパティの値の書き方も複雑になってきたので何も見ないで書くのは相当の修練が必要です。特にアニメーション関係はマニュアルを見ないと困難です。

そんなCSSプロパティですがブラウザによって使えないものもあります。CSSプロパティに限らずHTMLタグなど様々な要素がブラウザによって使えないものがあります。

基本的に最新ブラウザはメジャーなCSSプロパティを使える

ブラウザのアップデートとCSSプロパティの追加は連動しているため、ブラウザがアップデートされればCSSプロパティが使えるようになります。そのため、すでにアップデートがされないIEは使えないCSSプロパティが多くなっています。対応させるjQueryなどを利用すれば無理やり使うことが可能な場合がありますが非現実的です。

特定ブラウザだけが試験的に利用できるCSSプロパティがある

ごく一部ですが特定のブラウザだけが使えるCSSプロパティが存在します。また、現在は使えるけどいずれ使えなくなる可能性があるCSSプロパティもあります。基本的に便利でみんなが使うようなCSSプロパティは残りますが試験的なものは実際に使えなくなっているものがあります。

例えば「scroll-snap-stop」というCSSプロパティがあります。これはスクロール系のCSSプロパティのひとつですがスクロール中に特定の位置からスクロールを許可するかというプロパティです。これは削除される可能性が高いとされているCSSプロパティになります。

ベンダープレフィックス

試験的なCSSプロパティはベンダープレフィックスというものを付けなければ機能しない場合があります。正式に採用されているCSSプロパティであればそのまま利用できるのですが登場したばかりだとベンダープレフィックスが必要な場合が多いです。

このベンダープレフィックスというのは 「セレクタ名 { -○○○-CSSプロパティ:値 }」 のように記述します。これは各ブラウザで-○○○-の部分が違ってきます。ブラウザで記述が違うのは使っているブラウザのレンダリングエンジンが違うからです。

CSSの記述例を紹介。

p{
    transform:scaleX(2);
    -webkit-transform:scaleX(2);
    -moz-transform:scaleX(2);
    -o-transform:scaleX(2);
    -ms-transform:scaleX(2);
}

transformプロパティ自体はすでにベンダープレフィックスが必要ではありませんが例として付けています。試験段階の新しいCSSプロパティは上記のように各ブラウザ毎にベンダープレフィックス付きの記述が必要になります。

非常に長いですが、昨今はIE需要が無くなりOperaがChromeと同じエンジンを使うようになったので実際には-o-と-ms-はいりません。今は-webkit-と-moz-だけを意識していれば大丈夫です。

iOSとAndroidの場合は-webkit-をつけていればどちらも機能します。

基本的にみんなが使っている便利なCSSプロパティは大丈夫

ググって利用例が出てくる情報が多いCSSプロパティはその後も利用できる可能性が高いです。そもそも日本で皆が使い始めている場合はすでに世界でメジャーなCSSプロパティになっている場合があります。

ベンダープレフィックスが必要なことがありますが、中には付けなくても動くものも多いので、まずは付けずに検証してみると良いかもしれません。ベンダープレフィックス自体は残ってても問題はないので安心して記述して大丈夫です。