24 ways

to impress your friends

A Message To You, Rudy - CSS Production Notes by Andy Clarke

When more than one designer or developer work together on coding an XHTML/CSS template, there are several ways to make collaboration effective. Some prefer to comment their code, leaving a trail of bread-crumbs for their co-workers to follow. Others use accompanying files that contain their working notes or communicate via Basecamp.

For this year’s 24ways I wanted to share a technique that I has been effective at Stuff and Nonsense; one that unfortunately did not make it into the final draft of Transcending CSS. This technique, CSS production notes, places your page production notes in one convenient place within an XHTML document and uses nothing more than meaningful markup and CSS.

Let’s start with the basics; a conversation between a group of people. In the absence of notes or conversation elements in XHTML you need to make an XHTML compound that will effectively add meaning to the conversation between designers and developers. As each person speaks, you have two elements right there to describe what has been said and who has spoken: <blockquote> and its cite attribute.

  1. <blockquote cite="andy">
  2. <p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
  3. </blockquote>
  4. Source: /code/css-production-notes/1.txt

With more than one person speaking, you need to establish a temporal order for the conversation. Once again, the element to do just that is already there in XHTML; the humble ordered list.

  1. <ol id="notes">
  2. <li>
  3. <blockquote cite="andy">
  4. <p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
  5. </blockquote>
  6. </li>
  7. <li>
  8. <blockquote cite="dan">
  9. <p>Those bits are simple and bulletproof.</p>
  10. </blockquote>
  11. </li>
  12. </ol>
  13. Source: /code/css-production-notes/2.txt

Adding a new note is as simple as adding a new item to list, and if you prefer to add more information to each note, such as the date or time that the note was written, go right ahead. Place your note list at the bottom of the source order of your document, right before the closing <body> tag. One advantage of this approach over using conventional comments in your code is that all the notes are unobtrusive and are grouped together in one place, rather than being spread throughout your document.

Basic CSS styling

For the first stage you are going to add some basic styling to the notes area, starting with the ordered list. For this design I am basing the look and feel on an instant messenger window.

Stage 1

  1. ol#notes {
  2. width : 300px;
  3. height : 320px;
  4. padding : .5em 0;
  5. background : url(im.png) repeat;
  6. border : 1px solid #333;
  7. border-bottom-width : 2px;
  8. -moz-border-radius : 6px; /* Will not validate */
  9. color : #000;
  10. overflow : auto;
  11. }
  12.  
  13. ol#notes li {
  14. margin : .5em;
  15. padding : 10px 0 5px;
  16. background-color : #fff;
  17. border : 1px solid #666;
  18. -moz-border-radius : 6px; /* Will not validate */
  19. }
  20.  
  21. ol#notes blockquote {
  22. margin : 0;
  23. padding : 0;
  24. }
  25.  
  26. ol#notes p {
  27. margin : 0 20px .75em;
  28. padding : 0;
  29. }
  30.  
  31. ol#notes p.date {
  32. font-size : 92%;
  33. color : #666;
  34. text-transform : uppercase;
  35. }
  36. Source: /code/css-production-notes/3.txt

Take a gander at the first example.

You could stop right there, but without seeing who has left the note, there is little context. So next, extract the name of the commenter from the <blockquote>’s cite attribute and display it before each note by using generated content.

  1. ol#notes blockquote:before {
  2. content : " "attr(cite)" said: ";
  3. margin-left : 20px;
  4. font-weight : bold;
  5. }
  6. Source: /code/css-production-notes/4.txt

Fun with more detailed styling

Now, with all of the information and basic styling in place, it’s time to have some fun with some more detailed styling to spruce up your notes. Let’s start by adding an icon for each person, once again based on their cite. First, all of the first paragraphs of a <blockquote>’s that includes a cite attribute are given common styles.

  1. ol#notes blockquote[cite] p:first-child {
  2. min-height : 34px;
  3. padding-left : 40px;
  4. }
  5. Source: /code/css-production-notes/5.txt

