ホームページ > ウェブフロントエンド > htmlチュートリアル > ブラウザが css3 属性またはunits_html/css_WEB-ITnoseをサポートしているかどうかを確認します。

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

WBOY
リリース: 2016-06-24 11:22:11
オリジナル
1717 人が閲覧しました

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 を理解するのに役立ちます。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート