JSでCSS3のプロパティがブラウザに対応しているかどうか調べる

みなさんはCSS3を使っているでしょうか。使っているなら絶対にやらなくてはいけないことがあります。それは、非対応ブラウザへの対応です。そのためにはまず、使っているブラウザがCSS3のプロパティに対応しているかどうかチェックする必要があります。その方法を紹介します。

仕組みは簡単

// 要素を生成
var div = document.createElement('div');

// 調べたいCSSプロパティをセット
div.style.cssText = 'width: calc(5px)';

// 対応している
if (div.style.length)
{
  console.log('support!');
}
// 対応していない
else
{
  console.log('not support!');
}

とても簡単にチェックできます。調べてみるとネット上ではこれだという情報はなく、自分でライブラリを使わずになんとかしたい場合という方法が紹介されていませんでした。

試しに calc() 関数が使えるかどうかを検証してみましたがIE8以下ではnot support!となりました。また、Android Browserも4.3以下ではnot support!となったので確実に対応しているかどうかチェックできているようです。