Re: [csswg-drafts] [css-conditional] testing support of properties and values with partial implementations (#3559)

> In the case of flex gap specifically, is there any workaround for web developers to detect support for it?

Yes, there is but you have to use JS to detect it.

The following is based on this blog post:
https://ishadeed.com/article/flexbox-gap/

```js
// Set up a cache to prevent a DOM element from getting created for every use of the function
let isSupported;

function checkFlexGapSupport() {
        // Use the cached value if it has been defined
 if (isSupported !== undefined) {
  return isSupported
 }

 // Create a flex container with row-gap set
 const flex = document.createElement('div')
 flex.style.display = 'flex'
 flex.style.flexDirection = 'column'
 flex.style.rowGap = '1px'
 flex.style.position = 'absolute'

 // 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)

        // Flex container should be 1px high due to the row-gap
 isSupported = flex.scrollHeight === 1

        // Remove element from the DOM after you are done with it
 flex.parentNode.removeChild(flex)

 return isSupported
}
```

-- 
GitHub Notification of comment by Dan503
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-717515122 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 27 October 2020 20:20:28 UTC