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

To make my previous post a bit clearer, here an example for how I imagine this to work:

JS:

```js
// gapInFlexboxSupport.js
class GapInFlexboxSupport {
  name: '--gap-in-flexbox',
  check: () => {
    // 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';

    // Create two, elements inside it
    flex.append(document.createElement('div'), document.createElement('div'));

    // Append to the DOM (needed to obtain scrollHeight)
    document.body.append(flex);

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

registerSupportCheck(GapInFlexboxSupport);


// In document
CSS.supportsWorklet.addModule('gapInFlexboxSupport.js');
```

CSS:

```css
@supports (--gap-in-flexbox) {
  .flex {
    display: flex;
    gap: 8px;
  }
}
```

Regarding performance and especially privacy concerns, we could create a worklet-specific document. So there is no relation to the actual document. Though this would, of course, also limit the possibilities for this feature.

Sebastian

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


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

Received on Tuesday, 14 June 2022 11:36:10 UTC