如何检测浏览器是否支持某个伪类

CarterLi

如何检测浏览器是否支持某个 CSS 伪类(例如 :focus-within

错误方法

@supports (div:focus-within) {}
CSS.supports('div:focus-within`);

此法检测的是浏览器是否支持一个名为 div 的属性,且值可以为 focus-within,当然不支持。。。

正确方法

function supportsPseudoClass(clazz) {
  const style = document.createElement('style');
  style.innerHTML = clazz + '{}';
  document.head.appendChild(style); // required, or style.sheet === null
  const result = style.sheet.cssRules.length === 1;
  style.remove(); // document.head.removeChild(style);
  return result;
}

supportsPseudoClass(':focus-within'); // => true

原理:如果 CSS 解析器不认识某个伪类,CSS 会认为其整条规则都不合法,并将其忽略。style.sheet.cssRules 只会存放解析成功的规则,所以如果浏览器不认识这个伪类,就不会把这条规则存入 cssRules

同理,如果用到伪类的 polyfill,一定不能将 polyfill 生成的类名和原始伪类连用。例如:

#div:focus-within, #div.focus-within {
}

如果浏览器不认识 :focus-within,CSS 解析器会把整条规则全部忽略掉,起不到 polyfill 的效果。#div:focus-within, #div.focus-within 是一条选择器

可以这么写(scss):

@mixin div {
}

#div:focus-within {
  @include div;
}
#div.focus-within {
  @include div;
}

下一篇文章预计讲讲 :focus-within 的用处

阅读 1.8k

我大EOI前端
[链接] 虽然公司尚小,但是志向不小
1.3k 声望
99 粉丝
0 条评论
1.3k 声望
99 粉丝
文章目录
宣传栏