ブラウザが css3 属性またはunits_html/css_WEB-ITnoseをサポートしているかどうかを確認します。

1. CSS.supports() メソッドを使用します mark-zhq[3]

//判断是否支持flex布局var supportsFlex = CSS.supports("display", "flex");//判断是否支持rem单位var supportsRem = CSS.supports("width","1rem");//判断兼容性属性var supportsAPS = CSS.supports("animation-play-state")||CSS.supports("-webkit-animation-play-state")||CSS.supports("-ms-animation-play-state")||CSS.supports("-Moz-animation-play-state")||CSS.supports("-o-animation-play-state");

注: これは CSS.supports をサポートするブラウザのみに適用され、Opera ブラウザは別のメソッド名を使用します。

このメソッドがサポートされているかどうかを確認します: (サポートされていない場合は、サードパーティのライブラリ Modernizr を使用します)

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

2. document.documentElement.style を検索して、クエリする属性があるかどうかを確認します

function isString(value){    return typeof value == "string";}var docStyle = document.documentElement.style;var supportsAPS = isString(docStyle.animationPlayState)||isString(docStyle.webkitanimationPlayState)||isString(docStyle.MozanimationPlayState)||isString(docStyle.msanimationPlayState)||isString(docStyle.oanimationPlayState);

これについてはインスタンス化では説明しません。そのため、typeof を使用してデータ型を決定できます。一般に、最初の方法の方が優れており、2 番目の方法は CSS を理解するのに役立ちます。