在 chrome 中设置 css constant() 或 env() 变量以进行调试

Question

我有这样的 CSS：

#something {
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
}

（改变移动浏览器上的视图）

有没有办法在桌面上的 chrome中将safe-area-inset-top值设置为constant或env变量来调试/测试？

Answer 1

也许会出现更好的答案，但目前我发现最好的方法是简单地使用变量作为解决方法：

:root {
  --safe-area-inset-top: 20px;
}

#something {
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
  top: var(--safe-area-inset-top);
}