由于您对“为什么会发生这种情况的科学原理感兴趣,是否有解释”...
简而言之:
“颜色值”不是“通用”的。
CSS规范中描述了缩写/简写的三位十六进制#RGB
格式,而非HTML规范。因此,在“style”以外的属性或<style>
标签内的三位数形式在某些浏览器中不能被解释为有效的颜色。
https://en.wikipedia.org/wiki/Web_colors
详细说明:
我从CSS 1 spec, Color units (6.3)开始(因为它介绍了一些术语/概念,我随后就不必重复),该规范指定:
A color is a either a keyword or a numerical RGB specification.
The suggested list of keyword color names is: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white, and yellow. These 16 colors are taken from the Windows
VGA palette, and their RGB values are not defined in this
specification.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is being used in numerical color specifications.
These examples all specify the same color:
EM { color: #f00 }
EM { color: #ff0000 }
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 makes sure that white (#ffffff
) can be
specified with the short notation (#fff
) and removes any dependencies
on the color depth of the display.
The format of an RGB value in the functional notation is 'rgb(
'
followed by a comma-separated list of three numerical values (either
three integer values in the range of 0-255, or three percentage values
in the range of 0.0% to 100.0%) followed by ')
'. Whitespace characters
are allowed around the numerical values.
Values outside the numerical ranges should be clipped. The three rules
below are therefore equivalent:
EM { color: rgb(255,0,0) }
EM { color: rgb(300,0,0) }
EM { color: rgb(110%, 0%, 0%) }
RGB colors are specified in the sRGB color space. UAs may vary in the
fidelity with which they represent these colors, but use of sRGB
provides an unambiguous and objectively measurable definition of what
the color should be, which can be related to international standards.
在CSS的上下文中,关于浏览器支持,我能找到的唯一两个“有趣”的事情是:
- 所有支持样式表(版本3及以上,除了IE3 Mac)的浏览器都支持这种三字符十六进制颜色的简写形式(来源:1,2,King A.B.的“优化CSS颜色”)
请注意该文本的历史时间范围... IE3... 在Mac上...像FireFox 1或Chrome这样的浏览器甚至还不存在。
- 两种
rgb()
方法不受Internet Explorer 3的支持
来源:1(非常好的阅读材料)
根据
HTML4规范,属性bgcolor
仅适用于
<body>
、
<table>
、
<tr>
、
<th>
和
<td>
。(因此,就传统规范而言,例如在
<div>
上使用它是不允许的。)
它们全部都是
CDATA
类型:
%Color;
其
定义为:
<!ENTITY % Color "CDATA" -- a color using sRGB: #RRGGBB as Hex values -->
<!-- There are also 16 widely known color names with their sRGB values:
Black = #000000 Green = #008000
Silver = #C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia= #FF00FF Aqua = #00FFFF
-->
The magic phrase here is: "
使用sRGB:#RRGGBB作为十六进制值的颜色"。
如果我戴上规格实现者的帽子读这个,我必须同意我没有看到简写的3位数#RGB
符号规定,我也不会实现它(我也不会实现RGB(DDD,DDD,DDD)
)。
至于
HTML5,所有先前(HTML4)指定的元素的bgcolor
属性都已过时(参见上文)。这意味着,就规范而言,有效的“颜色代码”的格式不会很快改变。
结论:
接受HTML属性bgcolor
上的命名颜色(从指定/支持列表中)或“十六进制三元组”(格式为#RRGGBB
)sRGB颜色值,这不是错误;这是规范要求!
跨浏览器解决方案:...请参见规范☺
如果在不支持缩写颜色值的解析/渲染引擎上错误地指定了
bgcolor
的缩写颜色值,则可能什么都不会发生,或者会显示一个意外的颜色; 事实上,您已经进入了
'Chuck Norris' -land。最值得注意的是对于MS IE和MS Outlook,颜色看起来几乎是黑色的。例如:
#ff0
(缩写)将变成
#0f0f00
(而不是
#ffff00
)。另一个例子:
#07c
将变成
#00070c
等。
然而一些其他实现将
#ff0
转换为
#000ff0
,将
#07c
转换为
#00007c
!如果错误地为
bgcolor
指定了
RGB(RRR,GGG,BBB)
值,则可能出现各种颜色,例如
RGB(255,255,255)
可能会变成非常深的绿色阴影
source等。
这里有一个有趣的例子,微软的Internet Explorer(包括IE11在内的所有已知版本)确实遵循了规范,但仍然有很多人抱怨..
我发现了无数关于"使用3位数字颜色值简写 'bug' 来设置 bgcolor
属性"的 bug 报告(跨越15年),这些报告针对的是例如 MS IE、使用 MS IE HTML 解析/渲染引擎的替代浏览器以及绝大多数本地应用程序/基于Web的电子邮件客户端,如 Gmail、(所有版本的)Outlook(-Express)、Lotus Notes、Android等等等等。(例如1, 2, 3, 4, 5等)
为什么会有投诉/错误报告?
因为一些其他浏览器(如FireFox,Chrome)在HTML的属性bgcolor
中支持颜色值的格式不仅限于#RRGGBB
。
为什么其他浏览器支持它?
我只有两个猜测:(a)这是“BrowserWar 1”留下的遗产之一,其中一场战斗是围绕“我的浏览器可以理解比竞争对手更大的垃圾代码”,但更有可能的是(b)重新使用CSS颜色值解析器的代码... 最终我也会这样做
额外:
为什么在2015年还有人关心bgcolor
?
为什么这仍然会引发如此多的错误报告和问题?
答案是HTML电子邮件...
理论上(对于不知情的Web开发人员)它只是“HTML和CSS”..
实际上,这非常难以做到(1)。想象一下:所有曾经存在的跨浏览器问题都乘以3倍!
它必须在更多的电子邮件客户端和众多平台上运行(许多“遗留”应用程序实际上仍在使用),还必须在像Gmail、AOL、Yahoo、Hotmail等等的基于Web的客户端中运行。
他们不仅必须为可想象的最低公共分母编写代码(很多技术已经被认为是古老的了),他们甚至必须尝试与一些基于Web的客户端的布局/样式“融合”。
他们的典型结构是一个大的背景表格,然后是一个div,接着是一个主要的表格,如果需要还有嵌套表格...更进一步地说,根据
litmus(anno 2014)的说法:
“
事实证明,编写背景颜色最可靠的方法是在表格和td级别上使用HTML bgcolor
属性和6位十六进制代码”
显然这个“混乱”不会很快消失,对于Web开发人员来说,编写/设计HTML电子邮件是很常见的事情...因此,我认为在2015年和不久的将来,全面理解和回答这个问题仍然非常相关。
希望这可以帮到你!
PS:MS IE的filter: progid:DXImageTransform.Microsoft.gradient
也不接受3位十六进制简写颜色值,但现在我们想起了“颜色值不是通用的”这个概念,这就不那么令人惊讶了(除非指定它会接受这样的值,否则不是bug)。
bgcolor
的无效值时获得可预测的统一结果(然后谈论CSS...)。 - GitaarLAB