如何检测浏览器是否支持Drag and Drop、Touch和BoxShadow？

Question

目前我们正在使用 Modernizr 来检测浏览器是否支持拖放 (DnD)、Touch 和 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 功能？

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

Answer 2

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

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

如何检测浏览器是否支持Drag and Drop、Touch和BoxShadow？

How to detect whether browser supports Drag and Drop, Touch and BoxShadow?

javascript

css

jquery

drag-and-drop

modernizr