blocks|key|554251|text|现代将会为你检测到这一点。使用this+link创建仅包含CSS3+2D和/或3D过渡的自定义下载版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|554252|运行后，您可以在html标记(CSS)上测试csstransitions类，或者在JavaScript中测试Modernizr.csstransitions是否为true。|style|CODE|554253|更多文档：http://modernizr.com/docs/#csstransitions|554254|entityMap|0|LINK|mutability|MUTABLE|url|http://modernizr.com/download/|1|http://modernizr.com/docs/#csstransitions^0|F|9|0|0|8|4|M|E|1I|O|29|4|0|5|15|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@$A|Y|B|Z|F|G]|$A|10|B|11|F|G]|$A|12|B|13|F|G]|$A|14|B|15|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|J|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

Modernizr will detect this for you. Use <a href="http://modernizr.com/download/" rel="nofollow">this link</a> to create a custom download build that only contains CSS3 2D and/or 3D transitions.

Once it's run, you can either test for the <code>csstransitions</code> class on the <code>html</code> tag (CSS), or in JavaScript, test if <code>Modernizr.csstransitions</code> is <code>true</code>.

More docs: <a href="http://modernizr.com/docs/#csstransitions" rel="nofollow">http://modernizr.com/docs/#csstransitions</a>

blocks|key|554278|text|我也认为包括现代是一种过度的杀伤力。下面的函数应该适用于任何功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|554279|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()+%2B+featurename.substr(1);
++++++++for(+var+i+=+0;+i+<+domPrefixes.length;+i%2B%2B+)+{
++++++++++++if(+elm.style[domPrefixes[i]+%2B+featurenameCapital+]+!==+undefined+)+{
++++++++++++++feature+=+true;
++++++++++++++break;
++++++++++++}
++++++++}
++++}
++++return+feature;+
}

var+hasCssTransitionSupport+=+detectCSSFeature("transition");|code-block|syntax|javascript|554280|灵感来自https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support|offset|length|554281|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support^0|0|0|4|2Z|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I also think including Modernizr is an overkill. The function below should work for any feature. 

<pre><code>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 &lt; domPrefixes.length; i++ ) {
 if( elm.style[domPrefixes[i] + featurenameCapital ] !== undefined ) {
 feature = true;
 break;
 }
 }
 }
 return feature; 
}

var hasCssTransitionSupport = detectCSSFeature("transition");
</code></pre>

Inspired by <a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support">https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support</a>

