ブラウザーが CSS3 トランジションをサポートしているかどうかに応じて、異なる JavaScript ファイルを提供したいと考えています。以下の私のコードよりも移行サポートを検出するためのより良い方法はありますか?
window.onload = function () {
var b = document.body.style;
if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
alert('supported');
} else {
alert('NOT supported')
}
}
また、Modernizrを含めるのはやり過ぎだと思います。以下の関数は、どの機能でも機能するはずです。
function detectCSSFeature(featurename){
var feature = false,
domPrefixes = 'Webkit Moz ms O'.split(' '),
elm = document.createElement('div'),
featurenameCapital = null;
featurename = featurename.toLowerCase();
if( elm.style[featurename] !== undefined ) { feature = true; }
if( feature === false ) {
featurenameCapital = featurename.charAt(0).toUpperCase() + featurename.substr(1);
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[domPrefixes[i] + featurenameCapital ] !== undefined ) {
feature = true;
break;
}
}
}
return feature;
}
var hasCssTransitionSupport = detectCSSFeature("transition");
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_supportに触発されました
Modernizr がこれを検出します。このリンクを使用 して、CSS3 2D および/または 3D トランジションのみを含むカスタム ダウンロード ビルドを作成します。
実行したら、タグ (CSS) でcsstransitionsクラスをテストするか、JavaScript でis かどうかをテストできます。htmlModernizr.csstransitionstrue
その他のドキュメント: http://modernizr.com/docs/#csstransitions
ここに別のテストコードがあります。やり過ぎかもしれませんが、この関数は CSS プロパティを DOM オブジェクトに設定し、そこから読み戻そうとします。
このコードを大量のエキゾチック ブラウザでテストしたことはありませんが、CSS プロパティの可用性をチェックするより安全です。ああ、はい、2D 変換サポートと 3D 変換サポートを区別できます! テストしたい CSS プロパティ値を渡すだけです。
このコードの利点は、サポートされているベンダー プレフィックス (存在する場合) を検出することです。可能な戻り値:
false、機能がサポートされていない場合、または
{
vendor: 'moz',
cssStyle: '-moz-transition',
jsStyle: 'MozTransition'
}
機能がサポートされている場合
/**
* Test for CSS3 feature support. Single-word properties only by now.
* This function is not generic, but it works well for transition and transform at least
*/
testCSSSupport: function (feature, cssTestValue/* optional for transition and transform */) {
var testDiv,
featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
vendors = ['', 'webkit', 'moz', 'ms', 'o'],
jsPrefixes = ['', 'Webkit', 'Moz', 'ms', 'O'],
defaultTestValues = {
transition: 'left 2s ease 1s',
transform: 'rotateX(-180deg) translateZ(.5em) scale(0.5)'
// This will test for 3D transform support
// Use other values if you need to test for 2D support only
},
testFunctions = {
transition: function (jsProperty, computed) {
return computed[jsProperty + 'Delay'] === '1s' && computed[jsProperty + 'Duration'] === '2s' && computed[jsProperty + 'Property'] === 'left';
},
transform: function (jsProperty, computed) {
return computed[jsProperty].substr(0, 9) === 'matrix3d(';
}
};
/* test given vendor prefix */
function isStyleSupported(feature, jsPrefixedProperty) {
if (jsPrefixedProperty in testDiv.style) {
var testVal = cssTestValue || defaultTestValues[feature],
testFn = testFunctions[feature];
if (!testVal) {
return false;
}
testDiv.style[jsPrefixedProperty] = testVal;
var computed = window.getComputedStyle(testDiv);
if (testFn) {
return testFn(jsPrefixedProperty, computed);
}
else {
return computed[jsPrefixedProperty] === testVal;
}
}
return false;
}
//Assume browser without getComputedStyle is either IE8 or something even more poor
if (!window.getComputedStyle) {
return false;
}
//Create a div for tests and remove it afterwards
if (!testDiv) {
testDiv = document.createElement('div');
document.body.appendChild(testDiv);
setTimeout(function () {
document.body.removeChild(testDiv);
testDiv = null;
}, 0);
}
var cssPrefixedProperty,
jsPrefixedProperty;
for (var i = 0; i < vendors.length; i++) {
if (i === 0) {
cssPrefixedProperty = feature; //todo: this code now works for single-word features only!
jsPrefixedProperty = feature; //therefore box-sizing -> boxSizing won't work here
}
else {
cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
jsPrefixedProperty = jsPrefixes[i] + featureCapital;
}
if (isStyleSupported(feature, jsPrefixedProperty)) {
return {
vendor: vendors[i],
cssStyle: cssPrefixedProperty,
jsStyle: jsPrefixedProperty
};
}
}
return false;
}
if (window.TransitionEvent){
}
Modernizr 3.0 (アルファ版) では、カスタム ビルドをローカルで生成できます。これにより、前述の「やり過ぎ」の懸念が解決される可能性があります-そもそもその懸念について完全には明確ではありませんが（ただし、サイズが大きいと想定しています）。新しい API は、ビルドに含めたいテストを含む json を渡すことができる 'build' メソッドを提供します。
私は gulp ファイルでこのようなものを使用していますが、gulp は必要ありません。単純なノード スクリプトで十分です。
gulp.task('js:modernizr', function() {
var modConfig = JSON.parse(fs.readFileSync('modernizr-config.json', {
encoding: 'utf8'
}));
modernizr.build(modConfig, function(res) {
fs.writeFileSync('modernizr.js', res);
return true;
});
});
「modernizr-config.json」ファイルの例は次のようになります。
{
"classPrefix": "",
"options": [
"addTest",
"atRule",
"domPrefixes",
"hasEvent",
"html5shiv",
"html5printshiv",
"load",
"mq",
"prefixed",
"prefixes",
"prefixedCSS",
"setClasses",
"testAllProps",
"testProp",
"testStyles"
],
"feature-detects": [
"css/transforms",
"css/transforms3d",
"css/transformstylepreserve3d",
"css/transitions",
"touchevents",
"workers/webworkers",
"history"
]
}
完全な構成ファイルは Modernizr パッケージに含まれています。
このアプローチでは、パッケージ インストーラーを介して適切に管理された Modernizr テスト スイートを利用し、必要に応じてテストを簡単に追加/削除できます。テストが少なくなり、ファイルが明らかに小さくなります。
「setClasses」オプションは、関連するテスト クラスを html に追加しますが、次のように 3.0 非同期イベントを利用することもできます。
Modernizr.on('csstransitions', function(bool) {
if (bool === true) // do transition stuffs
}