style =“color:#FFF;”渲染为#F0F0F0或#FFFFFF?

当使用“shorthand style="color: #FFF;" ”( style="color: #FFF;" )定义style="color: #FFF;" ,是否存在扩展速记的定义方法? ( style="color: #F0F0F0;"style="color: #FFFFFF;"

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

我发现“大多数浏览器”扩展到#FFFFFF

有没有其他的地方(HTML / CSS以外)允许这种简写符号,但扩展方法是不同的?

我总是避免使用速记hex,因为我从来不知道这些问题的答案…

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

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

CSS 1 , CSS 3的措辞是一样的。 CSS 4草案说了类似的事情。

Internet Explorer和Firefox文档陈述相同的方法。

作为一个实际的例子,请看这个片段,其中有3 <div> s的样式

 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> 

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%) } 

以hex符号表示的RGB值的格式是紧跟着三个或六个hex字符的“#”。 三位RGB符号(#rgb)通过复制数字转换为六位数字forms(#rrggbb),而不是通过添加零。 例如,#fb0展开为#ffbb00。 这确保了可以使用短符号(#fff)指定白色(#ffffff),并删除显示颜色深度的任何依赖关系。

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

在IE8,Firefox 3.6和Google Chrome 5.0testing版中,所有三个浏览器重复hex数字:

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

…等等。

我觉得我应该鼓励人们不要这样做,因为这相当于告诉某人你想要15个东西,然后期待他们用255出现。多么糟糕的方法来缩写0xFFFFFF。 这是网页devise的“ru there”给我的。

我不知道一个浏览器不扩展#FFF到#FFFFFF。 我有兴趣知道你认为没有 – 或者你的意思是一些继续显示#FFF?

然而,据我所知,#FFF是有效的速记,#F0也将(有效地)展开到#F0F0F0。

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