Re: [csswg-drafts] [css-selectors] Proposal for allowing selectors that depend on layout (:stuck, :snap, :on-screen, etc) (#5979) from Adam Argyle via GitHub on 2024-04-17 (public-css-archive@w3.org from April 2024)

From: Adam Argyle via GitHub <sysbot+gh@w3.org>
Date: Wed, 17 Apr 2024 18:14:33 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-2061922690-1713377671-sysbot+gh@w3.org>

in Canary (with cli flag `CSSStickyContainerQueries`) you can prototype adding a shadow with position sticky, it looks like this:

```css
dt {
  container-type: scroll-state;
  position: sticky;

  > header {
    transition: box-shadow .5s ease;
    
    @container scroll-state(stuck: top) {
      box-shadow: 0 5px 5px #0003;
    }
  }
}
```

[Codepen proto](https://codepen.io/argyleink/pen/zYbEdGm)

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


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

Received on Wednesday, 17 April 2024 18:14:33 UTC