Re: [csswg-drafts] [css-contain-3] Define a syntax for state-based container queries (#6402)

• From: Matthew Dean via GitHub <sysbot+gh@w3.org>
• Date: Sat, 09 Apr 2022 23:48:30 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-1094142633-1649548109-sysbot+gh@w3.org>

Imagine, for example, an accordion. Say it could do this.
```html
<div class="accordion">
  This is some content
  <button type="button" class="button">This is an accordion opener</button>
  <div class="hidden">
   This is hidden content.
  </div>
</div>

<style>
  .accordion {
     /** Or @state accordion(open, closed)? Allows multiple state vars? */
     @state open, closed;
   }
   .button:pressed {
     /** Or toggle: accordion? */
     toggle: state;
   }
   .hidden {
     display: none;
   }
   .accordion:state(open) .hidden {
     display: block;
   }
</style>
```

Some kind of state system would prevent having to do radio button hacks with sibling combinator selectors to try to change a state of another element based on input of an initial element.

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


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

Received on Saturday, 9 April 2022 23:48:32 UTC