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/
@flori You can subscribe to the https://developer.chrome.com/blog/.
We’ve covered it before in https://developer.chrome.com/blog/whats-new-css-ui-2023/
To learn even earlier about it, you can follow along with the CSSWG meetings and issues at https://github.com/w3c/csswg-drafts/issues, but truth be told: it’s a lot of work and things change quite often before becoming a standard.
Middle ground is to follow me + @Una + @argyleink + other DevRel on the various social platforms. We follow the WG + tweet about the new stuff before writing the article.
@simevidas selectors-4. WG resolved on it, but spec still needs edits.
Transitions are ergonomic and easy to use for changes to property values when there is an existing style to transition from. However, when an element is first added to the page or made not display:...
Bramus
Sara Joy 
Alex Russell
Florian Schroiff 
Šime Vidas