It was one time to many that we headed towards the bookshelf to look up that one CSS property we couldn’t quite exactly remember… So we decided there should be an online reference that is simple and fast to use.
Today we proudly present version 1.0 of our Interactive CSS 2.1 Properties Reference. The idea was to use a desktop application like interface that would allow to present all the information in a single compactly sized window. There is thus no need to scroll or to load new pages while browsing the reference.
This is made possible by extensive use of DOM scripting. Indeed our secondary goals was to learn our share from Jeremy Keith’ fine book and finally get at peace with JavaScript… If you’d like to know whether JavaScript is also for you, check out the slides of Keith’ 2005 presentation and the interviews by the Digital Web Magazine and the Web Standards Group.
We expect our reference to be of most value to users with an intermediate knowledge of CSS who want to get a complete overview of all CSS properties or a simple reminder of some unfamiliar properties or values.
Does our reference work for you too? Should we do more along these lines? Tell us what you think!
Pinging is currently not allowed.
Excellent. You guys go from strength to strength I am looking forward to what you’ve got coming in the future!
Cool idea. Could you maybe make it into a (Dashboard) widget?
Brian, I’d love to do a Dashboard widget. I will look into it as soon as my schedule permits…
It’d be nice to have some documentation on the psuedoattributes; :hover, :visited, :link, whatnot - especially the use of :hover on non-link text and where it is and isn’t supported (-:
very cool,
thanks
Way cool.
Just one thing: You don’t seem to have a license attached to the download version and no comments in the source either.
So do you think it is public domain? Would it be bundable with an application (BSD style licence), etc?
The applet is ace, as just starting to make a website and this gives easy to find ref of commands.
Soryu, thanks for pointing us to the missing copyright statement… We are certainly happy to grant permission to bundle our reference as long as we can make sure that we are given proper credits. We encourage everyone interested to inquire at [info at culturedcode dot com].
Very cool. I love the way you broke the information down visually, it’s very easy to assimilate. Any chance of using this framework to expose other CSS releases, or to introduce browser issues.
I’m not completely familiar with the details surrounding CSS 2.1, but I know in my little world, individual developers introduce use cases that raise box model issues and browser compatibility problems… I’m always searching for resources to find, explain, and resolve these issues from a maintenance stand point. Cutting down on that search time is the game for me and your framework appears to work toward that end.
Thomas, I believe that once the basic principles of CSS based design have been assimilated (and a good reference is right at hand), the biggest hurdle in real world adoption of CSS is getting to grips with browser bugs and incompatibilities.
We are intending to extend Xyle to actively help in working around browser bugs. An online bugs/solution reference in the spirit of our present properties reference may very well be a first step…
Your css properties reference (as well as the whole website) is a well done combination of pleasant layout and technical content!
Thank you!
As a budding CSS-user, this resource is ridiculously useful. Rather than surfing through three or four sites to find the right property and values for certain things, you have everything RIGHT HERE. I’m blown away.
Thank you guys so much. Keep it up. :D
Very cool little application - the details pane is fabulous. Thank you.
This interactive web app is so beautiful! It is easily the nicest interface of any pure JavaScript app I’ve ever seen. Great job!
Info on selectors, media, etc., would be nice additions. :)
Very nice layout and good technical content. I would like to see more techinical details about each property like its all variations. Thanks.
First off, I want to say that your reference has been a great help to me. I don’t remember all of the CSS properties, but the layout of your reference/app does make it easy to find things and then later use and remeber them.
Changes I’d like to see:
- addition of more CSS properties
- browser specific CSS items (text shadowning, current rounded corners stuff, etc.)
- a link to a CSS validator, if not one built in that would check one’s CSS against the reference that you already have developed.
That is all that I can think of now. I havent played with the reference on my Treo, but being able to use it on there would be neat too.
Great job and thanks again.