シンプルな解決策
Modernizr http://modernizr.com 使え。
JS ファイル増やさず自力で何とかしたい
Modernizr のソース読めばわかるんですが、適当な HTML 要素にトランジション系の CSS プロパティをセットしておいて、そのプロパティを JavaScript から参照し undefined でなければ対応しています、的なやり方で判定できます。
JavaScript をごりごり書くのもできますけど、こういうケースではだいたい jQuery が使われているはずですので jQuery で書きます。そのほうが楽だし。
たぶんこんな感じ。
.test-transition {
-webkit-transition: none 0;
-moz-transition: none 0;
-o-transition: none 0;
transition: none 0;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>トランジションに対応してるかな？</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="test-transition"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./test.js"></script>
</body>
!function(w,d) {
w.jQuery(d).ready(function($) {
// チェックする CSS プロパティ名の配列
// このうちひとつでも取得できれば対応とする
var transition_props = [
'transition',
'-webkit-transition',
'-moz-transition',
'-o-transition'
];
// テスト用の要素
var $target = $('.test-transition');
// トランジション対応の可否フラグ
var transision_enabled = false;
// ループ用
var i, len;
for (i = 0, len = transition_props.length; i < len; ++i) {
if ($target.css(transition_props[i])) {
// ここで指定の CSS プロパティ値が有効なら
// CSS 3 トランジション対応ブラウザ
transision_enabled = true;
break;
}
}
// jQuery 1.9 以降ならこうも書ける
var values = $target.css(transition_props);
for (i = 0, len = values.length; i < len; ++i) {
if (values[i]) {
transision_enabled = true;
break;
}
}
$target.text(transision_enabled ? 'トランジション対応してる！' : '対応してないし…。')
});
}(window,document);
ここでは CSS トランジション対応の判定だけしていますが、 box-sizing や opacity とかの CSS プロパティでも同じやり方でできるっぽいです。
HTML 要素は JavaScriptから動的に追加してもいいんですが、HTML ソースまで手を入れられるなら最初から HTML ソースに DIV タグとか置いといたほうが早いです。
汎用ライブラリ的なものを書く場合なら動的生成するしかないですが、JavaScript 中に HTML ソースが紛れてしまうのがネック。
JavaScript と CSS の両方がなんとかできるなら、
body {
-webkit-transition: none 0;
-moz-transition: none 0;
-o-transition: none 0;
transition: none 0;
}
としてしまって BODY 要素から調べるのもいいかもしれません。
もちろんこうすると BODY タグにトランジションを設定したい場合に困った事態になるおそれもあるので CSS の読み込み順に要注意といったところ。
調べたい内容が 1 - 2 件程度でその用途もしょぼい、というケースなら自力でやってしまうのもアリだと思いますが、おおむね Modernizr 使ったほうが手間かからずに JavaScript からも CSS からも判定できるし便利ですね。