Jonathan Neal 在几天前发布了一个非常棒的 CSS 技巧，将 JSON 放入 CSS 中，并用 JavaScript 提取它。 自定义属性的有效值 非常宽松！因此，这会查找 CSS 规则（例如，一个完整的块，如 #x { y: z; }，其中 cssText 以 -- 开头（这不是一个有效的选择器，但谁在乎呢——如果需要，您可以将其更改为 thisIsJson 或其他内容），然后切出一个 JSON.parse() 可以处理的字符串。
我在这里重新键入了他的示例
这有用吗？
嗯。
可能不是，比如，每天都会使用。但请记住，JSONP 仍然存在，因为 CORS 也存在。我认为将一些 JSON 放入 CSS 中是绕过 CORS 的另一种方式。我有点怀疑它会流行起来，但这是可能的。还记得不久前我们还在讨论 使用 CSS 作为字面数据的 API 吗？另一个值得怀疑的想法。;)
我认为“在自定义属性中放置奇怪的东西”是新的“在 CSS 内容中放置奇怪的东西”。
例如，您知道 JavaScript 中有媒体查询，类似于 matchMedia 吗？当然，CSS 中也有媒体查询。曾经有一段时间（我不确定它是否已经过去），在多个地方只定义一次这些媒体查询感觉像是一个好主意，因此我们不会在多个地方维护媒体查询。为了使它们“保持同步”，一个想法是在 CSS 中定义它们，并让它们交换一些 CSS content 的值（例如 @media (max-width: 500px) { body::after { content: "max500"; display: none; } }），然后用 JavaScript 观察 content 的变化——您就会知道该媒体查询处于活动状态。 真的！ 不是开玩笑！
说到 CSS 中的 JSON，您也可以直接在其中放入 JavaScript。这不像 Jonathan 的提取那样聪明，因为它只是提取值并对其进行 eval 操作。
Caleb Williams 用 CSS 创建了一个 Web Worker。
谢谢。这非常有用
这太丑了，我的眼睛看着它都疼… 每一方面都。
我实在不明白。所以，如果 CORS 是一个东西，为什么不花时间去了解它带来的挑战，理解跨源资源策略的存在是有充分理由的（安全）；并使用 WHATWG 批准的解决这些限制的标准，即“Access-Control-Allow-Origin”HTTP 标头。参见 https://mdn.org.cn/en-US/docs/Web/HTTP/CORS
我赞赏 css-tricks 提供的优秀前端内容，但——就像 JavaScript 社区中的许多人一样——它似乎努力去实现一个必须使用 JavaScript 的世界观，或者是在 JavaScript 无法控制的许多问题领域中。当涉及到使用黑客手段时，我从未如此清楚地看到这一点，因为安全措施似乎仅仅是为了让前端开发人员的生活变得更加困难。它们不是：它们是为了让黑客的生活变得更加困难。
这只是一个技巧。没有人提倡它是任何问题的绝佳解决方案。这只是思考起来很有趣。
另一方面，当我发布并非“CSS” “技巧”的内容时，我也会收到评论，哈哈。
哈？CSS 自定义属性是否开箱即用地接受 JS？这让我感到困惑。
此 JS 是否对实际的当前选择器或样式有任何可见性？它可以用于类似以下内容（如下所示）吗？
JS 实际上并没有在样式表中运行。就 CSS 而言，该内容只是一些随机字符串。但是，您可以使用 Javascript 读取自定义 CSS 属性，然后将该字符串评估为 JS 代码。
是的，那是真的
因为在完成所有这些操作后，有时您无法访问服务器，或者没有资源进行更改等。如果我有正确的替代方案，我永远不会使用这样的技巧，但有时您必须做您必须做的事情。
有时您永远不应该这样做。
与 Twitter 上所说的一样。没什么新鲜的，您很久以前就可以做到这一点，但将字符串放在其他地方（例如，在 before 的内容中）。
没有人这么做的原因可能是因为没有理由这样做；无论此方法应该解决什么用例，都可以使用其他工具来实现，并且它总是感觉不那么像黑客手段。
还有那个“eval”……哦，我的天。无可奉告。我以为 css tricks 是一个充满智慧的地方。
为什么不直接将 Json 放入 js 文件中呢？
我在 2019 年写过这篇文章，当时我在 CSS 属性中使用 JSON 来控制 Paint Worklet。
https://itnext.io/controlling-paint-worklet-with-json-in-css-298a7b10e41c