Re: [csswg-drafts] [selectors-4] Add pseudo-class to establish before-change style for css-transitions on new elements. (#8174)

Did some very brief testing with `:initial` — https://codepen.io/kizu/pen/ZEMKxWm

The case I'd want to use it for seems to not work: is there a spec draft somewhere that I missed that I could consult, or is this in a very early prototype stage yet?

Thing that I would expect to work: having an element that is a `:target` be highlighted when landing on a page — opening the codepen above in a debug mode, clicking on the “target the always shown”, then refreshing the page — I would the element get the initial state with the `:target` already applied. This is helpful for giving somebody a link to some docs with a section highlighted by `:target` where we only want to highlight it temporarily.

Second thing that I'm not sure would ever work, (but maybe the intend to implement this is there?) — using the `:initial` for the _dynamic_ states, so not only when the element “appears” on the page for the first time, but also when it _changes state_. Interestingly, in the prototype above, first setting the `:target` on a hidden element, and then showing it gives it a proper state.

Common use-case for that dynamic `:target` would be similar — we're on a long docs page, we click on a link that leads us to some anchored section, would be nice to highlight it.

Another case I just thought of where we would want to have this initial state trigger that we could also consider — transitioning not from the `display: none`/non-existance, but from other hidden states like from `visibility: hidden` etc.

I wonder if it could be possible to define & implement this as something like "the initial state for this selector match", regardless of if it is for when element appears, or its className changes, or something else happens. I can even think of cases for things like `:hover`, but for _that_ dynamic states I think things are much more complicated I guess.

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


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

Received on Friday, 3 March 2023 13:55:07 UTC