Can you get valid CSS property values from the browser?
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That’s like this.
That gives you, for example, the fact that cursor is a thing. But then how do you know what valid values are for cursor? We know from documentation that there are values like auto, none, help, context-menu, pointer, progress, wait, and many more.
But where does that list come from? Well, there is a list right in the spec so that’s helpful. But that doesn’t guarantee the complete list of values that any given browser actually supports. There could be cursor: skull-and-crossbones and we wouldn’t even know!
We can test by applying it to an element and looking in DevTools:
But unless we launch a huge dictionary attack against that value, we don’t actually know what values it directly in-browser. Maybe Houdini will help somehow in browsers getting better at CSS introspection?
You can also use the CSS object to run tests like CSS.supports(property, value):
You’d think we could have like CSS.validValues("text-decoration-thickness") and get like ["", "", "auto", "from-font"] or the like, but alas, not a thing.
The post Can you get valid CSS property values from the browser? appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
