兼容性常规检测

引子

碰到检查支持 font-family 的疑问,一时想不出,查了资料后解惑。顺便在此对是否支持的检测方式,进行一些基本的归纳。

HTML 检测

浏览器并不会对 HTML 进行编译,而是直接解析并显示结果,并以宽松模式运行。即使用了错误的语法,浏览器通常都有内建规则来解析书写错误的标记,页面仍然可以显示出来。对于比较新的标签,大都会有对应的 JS 对象可以进行检测。

不支持脚本检测

<noscript> 元素中定义脚本未被执行时的替代内容。

<noscript>Your browser does not support JavaScript!</noscript>

CSS 检测

通过 style 对象

通过获取 style 对象的某个属性值是否为字符串来判断。

typeof document.body.style.width // string
typeof document.body.style.test // undefined

supports 方法

浏览器原生提供 CSS 对象里面有个 supports 方法,用来检测浏览器是否支持给定的 CSS 规则,返回布尔值。
需要注意的是 window.CSS 这个对象并不是所有浏览器都支持。

window.CSS.supports("display: flex") // true
window.CSS.supports("display: test") // false
window.CSS.supports("display", "flex") // true
window.CSS.supports("display", "test") // false

Modernizr 是一个检测是否支持 HTML5 和 CSS3 特性的库。

事件检测

可以创建一个元素对象,然后检查在该对象中,是否有对应的属性。

function isSupportEvent(eventName) {
  if (typeof eventName !== 'string') {
    console.log('Event name is not legal !');
    return;
  }
  var element = document.createElement('div');
  eventName = 'on' + eventName;
  var isSupport = Boolean(eventName in element);
  return isSupport;
}

浏览器模型对象检测

这类都在 window 对象上,直接获取进行判断。对于支持对象,但部分支持对象拥有的方法,类似方式进行判断。

function isSupportObject(objName) {
  if (typeof objName !== 'string') {
    console.log('Object name is not legal !');
    return;
  }
  return Boolean(window[objName]);
}

字体检测

检测字体的思路是:初始化一个字符串,设置通用字体,获取其渲染宽度,然后设置需要检测的字体,获取渲染的宽度,比较两个宽度,相同说明不支持,不同说明支持。类似思路的还有这种方式

function isSupportFontFamily(font) {
  if (typeof font !== 'string') {
    console.log('Font name is not legal !');
    return;
  }

  var width;
  var body = document.body;

  var container = document.createElement('span');
  container.innerHTML = Array(10).join('wi');
  container.style.cssText = [
    'position:absolute',
    'width:auto',
    'font-size:128px',
    'left:-99999px'
  ].join(' !important;');

  var getWidth = function (fontFamily) {
    container.style.fontFamily = fontFamily;
    body.appendChild(container);
    width = container.clientWidth;
    body.removeChild(container);

    return width;
  };

  var monoWidth  = getWidth('monospace');
  var serifWidth = getWidth('serif');
  var sansWidth  = getWidth('sans-serif');

  return monoWidth !== getWidth(font + ',monospace') || sansWidth !== getWidth(font + ',sans-serif') || serifWidth !== getWidth(font + ',serif');
}

参考资料

Image placeholder
jiaowb123
未设置
  46人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css不同浏览器兼容性问题怎么解决?

css不同浏览器兼容性问题的解决方案1.浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把ma

css属性兼容性详解

盒模型属性【宽高width/height】(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height【内边距padding】padd

安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试

背景说明由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCXWeb插件进行直播。对于安防监控

Android兼容Java 8语法特性的原理分析

本文主要阐述了Lambda表达式及其底层实现(invokedynamic指令)的原理、Android第三方插件RetroLambda对其的支持过程、Android官方最新的dex编译器D8对其的编译支

谷歌云重磅推出混合云平台Anthos,兼容竞争对手云服务 | Google Cloud Next’19

大数据文摘出品作者:蒋宝尚、周素云当地时间4月9日,谷歌云年度盛会GoogleCloud Next’19在旧金山的Moscone召开。在会上,谷歌云的新任CEO,曾经的甲骨文二号人物ThomasKur

css样式不兼容怎么办?

1、使用浏览器私有属性我们经常会在某个CSS的属性前添加一些前缀,比如-webkit-,-moz-,-ms-,这些就是浏览器的私有属性。为什么会出现私有属性呢?这是因为制定HTML和CSS标准的组织W

jquery不兼容低版本ie浏览器怎么办?

jquery不兼容低版本ie浏览器怎么办?1、可以使用原生JS或者低版本的Jquery1.x版本。因为Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要

ie不兼容jquery怎么办?

解决方法:1、可以使用原生JS或者低版本的Jquery1.x版本。因为Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要兼容低版本的IE版本,建议使用原

create-react-app兼容ie11配置

今天闲来无事折腾一下create-react-app,发现主流浏览器都没有问题。但是ie11却一直报错,真是倔强的很啊。我翻了下create-react-app的文档,从中看到了正好有对ie9、ie1

YOLO目标检测从V1到V3结构详解

本文主要内容是对YOLO系列进行综述目标检测评价指标IoU(Intersection-over-Union)指标IoU简称交并比,顾名思义数学中交集与并集的比例。假设有两个集合A与B,IoU即等于A与

复杂异常检测如何快速落地?看看百度怎么做

作者简介:周伟  百度云高级研发工程师负责百度云智能运维(Noah)告警通告系统的设计和研发,在大规模分布式系统、运维监控、精准报警等方面具有广泛的实践经验。干货概览本文提到的异常检测(Anomaly

医疗保健案例研究:怎样用深度学习检测疟疾

导言本文中,我们将集中讨论人工智能(AI)与流行的开源工具、技术和框架如何被用于发展和改善医疗行业。俗话说,健康就是财富。在这篇文章中,我们将探讨如何利用人工智能来检测一种致命的疾病–疟疾,以及如何建

vue中如何关闭eslint检测?

vue中如何关闭eslint检测?有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了。所以,下面来介绍下怎么在v

上医治未病:云上入侵检测安全启示录

两千多年前,《黄帝内经》提到“上医治未病,中医治欲病,下医治已病”。云安全也是同理,未雨绸缪、防患于未然,这虽是老生常谈,但真正能具备这一能力的企业却不多,各种各样的安全事件仍在频频上演。——01——

如何检测jquery是否已加载?

如何检测jquery是否已加载?当前网页加载jQuery后,jQuery()或$()函数将会被定义有如下两种方法进行检测:方法1:if(jQuery){ //jQuery已加载 }else{ //jQ