Followed by an individual background-image.

  1. ol#notes blockquote[cite="Andy"] p:first-child {
  2. background : url(malarkey.png) no-repeat 5px 5px;
  3. }
  4. Source: /code/css-production-notes/6.txt

If you prefer a little more interactivity, add a :hover state to each <blockquote> and perhaps highlight the most recent comment.

  1. ol#notes blockquote:hover {
  2. background-color : #faf8eb;
  3. border-top : 1px solid #fff;
  4. border-bottom : 1px solid #333;
  5. }
  6.  
  7. ol#notes li:last-child blockquote {
  8. background-color : #f1efe2;
  9. }
  10. Source: /code/css-production-notes/7.txt

Stage 2

You could also adjust the style for each comment based on the department that the person works in, for example:

  1. <li>
  2. <blockquote cite="andy" class="designer">
  3. <p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
  4. </blockquote>
  5. </li>
  6. <li>
  7. <blockquote cite="dan">
  8. <p>Those bits are simple and bulletproof.</p>
  9. </blockquote>
  10. </li>
  11.  
  12. ol#notes blockquote.designer { border-color : #600; }
  13.  
  14. Source: /code/css-production-notes/8.txt

Take a look at the results of the second stage.

Show and hide the notes using CSS positioning

With your notes now dressed in their finest, it is time to tuck them away above the top of your working XHTML/CSS prototype so that you can reveal them when you need them, no JavaScript required. Start by moving the ordered list of notes off the top of the viewport leaving only a few pixels in view. It is also a good idea to make them semi-transparent by using the opacity property for browsers that have implemented it.

  1. ol#notes {
  2. position : absolute;
  3. opacity : .25;
  4. z-index : 2000;
  5. top : -305px;
  6. left : 20px;
  7. }
  8. Source: /code/css-production-notes/9.txt

Your last step is to add :hover and :focus dynamic pseudo-classes to reposition the list at the top of the viewport and restore full opacity to display them in their full glory when needed.

  1. ol#notes:hover, ol#notes:focus {
  2. top : 0;
  3. opacity : 1;
  4. }
  5. Source: /code/css-production-notes/10.txt

Stage 3

Now it’s time to sit back, pour yourself a long drink and bask in the glory of the final result. Your notes are all stored in one handy place at the bottom of your document rather than being spread around your code. When your templates are complete, simply dive straight to the bottom and pull out the notes.

A Message To You, Rudy

Thank-you to everybody for making this a really great year for web standards. Have a wonderful holiday season.

Buy Andy Clarke’s book Transcending CSS from Amazon.com

About the author

Andy Clarke Andy Clarke has been working on the web for almost ten years. He is a visual web designer based in the UK and started his design consultancy Stuff and Nonsense in 1998. As lead designer and creative director, his clients include national and international businesses, charities and government bodies and he has designed for The British Heart Foundation, Disney Store UK, Save The Children and WWF UK. Andy is a member of the Web Standards Project where he redesigned the organization's web site in 2006. He is also an Invited Expert to the W3C's CSS Working Group and author of Transcending CSS: The Fine Art Of Web Design published by New Riders.

