CSSを複数のブラウザに対応させる

CSSにはバージョンがあります。CSSの仕様を決めているW3Cはバージョンをレベルと表現しています。
CSS3はCSSのレベル3というイメージです。

CSSのレベルが新しくなっても、すべてのブラウザがすぐに対応できるわけではありません。ブラウザのバージョンが上がっていても、ブラウザを更新しないユーザーも存在します。

CSSのレベル以外にも、ブラウザごとに誤差が出る場合もありますので、普段使っていないブラウザで見てみるのもいいと思います。

対応状況を確認する

CSSのレベルで現在一番新しいものがCSS3です。CSS3から追加された機能を使うときは一度、ブラウザの対応状況を確認したほうがいいかもしれません。

※最近のブラウザではほとんどの機能に対応しています。

今回はその一つの方法として「Can I use」という海外のサイトをご紹介します。

Can I use

中央のCan I useと書かれた後のスペースに確認したい機能を入力すると検索できます。入力しても検索されない場合は、ページを更新するとうまくいく場合があります。

この表に各ブラウザの対応状況が示されています。

IEのバージョン6～7とFirefoxのバージョン2の背景が黄色で、それ以外のブラウザでは緑色になっているのがわかるかと思います。

・緑色　対応している
・黄色　対応している部分がある
・赤色　対応していない
・灰色　対応しているか不明

IEの10以前とFirefoxの2に関しては現在サポートが終了しているため、inline-blockは安心して使えそうです。

この表では各ブラウザの使用率も同時に確認できます。最初にアクセスした状態では世界の使用率が分かるようになっているのですが、設定を変えると日本での使用率も見ることができます。

まず検索欄の右側にあるSettingsを押して、Importと書いてあるボタンの左側の入力欄に「Japan」と入力します。その後、Importを押すと設定は完了です。

先ほどの表上部にある「Usage relative」を押すと表示が切り替わり視覚的にわかりやすく使用率を表示してくれます。

ブラウザごとの機能を使う

ブラウザにはCSSで採用される予定のスタイルを先に実装したり、ブラウザごとに独自のスタイルを実装することがあります。

これらを使うには、ブラウザごとに決められた文字列をスタイルの先頭に書かなければなりません。

/* -webkit- をつける */
.border-image {
  border-image: url("border_image.png") 20;
  -webkit-border-image: url("border_image.png") 20;
}

先頭に書く文字列をベンダープレフィックスと呼びます。主要なブラウザのベンダープレフィックスは以下の通りです。

・-ms-　( Internet Explorer )
・-webkit-　( Chrome、Edge、Safari )
・-moz-　( Firefox、Mozilla )

ベンダープレフィックスが必要かどうかも Can I use で確認できます。

また、ベンダープレフィックスを書く際は、今後の更新に備えてベンダープレフィックスがついていないスタイルも併せて書くといいと思います。

まとめ

テキストエディタやその他ツールによってベンダープレフィックスを自動で書くこともできますので、気になる方は調べてみてくださいね。

・ブラウザごとの対応状況を確かめる
・ベンダープレフィックスを書くと対応できる場合もある