blocks|key|554326|text|这是另一个测试代码。也许这有点夸张，但该函数尝试将CSS属性设置为DOM对象，然后从该对象中读取内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|554327|我从未在大量奇特的浏览器上测试过这段代码，但它比仅仅检查CSS属性的可用性更安全。啊，是的，它可以区分2D变换支持和3D变换支持！只需传递您想要测试的CSS属性值！|554328|这段代码的优点是它可以检测所支持的供应商前缀(如果有的话)。可能的返回值：|554329|false，当功能不受支持时，或者|offset|length|style|CODE|554330|{
++++vendor:+'moz',
++++cssStyle:+'-moz-transition',
++++jsStyle:+'MozTransition'
}|code-block|syntax|javascript|554331|当支持功能时|554332|/**
+*+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()+%2B+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+%2B+'Delay']+===+'1s'+&&+computed[jsProperty+%2B+'Duration']+===+'2s'+&&+computed[jsProperty+%2B+'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+%7C%7C+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%2B%2B)+{
++++++++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+=+'-'+%2B+vendors[i]+%2B+'-'+%2B+feature;
++++++++++++jsPrefixedProperty+=+jsPrefixes[i]+%2B+featureCapital;
++++++++}

++++++++if+(isStyleSupported(feature,+jsPrefixedProperty))+{
++++++++++++return+{
++++++++++++++++vendor:+vendors[i],
++++++++++++++++cssStyle:+cssPrefixedProperty,
++++++++++++++++jsStyle:+jsPrefixedProperty
++++++++++++};
++++++++}
++++}

++++return+false;
}|554333|Github：https://github.com/easy-one/CSS3test|554334|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/easy-one/CSS3test^0|0|0|0|0|5|0|0|0|0|7|10|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@$H|18|I|19|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1D|8|@]|9|@$H|1E|I|1F|1|1G]]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

Here is another testing code. Maybe it is an overkill, but the function tries to set the CSS property to DOM object and then read back from it. 

Never tested this code on large amount of exotic browsers, but it is safer than just checking for the CSS property availability. Ah, yes, it can distinguish 2D transform support from 3D transform support! Just pass CSS property values you want to test! 

The plus of this code is that it detects the vendor prefix supported (if any). Possible return values: 

<code>false</code>, when feature unsupported, or

<pre><code>{
 vendor: 'moz',
 cssStyle: '-moz-transition',
 jsStyle: 'MozTransition'
}
</code></pre>

when feature supported

<pre><code>/**
 * 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' &amp;&amp; computed[jsProperty + 'Duration'] === '2s' &amp;&amp; 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 &lt; vendors.length; i++) {
 if (i === 0) {
 cssPrefixedProperty = feature; //todo: this code now works for single-word features only!
 jsPrefixedProperty = feature; //therefore box-sizing -&gt; 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;
}
</code></pre>

Github: <a href="https://github.com/easy-one/CSS3test" rel="nofollow">https://github.com/easy-one/CSS3test</a>

blocks|key|338376|text|if+(window.TransitionEvent){

}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|338377|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>if (window.TransitionEvent){

}
</code></pre>

blocks|key|338436|text|使用现代3.0+(alpha)，您可以在本地生成自定义构建。这可能会解决前面提到的“过度杀伤力”问题--尽管我一开始并不完全清楚这个问题(但我假设它是大小的)。新的api提供了一个'+build‘方法，您可以将包含您想要包含在构建中的测试的json传递给该方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|338437|我在gulp文件中使用了类似这样的东西，但不需要gulp+-一个简单的节点脚本就可以了。|338438|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;
++++});
});+|code-block|syntax|javascript|338439|下面是一个‘modernizr+config.json’文件的例子|338440|{
++"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"
++]
}|338441|完整的配置文件包含在现代包中。|338442|使用这种方法，您可以通过包安装程序利用维护良好的现代测试套件，并根据需要轻松地添加/删除测试。更少的测试，更小的文件。|338443|'setClasses‘选项会将相关的测试类添加到您的html中，但您也可以利用3.0异步事件，如下所示：|338444|Modernizr.on('csstransitions',+function(bool)+{
++++if+(bool+===+true)+//+do+transition+stuffs
}|338445|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

With Modernizr 3.0 (alpha), you can generate custom builds locally. This may resolve the aforementioned "overkill" concern - although i'm not entirely clear on that concern in the first place (but i'm assuming it's size). The new api provides a 'build' method, to which you can pass json containing the tests that you would like to include in the build.

I use something like this in my gulp file but gulp is not needed - a simple node script will do.

<pre><code>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;
 });
}); 
</code></pre>

And an example of the 'modernizr-config.json' file would be

<pre><code>{
 "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"
 ]
}
</code></pre>

The full config file is included in the Modernizr package.

With this approach, you can take advantage of the well maintained Modernizr test suite via package installers and easily add/remove tests as needed. Less tests, smaller file obviously.

The 'setClasses' option will add the related test class to your html but you can also take advantage of the 3.0 async events like so:

<pre><code>Modernizr.on('csstransitions', function(bool) {
 if (bool === true) // do transition stuffs
}
</code></pre>

I want to serve different javascript files depending on if browser supports CSS3 transition or not. Is there a better way to detect transition support than my code below?

<pre><code>window.onload = function () {
 var b = document.body.style;
 if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
 alert('supported');
 } else {
 alert('NOT supported')
 }
}
</code></pre>

Detect support for transition with JavaScript

JSON

我想根据浏览器是否支持CSS3转换来提供不同的javascript文件。有没有比我下面的代码更好的检测转换支持的方法？window.onload = function () {    var b = document.body.style;    if(b.MozTransition=='' || b.WebkitTr...

问检测对JavaScript转换的支持
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测对JavaScript转换的支持EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测对JavaScript转换的支持
EN