判断css属性是否支持

@supports #

1.使用CSS3的"@supports"方法 用法:

/* 简单用户 */
@supports (display: flex) {}

/* 复杂用法 */
@supports (display: flex) or (display: -webkit-flex) {}
@supports (display: flex) and (flex-wrap: wrap) {}

详细文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports

CSS.supports #

使用javascript中"CSS.supports"方法 旧API: window.supportsCSS

用法:

// 普通用法
CSS.supports("display", "flex");
// or
CSS.supports("(display: flex)");

// 复杂用户
CSS.supports("(display: flex) or (display: -webkit-flex) or (dispaly: -moz-flex)");

详细文档: https://developer.mozilla.org/zh-CN/docs/Web/API/CSS/supports

js设置元素属性判断 #

通过创建一个元素设置通过css属性, 再获取属性来获取

这个就是一直以来的通用做法, 兼容性非常好

/**
 * 检查浏览器是否支持CSS
 * @param attribute
 * @param value
 * @return {Boolean}
 */
export const supportsCSS = (attribute, value) => {
  if (window.CSS && window.CSS.supportsCSS) {
    if (typeof value === 'undefined') return window.CSS.supportsCSS(attribute)
    return window.CSS.supportsCSS(attribute, value)
  }

  const elem = document.createElement('div')
  if (attribute in elem.style) {
    elem.style[attribute] = value
    return elem.style[attribute] === value
  }
  return false
}

以上是我知道的三种方法, 如果各位有更好的方法, 请在下方留言告诉我!!!