8
Answers

Trying to add vendors prefix (Webkit) to a property using cssHooks.

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

Answers (8)