有人写信询问了这个问题。 Lea 刚刚发布了关于 如何从浏览器获取有效的 CSS 属性本身。 就像这样。
例如,这告诉了你 cursor 是一个属性。 但是,你怎么知道 cursor 的哪些值是有效的呢? 我们从文档中知道有 auto、none、help、context-menu、pointer、progress、wait 等值,还有更多。
但是这些列表来自哪里? 嗯,有 规范中的一个列表,这很有帮助。 但这不能保证任何给定浏览器实际支持的值的完整列表。 可能存在 cursor: skull-and-crossbones,我们甚至不知道!
我们可以通过将其应用于元素并在 DevTools 中查看来进行测试

但除非我们对该值进行大规模的字典攻击,否则我们实际上不知道它在浏览器中的直接值。 也许 Houdini 会帮助浏览器在 CSS 自省方面做得更好?
您也可以使用 CSS 对象来运行诸如 CSS.supports(property, value) 之类的测试

你可能会想,我们可以使用 CSS.validValues("text-decoration-thickness") 来获取类似 ["<length>", "<percentage>", "auto", "from-font"] 之类的结果,但可惜没有这样的功能。
DevTools 在哪里/如何填充列表? 每个属性的预定义值?
在 Firefox 中,你只需在检查器中的任何变量上按向上和向下箭头键即可查看所有选项。
今天我在 Firefox 浏览器中为节点列表打印了 console.log(this),它给了我很多可以在开发者工具中使用的函数。 我想知道它是否也可以用于 CSS 属性,并在所有浏览器中使用。 绝对是一个好问题!
当你输入一个项目,例如 cursor,然后按下 Tab 键,在你输入任何值之前,它会列出所有可能的选项,-webkit-grab、-webkit-grabbing、-webkit-zoom-in 等等。 在 Safari 和 Chrome 中已经这样做了很多年,我相信其他浏览器也是如此。 也就是说,你可以开始输入,它会自动完成有效项目,但在你输入任何内容之前,它会给你所有值,除非我遗漏了什么? 因此,不需要字典攻击或任何其他东西
你不能使用检查元素并滚动浏览条目列表吗? 这我一直都在做。
此项目使用 MDN 数据为有效的 css 生成 Typescript 定义。
https://github.com/frenic/csstype
这很棒,但问题是浏览器是否真正实现了 CSS 属性的给定语法/值。 例如,
display属性的基本值在每个主要浏览器中都受支持,但display属性的多值语法仅在 Firefox 中受支持,尽管它在规范中定义了。这很棒