Introducing: CSSValues.com

There are quite a few references online for finding detailed info on CSS properties. I find, however, that most of them usually have more than what I’m looking for — and don’t even get me started on the overly-convoluted CSS specs. Truth is, sometimes I just want to know which values are valid for a particular property, and nothing more. So I built a quick-reference site that does just that.

It’s called: CSS Values.

How it works is very simple. If you know a CSS property that you’re thinking of using, but can’t remember all the values that it accepts, just type the property name into the search box and the page will instantly update to display the property with all valid values.

You can also use it just to browse, which might be helpful for CSS beginners. All the data is displayed on the page by default, so you can scroll down and just peruse everything at random — which you might find surprising. We might think we know CSS pretty well, but it’s amazing what little nuggets you’ll find. I certainly learned a lot while building this thing.

Naturally, keeping the data for CSS Values up to date will be an ongoing task, but I really don’t mind since I’m constantly doing research on CSS stuff. So this will be a great way to help me stay up to speed — even if nobody finds the app particularly useful.

Resources Used

The page uses a very useful little script called List.js by Jonny Strömberg. If the functionality of it feels familiar, then it might be because HTML5 Please uses the same script for its insta-filtering.

I’m also using a diamond upholstery pattern from Subtle Patterns and the logo/title font is Akashi from Ten by twenty.

Drawbacks

As this is a very simple reference app, it naturally has some drawbacks. The data it holds is updated manually in the HTML. Not the greatest solution, I know.

If I was patient enough, I’d build some sort of a scraper to grab the data automatically from the spec or MDN (like what DocHub does). But I just want the values, and it likely would be time-consuming to filter out vendor properties and other things that I don’t want in the list.

Also, the one big thing missing from the reference is browser support, which is a major factor when deciding on what CSS features to use. At the very least, I think I should add a note for each property to say which versions of IE support it. Adding a simple “browser support” section to each property is definitely on the to-do list.

If anyone has any ideas for improving how the info is updated, or anything else, I’d be happy to hear it. And if you notice any bugs, missing data, or incorrect info, you can report an issue on the GitHub page. Thanks to Paul for some initial feedback while I was finishing it up.

In the meantime, enjoy the brand new CSS Values!