Created
February 7, 2022 10:02
-
-
Save zzdjk6/2ffc8e252e6e0bb92b5dca2f04c6ee88 to your computer and use it in GitHub Desktop.
Detect if flex gap is supported
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let _detectedFlexGapSupported = false; | |
| let _isFlexGapSupported = false; | |
| export const checkFlexGapSupported = (): boolean => { | |
| if (_detectedFlexGapSupported) { | |
| return _isFlexGapSupported; | |
| } | |
| // create flex container with row-gap set | |
| const 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); | |
| const isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap | |
| flex?.parentNode?.removeChild(flex); | |
| _detectedFlexGapSupported = true; | |
| _isFlexGapSupported = isSupported; | |
| return isSupported; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment