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

Nosee 发布于2019-08-22 17:07 / 277人阅读

摘要：如何检测浏览器是否支持某个伪类例如错误方法此法检测的是浏览器是否支持一个名为的属性，且值可以为，当然不支持。。。正确方法原理如果解析器不认识某个伪类，会认为其整条规则都不合法，并将其忽略。

如何检测浏览器是否支持某个 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 的用处

私有云 GPU服务器检测浏览器是否有webrtc权限判断浏览器是否支持webrtc 微信浏览器是否支持webrtc 是否包含某个值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94876.html

如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

I_Am 2019-08-02 16:05 评论0 收藏0
如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

waltr 2019-08-29 16:43 评论0 收藏0
前端面试题总结

摘要：还有天，年便过去了，回头看看，这段时间自己有出去面试过，也遇到了很多面试题，以下是我的一些总结，这篇关于面试的文章，我也会不定时的更新。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。还有7天，2018年便过去了，回头看看，这段时间自己有出去面试过，也遇到了很多面试题，以下是我的一些总结，这篇关于面试的文章，我也会不定时的更新。 HTML 1.说一下你对HTML语义...

ztyzz 2019-08-30 15:55 评论0 收藏0
前端面试题总结

摘要：还有天，年便过去了，回头看看，这段时间自己有出去面试过，也遇到了很多面试题，以下是我的一些总结，这篇关于面试的文章，我也会不定时的更新。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。还有7天，2018年便过去了，回头看看，这段时间自己有出去面试过，也遇到了很多面试题，以下是我的一些总结，这篇关于面试的文章，我也会不定时的更新。 HTML 1.说一下你对HTML语义...

tinysun1234 2019-08-02 13:57 评论0 收藏0
前端面试题总结

摘要：还有天，年便过去了，回头看看，这段时间自己有出去面试过，也遇到了很多面试题，以下是我的一些总结，这篇关于面试的文章，我也会不定时的更新。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。还有7天，2018年便过去了，回头看看，这段时间自己有出去面试过，也遇到了很多面试题，以下是我的一些总结，这篇关于面试的文章，我也会不定时的更新。 HTML 1.说一下你对HTML语义...

VishKozus 2019-08-23 14:17 评论0 收藏0