vanillajs-browser-helpers/supportsCSS.cjs

Collection of convenience code snippets (helpers) that aims to make it a little easier to work with vanilla JS in the browser

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.supportsProp = void 0;
const vendorPrefixed_1 = __importDefault(require("./vendorPrefixed"));
let div;
function supportsProp(prop, value) {
    if (!div) {
        div = document.createElement('div');
    }
    if (typeof div.style[prop] === 'undefined') {
        return false;
    }
    if (!value) {
        return true;
    }
    div.style[prop] = value;
    return div.style[prop] === value;
}
exports.supportsProp = supportsProp;
/**
 * Detect wether or not the given css property (and/or) value is supported by
 * the current browser
 *
 * @param prop    - Property to test
 * @param value   - Value to test with the property
 * @return Returns object if property is supported with prefix, otherwise a boolean is returned
 */
function supportsCSS(prop, value) {
    // Property (+ value) is supported natively as is
    if (supportsProp(prop, value)) {
        return true;
    }
    // Testing prefixed values
    const props = vendorPrefixed_1.default(prop);
    const values = vendorPrefixed_1.default(value);
    for (let i = 0; i < props.length; i++) {
        const { prefix, js } = props[i];
        const prefixedProp = js;
        const prefixedValue = values[i].css;
        // Prefixed prop
        if (supportsProp(prefixedProp, value)) {
            return { prop: prefixedProp, value, prefix };
        }
        // Prefixed value
        if (supportsProp(prop, prefixedValue)) {
            return { prop, value: prefixedValue, prefix };
        }
        // Prefixed prop and value
        if (supportsProp(prefixedProp, prefixedValue)) {
            return { prop: prefixedProp, value: prefixedValue, prefix };
        }
    }
    // No prefix support has been found
    return false;
}
exports.default = supportsCSS;