Remember the “Yellow Fade Technique” from back in the day? With Modern CSS this is now SUPER EASY to recreate!
```
div {
transition: background-color 0.5s;
background-color: transparent;
@starting-style {
background-color: yellow;
}
}
```
Here’s how it works: when an element’s styles change, it can do a transition from one value to an other.
But when inserting an element there is nothing to transition from?! With `@starting-style` this changes, as is it allows you to declare these “before” set of styles.
That way, in the example given, newly inserted divs will do a one-time transition from `background-color: yellow` to a `background-color: transparent`.
Pretty cool, right?
@starting-style is available as of Chrome Canary 115.0.5788.0 with the Experimental Web Platform Features flag set to enabled.
https://codepen.io/bramus/pen/MWPLgjy
(This at-rule was known as `@initial` for a short period of time, but got renamed as part of the standardization process. Earlier versions of Canary support the old name.)
@bramus oooooh. Is this part of interop 2023? Waaant
Edit: looks like no but hope the others catch on soon!
@sarajw @bramus this is the problem with putting our hopes into Interop: it allows mal-actors like Apple to structurally under-fund WebKit/Safari, then let webdevs argue if these are the *right* scraps.
Apple has no funding or capacity limit. It's all made up.
See also:
https://infrequently.org/2023/02/safari-16-4-is-an-admission/
https://infrequently.org/2022/06/apple-is-not-defending-browser-engine-choice/
Bramus
Sara Joy 
Alex Russell