[csswg-drafts] [css-values-5] typeof() or something similar to be used inside `if()` conditionals to check types of custom properties (#11741)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-5] typeof() or something similar to be used inside `if()` conditionals to check types of custom properties ==
Now that we have `if()` ([spec](https://drafts.csswg.org/css-values-5/#if-notation)), and we will potentially have comparisons (https://github.com/w3c/csswg-drafts/issues/11104), we also need another thing that I found wanting to use recently: an ability to ask the type of some custom property.

At first, I wanted to propose something like a `typeof()` function, which would return the resolved type of some value, but while it _might_ be useful, I do not think it is what I actually want.

Because if we define a non-registered custom property (or have a function argument without a defined type), this custom property can contain anything, and we actually don't know the type of it.

However, what we usually want, is to check _if some custom property can be parsed as a certain type_.

Example use case: https://kizu.dev/preview-mixin/ — based on the value of a property, we might want to output things differently.

This could also allow making polymorphic functions that accept just a single argument like `--foo type(<length> | <color>)`, and then do something similar to a custom shorthand, where we will do things differently based on the actual type of the value that was passed to such an argument.

- - -

In Chrome Canary, with experimental flags on, it is currently possible to prototype new functions like this: https://codepen.io/kizu/pen/EaxPgmK?editors=1100

With `@function` and `if()` it is already kinda possible to implement something like what I want, but it would be great to have this available from the box.

This CodePen implements:

- `--is-color()` function that checks if the value passed into it is a `<color>`, and returns `1` or `0` based on the check.
- `--is-length()` function that checks if the value passed into it is a `<length>`, and returns `1` or `0` based on the check.
- Proof of concept `--typeof()` function, using those two functions above to return the first matching type.
- A `--is-type()` function that checks some value against a given type (one that `--typeof()` can return).

The usage of these is currently a bit awkward, as we currently have to save the result of the function into a separate variable in order to check its value with `if()`, but otherwise this seems to work fine.

- - -

More concrete proposals, but very weak: opinions, suggestions, bikeshedding and alternatives are welcome, this is mostly to get the ball rolling on the idea:

- Add a `is-type()` function that tests some value against some type, and returns a boolean to be used in `if()`
- Add a `typeof()` function that would return the actual type of some custom property.
    - Open question: should it be possible to use a type returned this way anywhere CSS can now expect a type? Like in `attr()` etc?
    - Open question: should the function _guess_ the type, or return all types that some value could be? Or do something else? My main concern is what should typeof(0)` do, and what are other possible cases like this, with ambigous types?
    - Open question: what should it return to strings of tokens we currently cannot express as a type, like `1px solid` etc.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11741 using your GitHub account


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

Received on Wednesday, 19 February 2025 00:03:27 UTC