Heim > Web-Frontend > HTML-Tutorial > 判断浏览器是否支持css3属性或单位_html/css_WEB-ITnose

判断浏览器是否支持css3属性或单位_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:22:11
Original
1717 Leute haben es durchsucht

 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");
Nach dem Login kopieren

注:这里只针对支持CSS.supports的浏览器,Opera浏览器使用的是不同的方法名。

判断是否支持该方法:(如果不支持的话可用第三方库Modernizr)

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
Nach dem Login kopieren

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);
Nach dem Login kopieren

这里不会涉及到实例化,所以可以用typeof去判断数据类型。综合来说第一种方法较好,第二种方法可以帮助理解CSS。

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage