Rel-License 是微格式的开发标准之一，简单的说就是通过给引用标签（通常是链接）加上REL属性，来标明所引用链接/数据与文章的关系。

WordPress很早就引入了rel标准，在我们添加新链接的时候就可以看到“关系”属性。

早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系，但它对网页开发来说并无意义，值得庆幸的是随着浏览器的逐渐升级，我们可以利用CSS属性选择器以及REL来做一些有意思的功能。

这是一段带有REL属性的HTML结构。

<ul>
<li><a href="#" rel="civil">小李</a></li>
<li><a href="#" rel="party">局长</a></li>
</ul>

页面中他呈现这个样子

因为局长和小李是两个不同的阶级，所以我们应该有区分他们，我打算在小李和局长后面增加两张图片让他表现出这个样式。

过去，我们需要在两个链接标签上增加不同的class来实现这种样式，并且我们需要针对不同的样式书写不同的CSS

 .c,.b {background:url(01.png) right center no-repeat;}
 .b {background-image:url(02.png);}

<ul>
<li><a href="#" rel="civil" class="c">小李</a></li>
<li><a href="#" rel="party" class="b">局长</a></li>
</ul>

现在，我们可以利用REL属性以及属性选择器来完成这个工作。

a[rel~="civil"]{background:url(01.png) right center no-repeat;}
a[rel~="party"]{background:url(02.png) right center no-repeat;}

同时，我们的HTML结构也可以剔除那些多余的样式了。

<ul>
<li><a href="#" rel="civil">小李</a></li>
<li><a href="#" rel="party">局长</a></li>
</ul>

另外:ie6不支持属性选择器，但我们可以用JS来修复这个问题。

WCAG 2.0 requires that the foreground and background colors have a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level AAA. You can use our contrast checker tool to determine what the ratio is between any foreground and background color.

WCAG 2.0 also requires (at Level A) that color not be used as the sole method of conveying content or distinguishing visual elements. They further define this requirement for links with Technique G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.” This means that if you do not underline your links (or provide some other non-color designator for links), that the links must be sufficiently different in contrast from the surrounding text.

So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:

• A 4.5:1 contrast between the non-link text color and the background.
• A 4.5:1 contrast between the link text color and the background.
• A 3:1 contrast between the link text color and the surrounding non-link text color.

In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background color.

点击这里查看文章详细 »

在小飞的博客上看到他写了一篇关于reset.css的文章，文章中关于css的部分分析的非常不错，但对于文中关于强调把CSS分别配置，对每一个项目都放置一个reset.css这一类观点，我有不同的看法。

诚然，将reset的东西只写进reset.css里，将layer的东西只写进layer.css里，将represent的东西只写进represent.css在思想是没有错的，但是他并没有考虑到一点，那就是成本。

yahoo搞了一个YUI，可是你在Yahoo的主页上能看到YUI的
吗？没有，访问一下google，看看他所有的页面里面有reset这样的东西吗？没有。为什么？成本。

Eric作为个人，可以搞reset.css，YUI作为推动，可以搞reset.css，但是一个网站的架构，是否都应该一股脑的用reset.css？这是根据公司的实际情况来做看的。

让我们以Yahoo为例，我们假定当前我们访问的服务器最大支持2500次并发/秒（不考虑squid，memcache这些东西），当用户访问首页的时候，一共多少个并发？

就目前的情况，一共是26次请求，耗时2.56秒。记做A。

ok，假设yahoo增加了一个reset.css，请求数增加到27次，耗时2.57秒。记做B。

A每秒请求服务器 26 / 2.56 = 10.15 次/秒

B每秒请求服务器 27 / 2.57 = 10.50 次/秒

在A的情况下，1万元的服务器每秒最大支持 2500/10.15 = 246.30 人；
在B的情况下，1万元的服务器每秒最大支持 2500/10.50 = 238.09 人；

换句话说，B运营成本相对于A增加了 （246.30-238.09）/ 246.30 × 10000 = 333.32 元。

仅仅是增加了这样一个文件，我就要多支出333.33元，这样划算吗？

如果按照文中的想法，还要将其他的样式都分门别类的独立出去，那么成本的增长将会是多么可怕的“弧度”

所以“每每有新项目，第一步就是应当使用一个reset.css来重置样式。”，“建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css”还是应该有所选择的去做。