如何检测浏览器是否支持拖放、触摸和BoxShadow？答案

【问题标题】：How to detect whether browser supports Drag and Drop, Touch and BoxShadow?如何检测浏览器是否支持拖放、触摸和BoxShadow？
【发布时间】：2021-04-23 22:23:38
【问题描述】：

目前我们正在使用 Modernizr 来检测浏览器是否支持拖放 (DnD)、触摸和 BoxShadow。但是现在我们公司决定摆脱 Modernizr，所以我们必须对上述功能进行检查。

关于 Touch 和 BoxShadow 我找不到任何东西。但是对于 DnD，我发现了很多信息，例如我们在 Modernizer 中的类似实现，检查 div 中的“可拖动”，请参阅以下参考资料：

How to check for IE Drag & Drop support of any element

https://gist.github.com/patrickkettner/762017e6f66d8c49027f

Detecting HTML5 Drag And Drop support in javascript

但问题是所有这些问题和可用的信息都是 8-10 年的，而且很多人提到这些方法并不完全可靠。那么，有什么方法可以在不使用任何 3rd 方组件的情况下检测浏览器是否支持 DnD、Touch 和 BoxShadow 功能？

【问题讨论】：

最快的方法是查看modernizr的源代码，看看它是如何做到的，然后复制你需要的东西。
我从下面的链接下载了最新版本，但是我在哪里可以找到拖放和其他功能的实现？ github.com/Modernizr/Modernizr/releases/tag/v3.11.4

标签： javascript jquery css drag-and-drop modernizr

【解决方案1】：

要检测拖放，您可以检查元素是否具有拖动事件处理程序属性并检测框阴影，您可以使用 CSS @supports at rule：

var div = document.createElement('div');

console.log({
  drag: 'ondrag' in div,
  touch: 'ontouchstart' in div
});

@supports (box-shadow: initial) {
   body {
     background: rebeccapurple;
   }  
}

请注意，根据MDN ontouchstart 可能并非所有移动浏览器都支持：

编辑：

在检查了复选框阴影的替代方案后：

var boxShadow = CSS.supports('box-shadow', 'initial');

检查MDN 的支持。

跨浏览器 CSS.supports 可以在 David Walsh Blog post 找到。

替代方案是getComputedStyle，它具有更大的浏览器支持，您可以在MDN 上查看。

var div = document.createElement('div');

console.log({
  drag: 'ondrag' in div,
  touch: 'ontouchstart' in div,
  boxShadow: isRed(getComputedStyle(document.body, ':before').color)
});

function isRed(color) {
   var m = color.match(/^rgb\(([^,\s]+)/);
   if (m) {
      return +m[1] === 255;
   }
   return color === 'red';
}

@supports (box-shadow: initial) {
   body::before {
     color: red;
   }  
}

【讨论】：

我理解了拖动和触摸的代码，但不知道如何在 JS 中使用 box-shodow。您能否提供与拖动和触摸相同的 boxshadow 示例？
@sunil20000 不知道怎么做这就是为什么我只添加了 CSS 方式，但是用两种方法在 JS 中检测框阴影编辑问题，第二种有更大的浏览器支持。

【解决方案2】：

检测浏览器 TOUCH 支持的代码：

    var isTouchSupported = function () {
    return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}

检测浏览器 CSS PROPERTY 支持的代码：

    var isCssPropertySupported = function (cssProperty) {
    var cssPrefix = "Webkit,Moz,O,ms,Khtml".split(",");
    var divElement = document.createElement("div");

    var uProp = cssProperty.charAt(0).toUpperCase() + cssProperty.substr(1);
    var cssPropertyWithAllPrefix = (cssProperty + ' ' + cssPrefix.join(uProp + ' ') + uProp).split(' ');

    for (var i = 0; i < cssPropertyWithAllPrefix.length; i++) {
        if (divElement.style[cssPropertyWithAllPrefix[i]] === "") {
            return true;
        }
    }

    return false;
};

检测浏览器 DRAG & DROP 支持的代码：

var isDragAndDropSupported = function () { return ('draggable' in document.createElement('div')) };

【讨论】：