Chrome中自定义<length>类型CSS属性仅支持像素？语法合规吗？

语法合规性确认 #

你的语法完全符合CSS规范。根据CSS自定义属性（@property）的定义，<length>类型的initial-value允许使用任何合法长度单位，包括em、rem这类相对单位，并非只能用像素（px）。Firefox的表现是符合规范的，Chrome报错属于浏览器实现层面的兼容性缺陷。

Chrome兼容性问题说明 #

Chrome早期对@property的<length>类型初始值处理存在bug，无法正确解析相对单位的初始值，但该问题在较新版本的Chrome中已修复。建议先检查并升级你的Chrome浏览器到最新稳定版后再测试。

滚动条宽度过渡的解决方案 #

如果升级浏览器后问题仍存在，或需要兼容旧版Chrome，可尝试以下两种方案：

方案1：数值变量+动态拼接单位 #

定义不带单位的数值变量，在滚动条样式中通过calc拼接单位，同时保留过渡效果：

@property --scrollbar-width-val {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}

::-webkit-scrollbar {
  width: calc(var(--scrollbar-width-val) * 1em);
  transition: width 0.3s ease;
}

/* 触发过渡时修改数值即可 */
.container:hover {
  --scrollbar-width-val: 3;
}

方案2：浏览器针对性降级 #

针对Chrome使用像素单位，其他支持相对单位的浏览器使用em等单位，通过特性检测实现：

/* 基础定义，默认用px兼容Chrome */
@property --scrollbar-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 20px;
}

/* 检测浏览器是否支持相对单位的initial-value，如Firefox */
@supports (initial-value: 2em) {
  @property --scrollbar-width {
    initial-value: 2em;
  }
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
  transition: width 0.3s ease;
}

内容的提问来源于stack exchange，提问作者McMurphy