CSS产品注释

读者： 1180    发布时间： 2007
  只浏览译文    English <-> Chinese(simplified) 双语阅读
译文平均得分
0 分（共0人投票）
fold折叠 unfold展开

原文: CSS Production Notes

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.

译文: CSS产品注释

如果多个设计师或者开发者一起合作完成一份XHTML/CSS模版，那么通常会有好几种方法，来让合作变得更为有效。一些人喜欢在编码后面添加注释，留下很长一串看起来很烦琐的内容，让他们的合作者去跟进。还有一些人，将他们的注释写入其他文件，伴随着编码一同给合作者，或者通过Basecamp进行交流。

今年的24种方式，是我想与大家一起分享的一种技术，并且我已经在Stuff and Nonsense有效地实行过。不幸的是，这并没有收录到Transcending CSS一书中去。“CSS产品注释”这个技术，让你的产品注释页以一个XHTML文件在一个方便的地方展示，无需其他辅助工具，就能更有意义。

让我们先从基本的开始：在一群人之间的交谈。在XHTML中，如果缺少注释和交谈的元素，你就需要制作一个XHTML混合物，去更有效地在设计师和开发者之间添加有意义的谈话内容。像每个人说话那样，在这里你需要两个元素去描述“说了些什么”，以及“是由谁来说的”：<blockquote>和它的引证特性。
  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
超过一个人说话时，你需要为这个谈话建立一个时间上的次序。再者，元素要做的，是在XHTML中已经存在的；粗陋有序的清单。
  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

在列表中，添加一个新的注释，就像添加一个新的项目那样的简单。如果你喜欢在每个注释里都添加许多的信息（比如说，类似日期或者时间），也没有问题。将你的注释列表放在你文件来源命令的底部，在结束的<body>标签前。这个方式比起在编码中使用传统的注释的优势是，所有的注释都不是突出显示的，而且都集中在一个地方，而不是凌乱地贯穿了你的整个文件。

基本的CSS式样

第一步，你要在注释区域里，添加一些基本的式样，以有序的列表开始。这项设计，我是以外观为基础，感觉像一个即时通讯的窗口。

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

看看这里的 第一个例子。
你可以在这里停下来了，但是不能看到是谁留下了这个注释，这需要有点上下文的关系。所以接下来，从<blockquote>的引证属性中，提炼出注释者的姓名，并且通过利用产生的内容，再每个注释前面展示。

  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

更多有趣的详细的式样

现在，所有的信息和基本式样都已经到位，是时候用一些有趣的、更详细的样式去修饰你的注释。让我们先为每个人添加一个图标，然后在他们的引证上也这样重复添加一次图标。首先，所有的<blockquote>的开头的第一段，都包含了一个引证属性，给出了普通的样式。

  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

跟随一个个人背景图片。

  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

如果你喜欢更多一点的互动，在每个<blockquote>后，添加一个a :hover的状态，或许可以突出最新的注释。

  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

你也可以以每个人工作的部分为基础，调整每个注释的式样，比如：
 

  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

看看第二步的结果。

利用CSS配置，显示和隐藏注释
现在你的注释看起来非常的好，是时候将你写的XHTML/CSS注释的原形隐藏起来了，你可以在你需要的时候再把它们释放出来，无需JavaScript。开始将注释的规则列表从顶部挪开，只留下可以看见的几个象素。这也是一个非常好的想法，通过利用对浏览者不透明的特性，去让他们半透明性，去实现它。

  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

你要做的最后一步是去添加:hover和:focus动态伪类，在视口的顶部重新配制列表，并且在需要时，修复全部的不透明性，去展示它们。

  1. ol#notes:hover, ol#notes:focus {
  2. top : 0;
  3. opacity : 1;
  4. }
  5. Source: /code/css-production-notes/10.txt
  6. Stage 3
    7. 做了以上的步骤后，你的注释就全都被保存在你文件的底部的，而不是散落在整个编码里。当你的模版完成后，直接到最后，删除你的编码。
奖励翻译积分 3分     
该篇译作共有0个评论，您还未登录，暂时无法查看 登录 注册

翻译：

Find translators Chinese to English translatorsJapanese to English translatorsFrench to English translators
Translation Community Source PoolTranslation PoolSubjectRecommend SourceRecommend & Translate Dictionary
Profile ProjectElanPayResumeMessages
User AgreementPrivacy Policy About UsContact Us Partners

Copyright © www.elanso.com 沪B2-20060389