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

Question

目前，我们正在使用现代主义来检测浏览器是否支持拖放(DnD)、Touch和BoxShadow。但是现在我们公司已经决定摆脱现代化，所以我们必须对上面提到的特性进行检查。

关于Touch和BoxShadow，我什么也找不到。但是对于DnD，我发现了许多类似的信息，比如我们在现代版中的实现，在div中检查"draggable“，参见下面的参考资料：

如何检查任何元素的IE拖放支持

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

在javascript中检测HTML5拖放支持

但问题是所有这些问题和现有资料都是8-10年前的，也有很多人提到这些方法并不完全可靠。那么，是否有任何方法可以检测浏览器是否支持DnD、Touch和BoxShadow特性而不使用任何第三方组件？

Answer 1

用于检测浏览器触摸支持的代码：

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

用于检测浏览器CSS属性支持的代码：

    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;
};

用于检测浏览器拖放支持的代码：

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

Answer 2

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

​

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可以在大卫·沃尔什博文上找到。

另一个选择是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;
   }  
}

​