W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2021

Re: [csswg-drafts] [selectors][mediaqueries] :media() pseudo-class as a shortcut for one-off media queries (#6247)

From: Miriam Suzanne via GitHub <sysbot+gh@w3.org>
Date: Wed, 26 May 2021 19:03:10 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-849042039-1622055788-sysbot+gh@w3.org>
We discussed this as an approach to container queries, and it's probably good to consider them as part of this conversation. If the only syntax is selector-based, it makes larger changes (impacting multiple selectors) more repetitive – though nesting could help that problem:

```css
.card:container(width > 30em) {
  & .card-image { … }
  & .card-content { … }
  & .card-footer { … }
}
``` 

With container queries specifically, this also introduces a different way to solve the "named container" problem – but it can be kinda confusing as well. Right now we always have the selector-target query its nearest container:

```css
/* body and card are both containers */
body, .card { contain: inline-size style layout;

@container (width > 30em) {
  .card { /* card queries the size of body */ }
  .card .content { /* content queries the size of card */ }
}

.card:container(width > 30em) .content {
  /* card queries the size of body, in order to update content */
}
```

I don't see it as a universally better solution than the at-rule syntax, but I do think it can provide some interesting trade-offs. Interested to see where this conversation goes.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 26 May 2021 19:03:12 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:27:23 UTC