Re: [csswg-drafts] [css-values?] What is the MVP for inline conditionals on custom properties? (#10064)

A few more workarounds authors can use right now:

1. [Conditions for CSS Variables](https://kizu.dev/conditions-for-css-variables/) — mentioned in the issue, but I want to bring attention to the fact that I wrote this post in October 2016 — right after the custom properties appeared in all major browsers (except from Edge, where it appeared a year later). Author interest for conditions like this was present throughout the years ever since, for example, see [DRY Switching with CSS Variables](https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/) by Ana Tudor from 2018
2. [“CSS-Only Type Grinding”](https://www.bitovi.com/blog/css-only-type-grinding-casting-tokens-into-useful-values) by Jane Ori — a _very_ (I repeat, **very**) convoluted but working (including in Firefox Nightly) way of using registered custom properties to achieve selecting some value based on an ident.
3. Before I came up with [“Cyclic Dependency Space Toggles”](https://kizu.dev/cyclic-toggles/), I did a number of experiments (some of which I think I saw before in some ways, so authors were already reaching for these as possible workarounds for the absence of conditions):
    - https://codepen.io/kizu/pen/mdQyNqq — accessing specific paused keyframes by a `<number>` custom property.
    - https://codepen.io/kizu/pen/YzRXXXL — using named paused animations and accessing them as a `<ident>` custom property.
4. Outside of using `1` or `0` values it is possible to work around the absence of conditions for `<length>` by using rather cumbersome but working calculations as a way to compare lengths: https://codepen.io/kizu/pen/WNBEKvW
5. Not yet working in Firefox due to [a bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1763376), but a possible way to conditionally detect if some custom property is not initial on the element itself: https://codepen.io/kizu/pen/zYQdamG — via an animation that applies space toggles for the default state.

I recommend going to the linked articles and codepens to witness the hacky CSS that is currently required to achieve those conditionals.

Given how often authors reach out to things like space toggles or come up with more and more convoluted ways to achieve conditions for different use cases (Is a custom property defined? Is value A is smaller than B? Are those two conditions true? Etc.), we really need at least some way to have these kinds of conditions.

Ideally, I'd want to have both inline conditions, but also an at-rule-level ones, but even if we will resolve only on inline conditions it will improve the lives of authors tremendously.

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


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

Received on Tuesday, 11 June 2024 23:05:21 UTC