I, i'm trying to use this function to automatically looking for every property on my css file that needed to be renamed with the vendor prefix of the navigator. I could managed to get the name of the prefix (Webkit) + the property name (backdropFilter) together (WebkitBackdropFilter) but I'm blocked with the " cssHooks " function and his get and set to change the prop. name. Nothing is happening when I load the webpage. I'm sure it's my mistake... i show you the code
$.styleSupport = function(prop) {
let vendorProp, supportedProp,
capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = ["Moz", "Webkit", "O", "ms"],
div = document.createElement("div");
if (prop in div.style) {
supportedProp = prop;
} else {
for (let i = 0; i < prefixes.length; i++) {
vendorProp = prefixes[i] + capProp;
if (vendorProp in div.style) {
supportedProp = vendorProp;
break;
}
}
div = null;
$.support[prop] = supportedProp;
return supportedProp;
}
let myDomProp = 'backdropFilter';
let myDomPropPrefixed = $.styleSupport(myDomProp);
if (myDomPropPrefixed && myDomPropPrefixed !== myDomProp) {
$.cssHooks[myDomProp] = {
get: function (elem, computed, extra) {
return $.css(elem, myDomPropPrefixed);
},
set: function (elem, value) {
elem.style[myDomPropPrefixed] = value;
}
};
}