はじめに
CSS3 の登場により、ブラウザのパフォーマンスがより多彩になりました。パフォーマンスに最も大きな影響を与えるのはアニメーションです。特に CSS3 を記述する場合は、ブラウザがアニメーションをサポートしているかどうかを事前に判断する必要があります。アニメーションライブラリのとき。たとえば、遷移アニメーション再生状態は一部のブラウザでのみサポートされます。
次のメソッドは、スクリプトを使用して、ブラウザが特定の CSS3 属性をサポートしているかどうかを判断できます:
最初のタイプ: JavaScript は、次のコードでより一般的に使用されます:
var support_css3 = (function() { var div = document.createElement('div'), vendors = 'Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); while(len--) { if ( vendors[len] + prop in div.style ) { return true; } } return false; }; })();
使用法: 変換がサポートされているかどうかを確認します
if(support_css3('transform')){ }else{ }
2 番目: JavaScript メソッド 2: ie6 はサポートされていません
function isPropertySupported(property) { return property in document.body.style; }
使用法:
上記の属性を覚えて、background-color をbackgroundColor に置き換えてください
if(isPropertySupported('opacity')){ }else{ }
3 番目: CSS.supports
CSS.supports は、CSS3 @support ルールの中でも特別なものです。 @support ルールをサポートするすべてのルールは、次の機能をサポートします (この方法は推奨されません。結局のところ、@support にも互換性があります。一部のブラウザーは CSS3 属性をサポートしている可能性があります)。ただし、@support はサポートされていません)
//pass the same string as you pass to the @supports rule if(CSS.supports("(background-color: red) and (color:white")) { document.body.style.color = "white"; document.body.style.backgroundColor = "red"; }
最後に、入力属性が Palaceholder をサポートしているかどうかなど、ブラウザーが特定の HTML5 属性をサポートしているかどうかを判断する関数を共有します。 :
りー