Style = “ color: # FFF;”呈现为 # F0F0F0还是 # FFFFFF？

当使用“速记十六进制”(style="color: #FFF;")定义颜色时，是否有定义的方法来展开速记? (style="color: #F0F0F0;"或 style="color: #FFFFFF;")

是否所有浏览器都使用相同的扩展方法？这种行为是否按照规范(如果是，在哪里定义) ？展开方法可能在 CSS 的1/2/3之间变化吗？

我观察到“大多数浏览器”扩展到 #FFFFFF。

除了 HTML/CSS 之外，是否还有其他地方允许使用这种速记符号，但是展开方法不同？

我一直避免使用速记巫术，因为我从来不知道这些问题的答案..。

61470 次浏览
小开

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。这样可以确保 白色(# ffffff)可以用 短符号(# fff)和移除 颜色深度的任何依赖性 展览。

因为所有的现代浏览器都支持 CSS，所以你可以假设它在你的网站和网络应用程序中都是这样工作的。

小开
最佳答案

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

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

CSS 1和 CSS3的词汇是一样的。 CSS 4草稿说类似的东西。

Internet Explorer和 火狐文档声明了相同的方法。

作为一个实际的例子，请查看这个代码片段，它具有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。

Behavior in different browsers

我不明白为什么浏览器或者标准要在将来偏离这种扩展，因为颜色 #ffffff比 #f0f0f0更常见。

小开

我不知道哪个浏览器不能把 # FFF 扩展成 # FFFFFF。我很有兴趣知道你认为哪些不是——或者你的意思是一些继续显示 # FFF？

但是，据我理解，# FFF 是有效的速记，# F0也将(有效地)扩展为 # F0F0F0。

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

小开

在 IE8，Firefox 3.6和 Google Chrome 5.0测试版中，这三个浏览器都重复了十六进制数字:

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

等等。

小开

我觉得我应该鼓励人们不要这样做，因为这相当于告诉别人你想要15份东西，然后期望他们拿着255份出现。多么恶心和奇怪的速记方式啊。对我来说，这就是网页设计的“ r u there”。


提交答案