Analysis of the situation where js determines and informs the support of CSS attributes (values)

/**
 * Tell the browser which specific CSS properties are supported* @param {String} key - CSS property, which is the name of the property, no prefix is ​​required* @returns {String} - Supported properties*/
function validateCssKey(key) {
    const jsKey = toCamelCase(key); // Some CSS properties are hyphenated if (jsKey in document.documentElement.style) {
        return key;
    }
    let validKey = '';
    // The attribute name is the form of the prefix in js, and the attribute value is the form of the prefix in css // After trying, Webkit can also be the first letter lowercase webkit
    const prefixMap = {
        Webkit: '-webkit-',
        Moz: '-moz-',
        ms: '-ms-',
        O: '-o-'
    };
    for (const jsPrefix in prefixMap) {
        const styleKey = toCamelCase(`${jsPrefix}-${jsKey}`);
        if (styleKey in document.documentElement.style) {
            validKey = prefixMap[jsPrefix] + key;
            break;
        }
    }
    return validKey;
}

/**
 * Convert hyphenated strings to camelCase strings*/
function toCamelCase(value) {
    return value.replace(/-(\w)/g, (matched, letter) => {
       return letter.toUpperCase();
   });
}

/**
 * Check if the browser supports a certain css attribute value (es6 version)
 * @param {String} key - the name of the CSS property to which the property value to be checked belongs * @param {String} value - the CSS property value to be checked (without prefix)
 * @returns {String} - Returns the property value supported by the browser */
function validateCssValue (key, value) {
    const prefix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    const prefixValue = prefix.map(item => {
        return item + value;
    });
    const element = document.createElement('div');
    const eleStyle = element.style;
    // Apply each prefix, and finally apply the case without the prefix, to see which case works for the browser // This is why it is best to have the last element in prefix be ''
    prefixValue.forEach(item => {
        eleStyle[key] = item;
    });
    return eleStyle[key];
}

/**
 * Check if the browser supports a certain CSS property value * @param {String} key - the CSS property name to which the property value to be checked belongs * @param {String} value - the CSS property value to be checked (without prefix)
 * @returns {String} - Returns the property value supported by the browser */
function validateCssValue (key, value) {
    var prefix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    var prefixValue = [];
    for (var i = 0; i < prefix.length; i++) {
        prefixValue.push(prefix[i] + value)
    }
    var element = document.createElement('div');
    var eleStyle = element.style;
    for (var j = 0; j < prefixValue.length; j++) {
         eleStyle[key] = prefixValue[j];
    }
    return eleStyle[key];
}

function validCss (key, value) {
    const validCss = validateCssKey(key);
    if (validCss) {
        return validCss;
    }
    return validateCssValue(key, value);
}