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。