Analyse der Situation, in der js die Unterstützung von CSS-Attributen (Werten) bestimmt und informiert

/**
 * Teilen Sie dem Browser mit, welche spezifischen CSS-Eigenschaften unterstützt werden. * @param {String} key - CSS-Eigenschaft, das ist der Name der Eigenschaft, es ist kein Präfix erforderlich. * @returns {String} - Unterstützte Eigenschaften * /
Funktion validateCssKey(Schlüssel) {
    const jsKey = toCamelCase(key); // Einige CSS-Eigenschaften werden mit Bindestrich versehen if (jsKey in document.documentElement.style) {
        Eingabetaste;
    }
    lassen Sie validKey = '';
    // Der Attributname hat die Form des Präfixes in js und der Attributwert hat die Form des Präfixes in css // Nach dem Ausprobieren kann Webkit auch der erste Buchstabe von webkit in Kleinbuchstaben sein
    const PräfixMap = {
        Webkit: „-webkit-“,
        Moz: '-moz-',
        ms: '-ms-',
        O: '-o-'
    };
    für (const jsPrefix in prefixMap) {
        const styleKey = toCamelCase(`${jsPrefix}-${jsKey}`);
        wenn (Stilschlüssel in Dokument.Dokumentelement.Stil) {
            gültiger Schlüssel = PräfixMap[jsPrefix] + Schlüssel;
            brechen;
        }
    }
    gibt gültigen Schlüssel zurück;
}

/**
 * Konvertieren Sie Zeichenfolgen mit Bindestrich in Zeichenfolgen in CamelCase-Format*/
Funktion toCamelCase(Wert) {
    Rückgabewert.replace(/-(\w)/g, (übereinstimmend, Buchstabe) => {
       returniere letter.toUpperCase();
   });
}

/**
 * Überprüfen Sie, ob der Browser einen bestimmten CSS-Attributwert unterstützt (ES6-Version).
 * @param {String} key – der Name der CSS-Eigenschaft, zu der der zu prüfende Eigenschaftswert gehört * @param {String} value – der zu prüfende CSS-Eigenschaftswert (ohne Präfix)
 * @returns {String} – Gibt den vom Browser unterstützten Eigenschaftswert zurück */
Funktion validateCssValue (Schlüssel, Wert) {
    const Präfix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    const Präfixwert = Präfix.map(item => {
        Artikel + Wert zurückgeben;
    });
    const element = document.createElement('div');
    const eleStyle = element.style;
    // Wenden Sie jedes Präfix an und wenden Sie zum Schluss die Groß-/Kleinschreibung ohne Präfix an, um zu sehen, welche für den Browser funktioniert. // Aus diesem Grund ist es am besten, wenn das letzte Element im Präfix '' ist.
    Präfixwert.fürJeden(Element => {
        eleStyle[Schlüssel] = Element;
    });
    returniere eleStyle[Schlüssel];
}

/**
 * Prüfen, ob der Browser einen bestimmten CSS-Eigenschaftswert unterstützt * @param {String} key – der CSS-Eigenschaftsname, zu dem der zu prüfende Eigenschaftswert gehört * @param {String} value – der zu prüfende CSS-Eigenschaftswert (ohne Präfix)
 * @returns {String} – Gibt den vom Browser unterstützten Eigenschaftswert zurück */
Funktion validateCssValue (Schlüssel, Wert) {
    var Präfix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    var Präfixwert = [];
    für (var i = 0; i < Präfix.Länge; i++) {
        Präfixwert.push(Präfix[i] + Wert)
    }
    var Element = Dokument.ErstellenElement('div');
    var eleStyle = element.stil;
    für (var j = 0; j < Präfixwert.Länge; j++) {
         eleStyle[Schlüssel] = Präfixwert[j];
    }
    returniere eleStyle[Schlüssel];
}

Funktion validCss (Schlüssel, Wert) {
    const validCss = validateCssKey(Schlüssel);
    wenn (validCss) {
        gibt valides CSS zurück;
    }
    returniere validateCssValue(Schlüssel, Wert);
}