[csswg-drafts] [css-null-keyword] `null` keyword (#9914)

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

== [css-null-keyword] `null` keyword ==
Imagine the following css:

```css
body {
  background-color: red;
  background-color: var(--bg);
  --bg: null; /* I need to set this to anything that invalidates the background color so that the red background color is used */
}
```

As far as I know it's not possible to set the value of `--bg` to anything which will result to the property to become invalid. Maybe a  `null` keyword could help us out here, which would basically mean: ignore this line.

An other use case would be:
CSS:
```css
.animate {
  animation: animate 1s infinite alternate;
}

.animate-from-scale-50 {
  --animate-from-transform: scale(0.5);
}

.animate-to-scale-75 {
  --animate-to-transform: scale(0.75);
}

.animate-from-color-red {
  --animate-from-color: red;
}

.animate-to-color-yellow {
  --animate-to-color: yellow;
}

.color-blue {
  color: blue;
}

@keyframes animate {
  from {
    color: var(--animate-from-color, null);
    transform: var(--animate-from-transform, null);
  }
  to {
    color: var(--animate-to-color, null);
    transform: var(--animate-to-transform, null);
  }
}
```
HTML:
```html
<div class="animate animate-from-color-red animate-to-color-yellow">
  Animate from color red to yellow.
</div>
<div class="animate antimate-from-scale-50 animate-to-scale-75 color-blue">
  Animate from scale 50% to 75%. The color isn't blue.
</div>
```
Demo: https://codepen.io/MartijnCuppens/pen/PoLavRM?editors=1100


Would a `null` keyword be interesting or are there existing workarounds?


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


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

Received on Tuesday, 6 February 2024 11:17:09 UTC