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 draft说出类似的话。

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 spec部分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。这确保了   白色（#ffffff）可以指定   短符号（#fff）并删除   任何依赖于颜色深度的   显示器。

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

Answer 3

在IE8，Firefox 3.6和Google Chrome 5.0测试中，所有三种浏览器都重复十六进制数字：

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

......等等。

Answer 4

我觉得我应该鼓励人们不要这样做，因为这相当于告诉别人你想要的东西然后期望它们出现在255.对于简写0xFFFFFF来说，这是多么粗略和奇怪的方式。这就是我对网页设计的“r u there”。

Answer 5

我不知道浏览器不会将#FFF扩展为#FFFFFF。我有兴趣知道你认为哪些没有 - 或者你的意思是某些人继续展示#FFF？

但是，据我所知，＃FFF是有效的简写，＃F0也会（有效地）扩展为＃F0F0F0。

这可能是有意义的http://www.websiteoptimization.com/speed/tweak/hex/