Question

我正在尝试启用检测fullscreen API支持功能。

使用CSS.supports()，我无法理解如何检查选择器而不是属性/值对我的代码如下：

CSS.supports(':fullscreen {}')

请注意，通过检查requestFullscreen是否存在来检测功能会返回误报。

Answer 1

使用CSS.supports（），我无法理解如何检查选择器而不是属性/值对。

CSS.supports()方法和@supports at-rule仅支持（奇怪的是）检查对属性 - 值对的支持，而不是选择器。

通常，用于检测对CSS选择器的支持的基于JS的解决方法是将其提供给document.querySelector()并查看是否会导致异常 - 如果是，则浏览器不支持该选择器。这个问题的主要问题是使用前缀实现的伪类和伪元素;由于不同的前缀会使不同浏览器的选择器无效，因此您将非常难以测试特定于供应商的选择器版本。

特别是对于全屏API，David Storey有一个很好的article，涵盖了大多数有关使其跨浏览器工作的知识。它包含一段代码，涵盖了API的功能检测：

以下代码测试是否使用所有相关前缀启用了Fullscreen API，但Webkit的旧语法版本除外：
if (document.fullscreenEnabled || 
  document.webkitFullscreenEnabled || 
  document.msFullscreenEnabled ||
  document.mozFullScreenEnabled) {
  // add Fullscreen API code here. Remember all the prefixes
} else {
  // in reality you should use fallback code here
  alert("Your browser doesn’t support the fullscreen API");
}
请注意，标准语法使用前缀，以及WebKit / Blink和IE的前缀。旧语法用于Firefox。

Answer 2

建议使用适用于HTML5 / CSS3的Modernizr特征检测库

它具有检测全屏的属性：Modernizr.fullscreen

http://modernizr.com/

CSS.supports功能检测全屏支持

2 个答案: