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

Question

Currently we are using Modernizr to detect whether browser supports Drag and Drop (DnD), Touch and BoxShadow or not. But now our company has decided to get rid of Modernizr so we have to perform checks for above mentioned features.

Regarding Touch and BoxShadow I couldn't find anything. But for DnD, I found lots of information like similar implementation that we have in Modernizer, checking "draggable" in div, see below references:

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

But the problem is all these questions and available information are 8-10 years old, also many people mentioned these methods are not fully reliable. So, is there any way to detect whether browser supports DnD, Touch and BoxShadow features without using any 3rd party components?

Answer 1

To detect drag & drop you can check if element have drag event handler property and to detect box shadow you can to use 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; } }

Note that according to MDN ontouchstart may not be supported by every mobile browser:

EDIT:

After checking some alternative to check box shadow:

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

Check support on MDN .

Cross browser CSS.supports can be found at David Walsh Blog post .

Alternative is getComputedStyle it have bigger browser support you can check at 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

Code to detect browser TOUCH support:

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

Code to detect browser CSS PROPERTY support:

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

Code to detect browser DRAG & DROP support:

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