Last night I was annoyed at how slow (and web 1.0-ish) most CSS reference sites seem to be, so I created this. It's basically a scrape of the CSS reference on w3schools, but with client side searching. Feedback is most welcome!
some of the tech involved: node, requirejs, backbone, mongodb
the code: http://github.com/rgarcia/instacss
You could use Levenshtein distance (https://en.wikipedia.org/wiki/Levenshtein_distance) as your search metric. That would provide two advantages: it would handle slight misspellings, and it would find the closest match first ("radius" would prefer "border-radius" to "border-top-left-radius", and "border" would prefer "border" as requested in another comment).
You might consider providing a quick list of the property names (perhaps over on the right) in addition to the fully expanded list, to make it easier to tell if you have the right results, and jump to them in the list.
Please put the "[source]" links closer to the content; right now they seem more closely associated with the following entry. How about putting the link near the top right of each entry instead?
Please don't fade the "default" and "inherited" text so close to white; I found it uncomfortable to read with that little contrast.
Also, needs an index for those times when I can't remember what I'm looking for.
+ Need a way to do an explicit search. There are a lot of shorthand properties and searching for "border" requires me to scroll way down to find the border reference doc. If I typed border: it should only show me one result.
+ The possible values need to be presented in a list. It is difficult to scan that paragraph to determine what are my options.
+ Make the search box position fixed. Maybe in the header? If no input is present in the search input, show the howto below. Make sure to add a background color to the howto to distinguish from results.
How about changing the search box heading to something more instructive, more instant, like "Begin typing a CSS property". Also, I'd like to see filters like :hover.
Great job so far!
Also, many examples appear twice. (Try text-shadow, border-spacing)
+++ superfast, the search-as-you-type is especially useful (not having to wait for something you just wanna "quickly lookup if you got it right in your head" is a MASSIVE plus!)
- you should really implement a "goto top" button, especially when there are more results
- placebo button. why is it there if it doesn't do anything? seems like you search after i type anyway, so why is there a button after all?
- wasn't clear what queries the search can handle, i.e. i wasn't sure what exactly could i look up. maybe you could give some examples on the start page, and also i would set the background of the search input field to say something like "search as you type", so it gets more clearer.
really, it's a fine site. but as there are only the site title "instaCSS", the tagline "gimme teh css" and a search field, it could have really profit for a bit more information about the service. not much, but subtle. it really wasn't clear what your service can do without the HN subtext.
One suggestion: if you put "color" in the search box, you currently get "border-bottom-color", "column-rule-color", "border-top-color", and "color", in that order. It would make more sense to put "color", the exact match, at the very top. (And probably also to sort the remaining matches alphabetically.)
And the UI is totally awesome.
also, it can't handle "gradient" at all.
I'd recommend MozDev.