How can I add ```@starting-style { ... } ``` to a ...

# kobweb

[Norbi]

How can I add

@starting-style { ... }

to a CssStyle declaration?
Thanks.

[David Herman]

Unfortunately, looking at https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style it looks like it's not widely supported, and Kobweb's rule is that we'll only support features considered stable.

Note that in a pinch, you can use JavaScript to modify stylesheets for a site, so if you really need this feature, you can delegate the logic to calling JavaScript APIs. Kobweb does that itself internally to support registering a few styles as "!important" (since Compose HTML doesn't allow it) and below it for registering CSS layers (which Compose HTML does not also support): https://github.com/varabyte/kobweb/blob/e4984af8ae9a4141bb7c9f965d338ddcbf4f6fc9/f[…]ion/src/jsMain/kotlin/com/varabyte/kobweb/silk/init/InitSilk.kt

That said, I would probably suggest asking a question about what you are trying to do and maybe we can navigate a different approach for now.

[Norbi]

Only Firefox does not support it but it is already in the nightly builds and will be supported by Firefox 127.
Using @starting-style it is trivial to implement transition -based animations when the element is added to the DOM.

Is there a way to "integrate" (or "hack" 😄) it somehow to the Modifier system?
I understand that you don't want to add it to the library but I would gladly use it myself 😉

[David Herman]

I'd probably recommend using a CssStyle to set the animation and then add the class style dynamically when the element is visible. You can use an Intersection observer for this.

[David Herman]

I'm away from the computer now but will try to remember to share code how to do this later. I did it in my talk actually.