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?

No spec draft yet, but roughly speaking it defines a before-change style for elements that currently do not transition due to this particular line:
https://www.w3.org/TR/css-transitions-1/#:~:text=If%20an%20element%20is%20not%20in%20the%20document%20during%20that%20style%20change%20event%20or%20was%20not%20in%20the%20document%20during%20the%20previous%20style%20change%20event%2C%20then%20transitions%20are%20not%20started%20for%20that%20element%20in%20that%20style%20change%20event

> 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.

Likely what's happening is that we don't apply the `:target` pseudo in time for the initial style. This is challenging because whether it can be the target depends on the style (e.g. i think it can't be if it's `display: none`) so it's not clear whether we could make it match during the initial style. This would also imply that

```css
:target {
  display: block;
}
```

Would allow you to target elements which are normally `display: none` and have them go back to `display: none` once they are no longer the target.

> 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.

Transitions from `visibility: hidden;` already run, as the developer can specify their style, e.g. https://jsbin.com/dezagab/edit?html,css,output

The reason we targeted elements first entering the document or coming from `display: none` is that they have no previous style to transition from.

> 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.

This sounds like a use case that might be better handled by css animations, which will run from the point when the selector first matches. E.g.

```css
@keyframes highlight {
  from { background: yellow; }
}
:target {
  animation: highlight 1s;
}
```

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8174#issuecomment-1453810545 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 16:48:53 UTC