必须用引号包裹含空格的css自定义属性值，否则会被拆分为多个token导致失效；js设置时应使用json.stringify()确保引号正确，避免safari反斜杠解析问题。
用引号包裹字符串值才能正确保存空格
不加引号时，CSS会把空格当作分隔符，把字符串拆成多个 token，导致 --my-str: hello world 实际被解析为两个无效值，后续 var(--my-str) 可能完全失效或触发回退行为。
必须显式使用单引号或双引号：
body {
--greeting: "Hello World";
--path: '/assets/images/hero banner.jpg';
}
注意：引号是值的一部分，不是语法装饰；引号类型需匹配（如属性值本身含单引号，就用双引号包住）。
在 calc() 或 attr() 中引用带空格的自定义属性要格外小心
calc() 仅接受数值型计算，不能直接拼接字符串；attr() 默认返回字符串但不支持变量注入。想动态组合带空格的文本，得靠 JS 配合或 CSS 伪元素 + content：
-
content: var(--greeting);✅ 可直接用（前提是--greeting已用引号定义） -
width: calc(var(--size) * 1px);❌--size若是"120px"，引号会让整个值变成字符串，calc()解析失败 - 需要数值时，自定义属性应存纯数字：
--size: 120;，再在用处补单位
JS 获取和设置带空格的 CSS 自定义属性值要处理引号
CSSOM 读取时，引号会被保留；写入时若漏掉引号，空格将再次导致截断：
element.style.setProperty('--title', 'New Page Title'); // ❌ 被拆成 New、Page、Title
element.style.setProperty('--title', '"New Page Title"'); // ✅ 正确
更稳妥的做法是统一用 JSON.stringify() 包裹：
element.style.setProperty('--title', JSON.stringify('New Page Title'));
这样既防空格，也兼容单双引号、反斜杠等特殊字符。
浏览器兼容性无陷阱，但旧版 Safari 对引号内转义支持弱
所有现代浏览器（包括 Chrome 49+、Firefox 31+、Safari 9.1+）都支持带引号的字符串自定义属性。唯一要注意的是：
- Safari ≤ 13.1 对
"C:\path\to\file"这类 Windows 路径中的反斜杠解析不稳定 - 建议路径类字符串统一用正斜杠：
"/path/to/file with space.txt" - 避免在 CSS 中直接写 Unicode 转义序列（如
"\u4f60\u597d"），JS 设置时用原生字符串更可靠
真正容易被忽略的是：引号必须存在，且 JS 设置时不能依赖“看起来正常”——哪怕 DevTools 显示值是对的，没引号的空格字符串在某些上下文里就是不可用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
