import canUseDom from './canUseDom'; export var canUseDocElement = function canUseDocElement() { return canUseDom() && window.document.documentElement; }; var isStyleNameSupport = function isStyleNameSupport(styleName) { if (canUseDom() && window.document.documentElement) { var styleNameList = Array.isArray(styleName) ? styleName : [styleName]; var documentElement = window.document.documentElement; return styleNameList.some(function (name) { return name in documentElement.style; }); } return false; }; var isStyleValueSupport = function isStyleValueSupport(styleName, value) { if (!isStyleNameSupport(styleName)) { return false; } var ele = document.createElement('div'); var origin = ele.style[styleName]; ele.style[styleName] = value; return ele.style[styleName] !== origin; }; export function isStyleSupport(styleName, styleValue) { if (!Array.isArray(styleName) && styleValue !== undefined) { return isStyleValueSupport(styleName, styleValue); } return isStyleNameSupport(styleName); } var flexGapSupported; export var detectFlexGapSupported = function detectFlexGapSupported() { if (!canUseDocElement()) { return false; } if (flexGapSupported !== undefined) { return flexGapSupported; } // create flex container with row-gap set var flex = document.createElement('div'); flex.style.display = 'flex'; flex.style.flexDirection = 'column'; flex.style.rowGap = '1px'; // create two, elements inside it flex.appendChild(document.createElement('div')); flex.appendChild(document.createElement('div')); // append to the DOM (needed to obtain scrollHeight) document.body.appendChild(flex); flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap document.body.removeChild(flex); return flexGapSupported; }; export default isStyleSupport;