styleChecker.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import canUseDom from './canUseDom';
  2. export var canUseDocElement = function canUseDocElement() {
  3. return canUseDom() && window.document.documentElement;
  4. };
  5. var isStyleNameSupport = function isStyleNameSupport(styleName) {
  6. if (canUseDom() && window.document.documentElement) {
  7. var styleNameList = Array.isArray(styleName) ? styleName : [styleName];
  8. var documentElement = window.document.documentElement;
  9. return styleNameList.some(function (name) {
  10. return name in documentElement.style;
  11. });
  12. }
  13. return false;
  14. };
  15. var isStyleValueSupport = function isStyleValueSupport(styleName, value) {
  16. if (!isStyleNameSupport(styleName)) {
  17. return false;
  18. }
  19. var ele = document.createElement('div');
  20. var origin = ele.style[styleName];
  21. ele.style[styleName] = value;
  22. return ele.style[styleName] !== origin;
  23. };
  24. export function isStyleSupport(styleName, styleValue) {
  25. if (!Array.isArray(styleName) && styleValue !== undefined) {
  26. return isStyleValueSupport(styleName, styleValue);
  27. }
  28. return isStyleNameSupport(styleName);
  29. }
  30. var flexGapSupported;
  31. export var detectFlexGapSupported = function detectFlexGapSupported() {
  32. if (!canUseDocElement()) {
  33. return false;
  34. }
  35. if (flexGapSupported !== undefined) {
  36. return flexGapSupported;
  37. }
  38. // create flex container with row-gap set
  39. var flex = document.createElement('div');
  40. flex.style.display = 'flex';
  41. flex.style.flexDirection = 'column';
  42. flex.style.rowGap = '1px';
  43. // create two, elements inside it
  44. flex.appendChild(document.createElement('div'));
  45. flex.appendChild(document.createElement('div'));
  46. // append to the DOM (needed to obtain scrollHeight)
  47. document.body.appendChild(flex);
  48. flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
  49. document.body.removeChild(flex);
  50. return flexGapSupported;
  51. };
  52. export default isStyleSupport;