- From: Jonathan Neal via GitHub <sysbot+gh@w3.org>
- Date: Mon, 21 Jun 2021 19:55:16 +0000
- To: public-css-archive@w3.org
jonathantneal has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-contain-3] Define a syntax for observing container queries ==
<a name="question-1" href="#question-1">1</a>. Should **Container Queries** allow us to observe [containment](https://drafts.csswg.org/css-contain-3/#containment-types) by an ancestor?
_Some bikeshed code to illustrate the feature:_
```js
const cq = element.withinContainer('(width >= 640px)')
typeof cq.matches === 'boolean'
cq.containers === [ ...ancestorsWithMatchingContainment ]
```
<a name="question-1a" href="#question-1a">1a</a>. Should **Container Queries** allow us to observe containment _changes_ by an ancestor?
_Some bikeshed code to illustrate the feature:_
```js
const cq = element.withinContainer('(width >= 640px)')
cq.onchange = (
event
) => {
event.target === cq
event.matches === cq.matches
event.containers === cq.containers
}
```
<a name="question-2" href="#question-2">2</a>. Should **Container Queries** allow us to observe containment _on a capable target_?
_Some bikeshed code to illustrate the feature:_
```js
const cq = element.matchContainer('(width >= 640px)')
typeof cq.matches === 'boolean'
cq.containers === [ element ]
```
<a name="question-2a" href="#question-2a">2a</a>. Should **Container Queries** allow us to observe containment _changes_ on a capable target?
_Some bikeshed code to illustrate the feature:_
```js
const cq = element.matchContainer('(width >= 640px)')
cq.onchange = (
event
) => {
event.target === cq
event.matches === cq.matches
event.containers === cq.containers
}
```
<a name="question-3" href="#question-3">3</a>. Should Container Queries allow us to observe containment using another abstraction, akin to observing media queries?
_Some bikeshed code to illustrate the feature:_
```js
const cq = matchContainers('(min-width: 640px)')
cq.onchange = (
event
) => {
event.target === cq
event.containers === [ ...targetsWithMatchingContainment ]
}
```
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6401 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 21 June 2021 19:56:19 UTC