你能从浏览器获取有效的 CSS 属性值吗?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

有人写信询问了这个问题。 Lea 刚刚发布了关于 如何从浏览器获取有效的 CSS 属性本身。 就像这样。

例如,这告诉了你 cursor 是一个属性。 但是,你怎么知道 cursor 的哪些值是有效的呢? 我们从文档中知道有 autononehelpcontext-menupointerprogresswait 等值,还有更多。

但是这些列表来自哪里? 嗯,有 规范中的一个列表,这很有帮助。 但这不能保证任何给定浏览器实际支持的值的完整列表。 可能存在 cursor: skull-and-crossbones,我们甚至不知道!

我们可以通过将其应用于元素并在 DevTools 中查看来进行测试

该死的。

但除非我们对该值进行大规模的字典攻击,否则我们实际上不知道它在浏览器中的直接值。 也许 Houdini 会帮助浏览器在 CSS 自省方面做得更好?

您也可以使用 CSS 对象来运行诸如 CSS.supports(property, value) 之类的测试

该死的。

你可能会想,我们可以使用 CSS.validValues("text-decoration-thickness") 来获取类似 ["<length>", "<percentage>", "auto", "from-font"] 之类的结果,但可惜没有这样的功能。