Syla Bailey

Syla Bailey

  • 2.1k
  • 16
  • 311

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

Jun 20 2022 2:52 PM

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)