Как сделать, чтобы if работал с calc?

Рейтинг: 1Ответов: 1Опубликовано: 04.08.2025

Хочу получить:

x is zero
y is zero

но вместо этого получается

x is zero
y is nonzero

@property --y {
  syntax: "<number>";
  initial-value: 0;
}

body {
  --x: 0;
  --y: calc(0 + 0);
}

body::before, body::after {
  display: block;
}

body::before {
  content: "this browser is not supported :(";
  content: "x is " if(style(--x: 0): "zero"; else: "nonzero");
}

body::after {
  content: "y is " if(style(--y: 0): "zero"; else: "nonzero");
}

PS: https://developer.mozilla.org/en-US/docs/Web/CSS/if

css css-функции css3
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Надо объявить свойство --y не забыв указать inherits (не важно, true или false):

@property --y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

Код полностью:

@property --y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

body {
  --x: 0;
  --y: calc(0 + 0);
}

body::before, body::after {
  display: block;
}

body::before {
  content: "this browser is not supported :(";
  content: "x is " if(style(--x: 0): "zero"; else: "nonzero");
}

body::after {
  content: "y is " if(style(--y: 0): "zero"; else: "nonzero");
}