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

Question

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

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

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

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

检测 javascript 中的 HTML5 拖放支持

但问题是所有这些问题和可用信息都有 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 博客文章中找到。

替代方法是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')) };