CSS Variable Fallback

约 232 字小于 1 分钟

2023-08-06

CSS Variable Fallback

CSS 变量越来越多的应用于前端开发中。但我们可能在使用 CSS 变量的过程中，可能由于某些原因导致 CSS 变量值为空，特别是，如果这个 CSS 变量的值是通过 JavaScript 控制的。

下面有一个例子：

.message__bubble {
  max-width: calc(100% - var(--actions-width));
}

变量 --actions-width 在 CSS 函数 calc() 中使用，它的值通过 JavaScript 控制的。假设 JavaScript 由于某些原因，设置 --actions-width 的值失败了。这会导致 calc() 计算的 max-width 值为无效的，这可能导致意外的布局问题。

我们可以提前避免这种情况，给 --actions-width 设置一个回退值。

.message__bubble {
  max-width: calc(100% - var(--actions-width, 70px));
}

如果未定义变量，将使用回退 70px 。可以使用这种方法避免设置变量可能失败（例如：来自 Javascript）。