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.
<blockquote cite="andy">
<p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
</blockquote>
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.
<ol id="notes">
<li>
<blockquote cite="andy">
<p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
</blockquote>
</li>
<li>
<blockquote cite="dan">
<p>Those bits are simple and bulletproof.</p>
</blockquote>
</li>
</ol>
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.
ol#notes {
width : 300px;
height : 320px;
padding : .5em 0;
background : url(im.png) repeat;
border : 1px solid #333;
border-bottom-width : 2px;
-moz-border-radius : 6px; /* Will not validate */
color : #000;
overflow : auto;
}
ol#notes li {
margin : .5em;
padding : 10px 0 5px;
background-color : #fff;
border : 1px solid #666;
-moz-border-radius : 6px; /* Will not validate */
}
ol#notes blockquote {
margin : 0;
padding : 0;
}
ol#notes p {
margin : 0 20px .75em;
padding : 0;
}
ol#notes p.date {
font-size : 92%;
color : #666;
text-transform : uppercase;
}
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.
ol#notes blockquote:before {
content : " "attr(cite)" said: ";
margin-left : 20px;
font-weight : bold;
}
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.
ol#notes blockquote[cite] p:first-child {
min-height : 34px;
padding-left : 40px;
}
Followed by an individual background-image.
ol#notes blockquote[cite="Andy"] p:first-child {
background : url(malarkey.png) no-repeat 5px 5px;
}
If you prefer a little more interactivity, add a :hover state to each <blockquote> and perhaps highlight the most recent comment.
ol#notes blockquote:hover {
background-color : #faf8eb;
border-top : 1px solid #fff;
border-bottom : 1px solid #333;
}
ol#notes li:last-child blockquote {
background-color : #f1efe2;
}
You could also adjust the style for each comment based on the department that the person works in, for example:
<li>
<blockquote cite="andy" class="designer">
<p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
</blockquote>
</li>
<li>
<blockquote cite="dan">
<p>Those bits are simple and bulletproof.</p>
</blockquote>
</li>
ol#notes blockquote.designer { border-color : #600; }
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.
ol#notes {
position : absolute;
opacity : .25;
z-index : 2000;
top : -305px;
left : 20px;
}
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.
ol#notes:hover, ol#notes:focus {
top : 0;
opacity : 1;
}
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
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
15/12/2006
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:
Vote Helpful or Unhelpful
15/12/2006
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)
Vote Helpful or Unhelpful
15/12/2006
Jeroen – typo corrected. It was an error on my part getting the article ready for publication. Thanks for pointing it out!
Vote Helpful or Unhelpful
15/12/2006
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.
Vote Helpful or Unhelpful
15/12/2006
Nice idea! Keep the notes around somewhere once removed though. They’ll be useful to maintainers in the future.
Vote Helpful or Unhelpful
15/12/2006
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.
Vote Helpful or Unhelpful
15/12/2006
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.
Vote Helpful or Unhelpful
15/12/2006
Thanks, Andy, now I can’t get this song out of my head :-)
Still, thanks for sharing this great technique!
Vote Helpful or Unhelpful
15/12/2006
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!
Vote Helpful or Unhelpful
15/12/2006
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.
Vote Helpful or Unhelpful
16/12/2006
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.
Vote Helpful or Unhelpful
16/12/2006
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.Vote Helpful or Unhelpful
17/12/2006
Nice!
The Safari bug can be fixed by adding “display:block†to the “ol#notes blockquote:before†rule.
Vote Helpful or Unhelpful
17/12/2006
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 ;)
Vote Helpful or Unhelpful
17/12/2006
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
Vote Helpful or Unhelpful
18/12/2006
Ah yes, good point; I hadn’t thought of that, Drew. That’ll teach me to stop lurking and trying to be clever…
Vote Helpful or Unhelpful
18/12/2006
Why not use Andy Budd’s technique for the rounded corners
Be nice too most of the browsers that are being nice to us ;)
Vote Helpful or Unhelpful
18/12/2006
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.
Vote Helpful or Unhelpful
18/12/2006
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.
Vote Helpful or Unhelpful
19/12/2006
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.
Vote Helpful or Unhelpful
25/12/2006
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
mozVote Helpful or Unhelpful
Impress us