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

Random thought: if we decide on `{}`, do we even need separators when working with it?

Because then when I look at the code with it, I immediately reminded of the rest of CSS:

```CSS
.foo {
  color: rgb(
    245
    if(
      style(max-width: 400px) { 100 }
      style(max-width: 500px) { 110 }
      style(max-width: 600px) { 120 }
      else { 140 }
    )
    10
  )
}
```

- `?` or `:` is replaced with a `{`
- `,` or `;` is replaced with a `}`

This allows us to use commas and almost any complex logic in the `<if-condition>`, and any values inside the value block:

```CSS
.foo {
  font-family: if(
    style(--type: prose), style(--type: book) {
      'Iowan Old Style', 'Palatino Linotype', serif
    }
    style(--type: code) and not (--placement: inline) {
      'Nimbus Mono PS', 'Courier New', monospace
    }
    else {
      system-ui, sans-serif
    }
  );
}
```

This does not introduce new characters, and builds on the existing concepts in CSS.

Overall, I do not have a strong preference over a specific syntax, but just wanted to throw in another possibility :)

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


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

Received on Wednesday, 25 September 2024 08:59:24 UTC