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