style ="color:#FFF;" 渲染为#F0F0F0或#FFFFFF？

Question

使用"速记十六进制"(style="color: #FFF;")来定义颜色时,是否有一种用于扩展速记的定义方法？(style="color: #F0F0F0;"或style="color: #FFFFFF;")

所有浏览器都使用相同的扩展方法吗？这种行为是否符合规范(如果是这样,它在哪里定义)？CSS 1/2/3之间的扩展方法可能有所不同吗？

我观察到"大多数浏览器"扩展到了#FFFFFF.

是否允许使用此简写符号的其他地方(HTML/CSS之外),但扩展方法有所不同？

我一直避免使用速记十六进制,因为我从来不知道这些问题的答案......

Answer 1

CSS 2.1(http://www.w3.org/TR/CSS2/syndata.html#value-def-color):

三位RGB表示法(#rgb)通过复制数字而不是通过添加零来转换为六位数形式(#rrggbb).例如,#fb0扩展为#ffbb00.这确保可以使用短符号(#fff)指定白色(#ffffff)并删除对显示颜色深度的任何依赖性.

CSS 1,CSS 3的措辞是相同的.该CSS 4条草案说,类似的事情.

在Internet Explorer中和Firefox的文档说明的方法相同.

作为一个实际的例子,请查看此片段,其中包含3 <div>个样式

div { width: 100px; height: 100px;  }

<div style="background-color:#f0f0f0;">#f0f0f0</div>
<div style="background-color:#fff;">#fff</div>
<div style="background-color:#ffffff;">#ffffff</div>

在Mac OS X 10.6上,所有Firefox 3.6,Opera 10.10,Safari 4都呈现#fff为#ffffff.

我没有看到为什么浏览器或标准希望将来偏离这种扩展的原因,因为颜色#ffffff远比它更常见#f0f0f0.

Answer 2

在CSS2规范第4.3.6颜色:

RGB颜色模型用于数字颜色规范.这些示例都指定了相同的颜色:

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

十六进制表示法的RGB值格式为"#"后紧跟三个或六个十六进制字符.三位RGB表示法(#rgb)通过复制数字而不是通过添加零来转换为六位数形式(#rrggbb).例如,#fb0扩展为#ffbb00.这确保可以使用短符号(#fff)指定白色(#ffffff)并删除对显示颜色深度的任何依赖性.

由于所有现代浏览器都支持CSS,因此您可以假设它将在您的网站和Web应用程序中以这种方式工作.

Answer 3

在IE8,Firefox 3.6和Google Chrome 5.0 beta上进行测试,所有三种浏览器都重复十六进制数字:

• 000产生000000
• FFF产生FFFFFF
• 876产生887766

......等等.