SitePoint CSS Reference Closed Beta

Tweet

You’ve probably heard some whispers – well let’s be honest, some very loud shouting – about a new, super cool reference site we’ve been working on here at SitePoint HQ. First off the blocks is the CSS reference that our technical editor Andrew has already claimed is going to rock your world! Written by SitePoint Forums veterans Tommy Olsson (AutisticCuckoo) and Paul O’Brien (Paul O’B), this reference is designed to be the definitive reference for Cascading Style Sheets on the Web.

The Three Layers of the Web - CSS Reference Beta

Beginning today, we have launched a closed beta of the SitePoint CSS Reference. For the next month or so, access will be restricted to SitePoint Forums members signed up before December 1, 2007.

If you’re reading this, chances are good that you’re included in that group. If you are, we hope you will get in, look around, poke, prod, tear it apart, and tell us what you think. We’re looking for all kinds of feedback from usability, functionality, and performance to any typos you might find in the content.

After a month of recording your feedback, we’ll implement as many of your recommendations as possible before letting the rest of the world in with the public launch.

So with your forum login in hand – get ready to experience CSS like never before…

Drum roll … curtains raised … reference.sitepoint.com

Enjoy!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Monomomono

    None of the reference pages I’ve checked properly print in Firefox 2.0.0.11. All the text is cut off on the right hand side as if there is no right margin. It prints well in IE6.

  • http://www.sitepoint.com/ Kevin Yank

    Thanks for the feedback, Monomomono!

    I can’t seem to reproduce the problem you’re seeing. The pages seem to print perfectly here in Firefox 2.0.0.11. Is there a specific page or pages you are having trouble with that I could try?

  • Monomomono

    All of them. :> Say, for example I go to:

    http://reference.sitepoint.com/css/selectorgrouping

    I print preview in landscape, and half the “y” in apply in the first sentence is cut off. Strange behavior. Perhaps it is because I’m using “Portable” Firefox. So I may not have a true replica of a traditional Firefox installation. Sorry to stir up trouble. :>

  • http://www.alterbridgerocks.com CreedFeed

    Prints fine for me in both landscape and portrait for me in IE7 and Firefox 2.0.0.11 on Windows XP SP2

  • mariov96

    Looks good but two suggestions:

    Provide a launch-able sample of the snippet being expressed so the user can confirm the behavior in their own browser/blend.

    Provide a verbose view of the support browser matrix. As new browsers come on to the scene users might like to use the sample (see above) and record their findings and thus help keep the matrix relevant.

    Otherwise thanks for improving my toolset.

    -Mario

  • joybells

    Looking good. However, under Vendor-Specific Properties I find:
    -moz- Opera Software
    -o- Opera Software

    Really?

  • http://www.stoolball.co.uk Caterwomtious

    First impressions: Brilliant. This will be an essential every-day reference.

    What might make it better?

    1. As Mario suggests, examples of the various property values on a page that uses them so that the effect can be seen visually as well as described. Link to this page from the existing example box, perhaps?

    2. If my brief look around, in the compatibility section, I found a reference to the IE 3-pixel jog. The effect was described, but there was no mention of the well-known workaround, and the bug was not given its common name making it harder to Google for more info. Information on problems is useful, but not half as useful as it would be it there were also information on solutions.

    3. One problem I came across recently is the issue of legend elements not wrapping. I used this scenario as a test-case, and the CSS reference failed. The white-space property doesn’t mention this issue. I might expect to be able to look up element-specific problems indexed by the element name. Perhaps that is planned for the HTML reference your graphic hints at but it’s specifically CSS information I’m looking for, so a by-HTML-element index would be useful to support the by-CSS-property index.

  • http://www.afterlight.net.au AussieJohn

    Just had a brief look through it, I won’t make any suggestions, I believe some of the most important onces have been addressed already. Looking forward to its progression to live, I can see myself using this on a regular basis!

  • 0racle

    Hello, I have been signed up for the newsletters for a while and also bought the Build Your Own Web Site The Right Way Using HTML & CSS book. But I missed out on the forums so I cannot gain access. So.. I am begging to get into reference.sitepoint.com .

    Any chance? Thanks

  • JRM

    Like Oracle, I have bought through the SitePoint site and have been signed up for the newsletters for months. But I too have not signed up to the forum.

    Ahem… any chance of being admitted to reference.sitepoint.com ?

    Thanks

  • kat7

    Love this … great job and thanks for all your effort!

    It is bookmarked to probably use daily or at least when I can’t find a specific in my books from sitepoint.

    Why does the internet search seem so much easier :)

  • http://www.sitepoint.com/ Kevin Yank

    Monomomono,

    I print preview in landscape, and half the “y” in apply in the first sentence is cut off. Strange behavior.

    Any chance you haven’t set the ‘Scale’ drop-down menu in the Print Preview window to ‘Shrink to fit’?

  • http://www.sitepoint.com/ Kevin Yank

    mariov96,

    Provide a launch-able sample of the snippet being expressed so the user can confirm the behavior in their own browser/blend.

    This is definitely on our to-do list.

    Provide a verbose view of the support browser matrix. As new browsers come on to the scene users might like to use the sample (see above) and record their findings and thus help keep the matrix relevant.

    There is already a complete browser support matrix in the ‘Compatibility’ section of the page (scroll down to see it on most pages). Did you have something different in mind?

    Thanks for your feedback!

  • http://www.sitepoint.com/ Kevin Yank

    Caterwomtious,

    Thanks for your detailed feedback!

    2. If my brief look around, in the compatibility section, I found a reference to the IE 3-pixel jog. The effect was described, but there was no mention of the well-known workaround, and the bug was not given its common name making it harder to Google for more info. Information on problems is useful, but not half as useful as it would be it there were also information on solutions.

    I definitely agree! Hopefully user-contributed notes on pages like this will allow us to add references to common solutions/workarounds where they are missing.

    3. One problem I came across recently is the issue of legend elements not wrapping. I used this scenario as a test-case, and the CSS reference failed. The white-space property doesn’t mention this issue. I might expect to be able to look up element-specific problems indexed by the element name. Perhaps that is planned for the HTML reference your graphic hints at but it’s specifically CSS information I’m looking for, so a by-HTML-element index would be useful to support the by-CSS-property index.

    Figuring out where to document issues that lie at the intersection of HTML and CSS is a tricky one. Once we have the HTML Reference in place, it should be easier to see where things like this have slipped through the cracks. We will be relying in part on notes contributed by the user community to help us with this.

  • mariov96

    @Kevin Yank
    The compatibility section is a step in right direction. But how about the more obscure browsers like iphone, netscape, aol(ie blends), etc?

    Also add a link at the brief matrix to jump to the full version.

    If a element is partially implemented its buggy but if its not implemented at all is it unsupported or buggy?

    Keep up the good work!

  • mariov96

    Kevin,
    One more thing. You are missing the sitepoint favicon ;)

  • 0racle

    Hi Kevin. Any chance of getting in before the begining of the year? I wanted to do some stuff over the holiday break. I’ll be glad to comment on any bugs or help you guys need.

  • http://www.sitepoint.com/ Kevin Yank

    @mariov96,

    The compatibility section is a step in right direction. But how about the more obscure browsers like iphone, netscape, aol(ie blends), etc?

    In time, we’d like to include as much compatibility information as we can in the reference. What you see today is a starting point that we believed we could compile in a reasonable time frame.

    I would suggest that if you know of an obscure or derivative browser that has some interesting compatibility issue (e.g. if the iPhone browser differs from Safari 3 in a significant way), you might consider leaving a comment to this effect on the relevant page of the reference. We can then roll this information into the main reference page.

    Also add a link at the brief matrix to jump to the full version.

    This is an excellent idea! We’ll definitely to this.

    If a element is partially implemented its buggy but if its not implemented at all is it unsupported or buggy?

    We use four support levels in our reference:

    • None – the feature is unsupported
    • Buggy – the feature has some level of support, but is buggy or non-standards-compliant
    • Partial – the feature is partially supported, and the functionality that is supported is standards-compliant
    • Full – the feature is fully supported according to the current W3C recommendation

    One more thing. You are missing the sitepoint favicon ;)

    Good catch!