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 ["<length>", "<percentage>", "auto", "from-font"] or the like, but alas, not a thing.
Where/how does DevTools populate the list? Pre-defined values for every property?
In Firefox you can just press up and down cursor on any variable in inspector to see all options.
Today i printed out console.log(this) for a node list in Firefox browser and in gave me a lot of functions which i can use in developer tools. I wonder if it can also be done with css properties and across all browsers. Definitely a good question!
When you enter in an item such as cursor, and press tab, before entering any value it will list all the potential options, -webkit-grab, -webkit-grabbing, -webkit-zoom-in, etc. In Safari and same in Chrome for years, and assume same in other browsers. That is you can start typing and it will auto complete valid items, but before you type anything it gives you all the values, unless I’m missing something? Thus no need for a dictionary attack or anything
Can you not use inspect element and scroll through the list of entries? That’s what I’ve always done.
This project uses the MDN data to generate Typescript definitions for valid css.
https://github.com/frenic/csstype
This is great, but the problem is does the browser actually implements the given syntax/value of a CSS property. For instance the basic values of the
displayproperty is supported for every major browser, but the multi-value syntax for thedisplayproperty is only supported in Firefox, although it is spec’ed.This is great