Html style="color: #FFF;" 渲染为#F0F0F0 或#FFFFFF？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2899197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does style="color: #FFF;" render as #F0F0F0 or #FFFFFF?
提问by Dolph
When defining colors using "shorthand hexidecimal" (style="color: #FFF;"), is there a defined method for expanding the shorthand? (style="color: #F0F0F0;"or style="color: #FFFFFF;")
使用“速记十六进制”( style="color: #FFF;")定义颜色时，是否有定义的扩展速记方法？(style="color: #F0F0F0;"或style="color: #FFFFFF;")
Do all browsers use the same expansion method? Is this behavior by specification (if so, where is it defined)? Does the expansion method perhaps vary between CSS 1/2/3?
所有浏览器都使用相同的扩展方法吗？这种行为是否符合规范（如果是，它是在哪里定义的）？CSS 1/2/3 之间的扩展方法可能有所不同吗？
I've observed that "most browsers" expand to #FFFFFF.
我观察到“大多数浏览器”扩展到#FFFFFF.
Are there any other places (outside of HTML/CSS) where this shorthand notation is allowed, but the expansion method is different?
是否还有其他地方（HTML/CSS 之外）允许使用这种速记符号，但扩展方法不同？
I've always avoided using shorthand hex, because I've never known the answers to these questions...
我一直避免使用速记十六进制，因为我从来不知道这些问题的答案......
回答by kennytm
CSS 2.1 (http://www.w3.org/TR/CSS2/syndata.html#value-def-color):
CSS 2.1 ( http://www.w3.org/TR/CSS2/syndata.html#value-def-color)：
The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
三位数 RGB 符号 (#rgb) 通过复制数字而不是通过添加零转换为六位数形式 (#rrggbb)。例如，#fb0 扩展为 #ffbb00。这确保可以使用短符号 (#fff) 指定白色 (#ffffff) 并消除对显示颜色深度的任何依赖。
Wordings of CSS 1, CSS 3are the same. The CSS 4 draftsay similar things.
CSS 1和CSS 3 的措辞是相同的。该CSS 4条草案说，类似的事情。
The Internet Explorerand Firefoxdocs state the same method.
在Internet Explorer中和Firefox的文档说明的方法相同。
As a practical example, please check out this snippet, which features 3 <div>s of styles
作为一个实际示例，请查看此代码段，其中包含 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>On Mac OS X 10.6, all Firefox 3.6, Opera 10.10, Safari 4 rendered #fffas #ffffff.
在 Mac OS X 10.6 上，所有 Firefox 3.6、Opera 10.10、Safari 4 都呈现#fff为#ffffff.
I don't see a reason why a browser or the standard wants to deviate from this expansion in the future, since the color #ffffffis far more common than #f0f0f0.
我看不出有什么理由让浏览器或标准在未来偏离这种扩展，因为颜色#ffffff远比#f0f0f0.
回答by Brian R. Bondy
The CSS2 specsection 4.3.6 Colors:
在CSS2规范第4.3.6颜色：
The RGB color model is used in numerical color specifications. These examples all specify the same color:
em { color: #f00 } /* #rgb */ em { color: #ff0000 } /* #rrggbb */ em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) }The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
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) 并消除对显示颜色深度的任何依赖。
Since all modern browsers support CSS you can assume it will work this way in your web sites and web applications.
由于所有现代浏览器都支持 CSS，您可以假设它会在您的网站和 Web 应用程序中以这种方式工作。
回答by Kevin Ivarsen
Testing on IE8, Firefox 3.6, and Google Chrome 5.0 beta, all three browsers repeat the hex digit:
在 IE8、Firefox 3.6 和 Google Chrome 5.0 beta 上测试，所有三个浏览器都重复十六进制数字：
- 000 produces 000000
- FFF produces FFFFFF
- 876 produces 887766
- 000 产生 000000
- FFF 产生 FFFFFF
- 876 产生 887766
...and so forth.
……等等。
回答by Jaryn
I feel I should encourage people to not do this, as it is equivalent to telling someone you want 15 of something and then expecting them to show up with 255. What a gross and strange way to shorthand 0xFFFFFF. This is the "r u there" of web design to me.
我觉得我应该鼓励人们不要这样做，因为这相当于告诉某人你想要 15 个东西，然后期望他们出现 255 个。 速记 0xFFFFFF 真是一种粗俗和奇怪的方式。这对我来说是网页设计的“ru there”。
回答by grimorde
I've not known a browser to not expand #FFF to #FFFFFF. I'd be interested in knowing which you think doesn't - or do you mean some continue to show #FFF?
我不知道浏览器不会将#FFF 扩展到#FFFFFF。我很想知道您认为哪些不是 - 或者您的意思是有些人继续显示#FFF？
However, as I understood it, the #FFF is valid shorthand, and #F0 would also (validly) expand to #F0F0F0.
然而，据我所知，#FFF 是有效的速记，#F0 也会（有效地）扩展为 #F0F0F0。
This might be of interest http://www.websiteoptimization.com/speed/tweak/hex/