Your comments

  1. § Nick Toye:

    Good idea would certainly help explain to non css people what I am doing or how I am doing it.

    There seems to be a bug though in Safari, the names appear twice once you start scrolling. It will say:

    Andy said:
    Andy said:

  2. § Jeroen Zaalberg:

    Well, what can I say. Looks fancy but don’t know if it’s gonna work in real life, scrolling back and forth through the source code.

    On the other hand it’s nice to see something very different, especially using the tools that you’re normally use at their best purpose for your client but now in strict compliance for yourself, too .

    But isn’t there a typo with the blockquote (which, also, to my limited knowledge should have a in it for text, to be strict): In the 8th code-block the opening tag of the blockquote isn’t closed properly and has a – element in it.

    Thanks for the fresh idea!

    Jeroen Zaalberg

    (and I hope to pick up your book, which looks great, in the near future)

  3. § Drew McLellan:

    Jeroen – typo corrected. It was an error on my part getting the article ready for publication. Thanks for pointing it out!

  4. § Christian Ready:

    This is really impressive work, and I can see how having that, coupled with a dynamic form entry would allow a team to easily add notes during the project’s development. What I think could get tricky, though, is trying to dynamically figure out how many pixels the notes stack should be moved up in order to get it out of the way of the page.

  5. § adriand:

    Nice idea! Keep the notes around somewhere once removed though. They’ll be useful to maintainers in the future.

  6. § Gordon Burnett:

    This looks great and works well in Firefox, etc. But doesn’t seem to work at all in IE, the notes wont pop down and the scrollbar on the main page doesn’t work.

    I’m guessing this is to do with the way IE handles the hover and z-index classes, not a huge issue but be nice to have it working across all browsers as in the real world it may be used so a contact at the client’s office, etc could leave notes on how they feel the project is progressing. Anyone know if it’s possible to get it working?

    Great article though, most interesting to me so far.

  7. § Malarkey:

    Hi Gordon,

    I’m assuming that a great many CSS designers and developers will be using Firefox (or similar) as their development browser, and so there was no attempt to make this work in Internet Explorer 6.

  8. § Tomas Caspers:

    Thanks, Andy, now I can’t get this song out of my head :-)

    Still, thanks for sharing this great technique!

  9. § Matthijs:

    Very nice. And might even be useful. But it’s certainly cool to see something like this done with css. Your book just arrived this week Andy, it’s beautiful!

  10. § Nick Fitzsimons:

    Very nice technique. One potential issue is that scrolling the page makes the notes inaccessible; using “position: fixed;” instead of “position: absolute;” in the rules for ol#notes keeps them available whatever the vertical position of the page.

  11. § Francis Storr:

    According to the spec, the only allowed value for the cite attribute is a URI of the originating document or text that’s being quoted, which spoils this otherwise really nice tutorial.

  12. § Drew McLellan:

    Francis – the examples give valid URIs as values for cite. For instance, if your document lived at http://example.com/products/, a cite value of ‘andy’ would resolve to http://example.com/products/andy.

  13. § Roger Johansson:

    Nice!

    The Safari bug can be fixed by adding “display:block” to the “ol#notes blockquote:before” rule.

  14. § Malarkey:

    Drew’s right (as usual). If you wanted to, you could include the URL of that person’s web site and use attribute selectors to bind the cite to the style rules, but as this is generally a technique that is used internally, that might be a little over zealous ;)

  15. § Jordan Kasteler:

    I wonder how many people got The Specials pun in the headline? How many SEOs are true ska fans? Not many. Hup hup pick-it-up

  16. § Francis Storr:

    Ah yes, good point; I hadn’t thought of that, Drew. That’ll teach me to stop lurking and trying to be clever…

  17. § Mats Lindblad:

    Why not use Andy Budd’s technique for the rounded corners

    Be nice too most of the browsers that are being nice to us ;)

  18. § Chriztian Steinmeier:

    I just thought the actual quotes were hilarious :-)

    I think I’d use TextMate’s “Persistent Includes” for this, to keep the actual messages in a separate file.

  19. § Nate K:

    Looks like a very nice technique. I personally don’t have a use for it at this point, but I am sure this could help many people out there trying to manage projects. I like that it keeps everything central. Now, integrate it with basecamp and there will be a 2 way connection and the ease will still be there (just a far thought).

    Seriously, I love the work just for its innovation.

  20. § Jeffrey Sambells:

    Great idea. I use subversion for development so I’ve created a quick little PHP script to convert a file’s subversion log into notes as described above.

  21. § Kabari:

    You can rock this is Safari etc too with -webkit-border-raius: #px; just in case you have beef with FireFox or something, all the other properties mentioned would work on there as well. That property should work in all of the Webkit based browsers just like moz

Commenting is closed for this article.

24 ways: day 15