[csswg-drafts] [css-values] if() function (#3455)

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

== [css-values] if() function ==
The addition of `min()`, `max()`, `clamp()` and `toggle()` to the CSS Values 3 draft has made a lot of great progress towards more expressive styles. One thing that would be a very powerful general purpose logic switch would be an `if()` function. (Full disclosure, this matches the implementation in Less - http://lesscss.org/functions/#logical-functions-if, but would be much more powerful in the cascade.)

It would have this signature:

#### `if(condition, trueResult, falseResult)`

The `condition` would match the semantics in Media Queries Level 4, and would query the computed properties of an element.

For example, here's usage of an `if()` as an emulation of `min()`
```css
.foo {
  --calc: calc(10 * (1vw + 1vh) / 2);
  font-size: if(var(--calc) < 12px, 12px, var(--calc));
}
```
Obviously, we already have `min` `max`, but what's useful about `if()` is that, like `toggle()`, you can use it for any value.
```css
.foo {
  /** If our inherited width is below a certain threshold, change flex box wrapping behavior */
  flex-wrap: if(100% < 400px, wrap, nowrap);
  /** Note, a nicer way to write this would be "width < 400px" or some kind of units for inherited container width / height, like "100cw < 400px" but those don't exist */
}
```
You could also use it to toggle background based on inherited values.
```css
.foo {
  background: if(currentColor = white, black, lightblue);
}
```
Like `calc()` and like other languages that have a declarative `if()` function, you can of course nest it.
```css
.foo {
  width: if(box-sizing = border-box, 100%, if(var(--adjust), calc(100% - 20px), 100%));
}
```
Note that many other functions in CSS already have a kind of logic test built-in, but they're very restricted, such as `var()` itself, which tests for an inherited value, and has an `else` if the value is not defined.

`if()` would also pair nicely with `toggle()`, where the toggled value can be tested to resolve other property values.
```css
.foo {
  font-style: toggle(italic, normal);
}
.foo .bar {
  /** Also demonstrates use of MQ4 not() */
  text-transform: if(not (font-style = italic), uppercase, inherit);
}
```

Anyway, that's for your consideration. Cheers!

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

Received on Wednesday, 19 December 2018 01:31:19 UTC