题 为什么HTML认为“chucknorris”是一种颜色?


当在HTML中作为背景颜色输入时,某些随机字符串如何产生颜色?例如:

<body bgcolor="chucknorris"> test </body>

...生成一个带有文档的文档 红色背景 跨所有浏览器和平台。

有趣的是,虽然 chucknorri 也产生红色背景, chucknorr 产生黄色背景。

这是怎么回事 这里


6549
2017-11-29 22:54


起源


作为旁注:不要使用 bgcolor。使用CSS background。 - John Dvorak
为什么你想要添加一个叫做的背景颜色 chucknorris?预期的颜色是什么? - masterFly
@masterFly:我不知道为什么我在接受的答案下的评论因为“没有建设性”而被删除,因为它很好地回答了你的问题:人们一直在试验这些事情。当我发现这一点时,我只有10岁,当时我正在做的事情一直在乱搞,看看发生了什么。你并不总是有一个做某事的实际理由,特别是像这样轻浮的事情。 - BoltClock♦
和 <body bgcolor="stevensegal"> test </ body>是绿色的 - Chris
大!我现在就开始使用它。每当我实际尝试输入红色时,它自动完成重新启动。 PS谷歌它,如果你不知道的故事。 - Simon_Weaver


答案:


这是Netscape时代的延续:

丢失的数字被视为0 [...]。不正确的数字简单地解释为0.例如,值#F0F0F0,F0F0F0,F0F0F,#FxFxFx和FxFxFx都是相同的。

它来自博客文章 关于Microsoft Internet Explorer的颜色解析有点咆哮 它详细介绍了它,包括不同长度的颜色值等。

如果我们依次从博客文章中应用规则,我们会得到以下信息:

  1. 用0替换所有无效的十六进制字符

    chucknorris becomes c00c0000000
    
  2. 填写下一个可被3整除的字符总数(11 - > 12)

    c00c 0000 0000
    
  3. 分成三个相等的组,每个组件代表RGB颜色的相应颜色分量:

    RGB (c00c, 0000, 0000)
    
  4. 将每个参数从右向下截断为两个字符

这给出了以下结果:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

这是一个展示的例子 bgcolor 在行动中的属性,以产生这个“惊人的”色样:

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

这也回答了问题的其他部分;为什么 bgcolor="chucknorr" 产生黄色?好吧,如果我们应用规则,字符串是:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

这给出了淡黄色的金色。当字符串以9个字符开始时,我们这次保持第二个C,因此它最终成为最终的颜色值。

当有人指出你可以做的时候我最初遇到过这种情况 color="crap" 而且,它出来了棕色。


6051
2017-11-30 21:53



请注意,尽管该博客文章说,当你处理3-char字符串时,你 重复 每个字符,而不是前置0.即 0F6 变 #00FF66不是 #000F06。 - Aaron Dufour
@usr:HTML是故意忽略格式错误的输入;) - Kevin Ballard
你也可以用我的 随机字符串到css颜色 转换器获取特定字符串的颜色。它基于 由Jeremy Goodell计算字符串颜色的5个步骤。 - TimPietrusky
一个隐藏的语义机会?你可以用这个做一些错误页面: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span> 你可以添加一个div与其他背景或类似的东西,所以这不是美学上令人震惊的。 - Theraot
@Theraot bgcolor="success" 也是一个很好的绿色。有趣的是, 可以使用CSS属性/值选择器覆盖这些颜色 (例如。, td[bgcolor="chucknorris"] {...})。 - megaflop


我很抱歉不同意,但根据解析发布的遗留颜色值的规则 @Yuhong Baochucknorris 不等于 #CC0000,而是 #C00000,一种非常相似但略有不同的红色色调。我用了 Firefox ColorZilla插件 验证这一点。

规则规定:

  • 通过添加0,使字符串的长度为3的倍数: chucknorris0
  • 将字符串分成3个相等长度的字符串: chuc knor ris0
  • 将每个字符串截断为2个字符: ch kn ri
  • 保留十六进制值,并在必要时添加0: C0 00 00

我能够使用这些规则来正确解释以下字符串:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle 

更新: 原来的回答者说颜色是 #CC0000 从那以后编辑了他们的答案,包括修正。


829
2017-10-17 17:55



我想通了,我误解了一些解析说明:“adamlevine”=“ada00e000e”=“ada00e000e00”=“ada0 0e00 0e00”=“ad 0e 0e” - 完美!! - Jeremy Goodell
如果你有兴趣,我发布5步算法作为我今天发布的类似问题的UPDATE: stackoverflow.com/questions/12939234/... - Jeremy Goodell
@TimPietrusky为随机颜色名称创建了这个令人难以置信的令人难以置信的演示工具。去这里: randomstringtocsscolor.com 然后单击框并键入“chucknorris”。 - Jeremy Goodell
adamlevine 确实有效 jsfiddle.net/LdyZ8/2959 但这些字母被封锁了 ada00e000e 填充到 ada00e000e00 但随后降低到典型的HEX 6位数值 [ad]a0[0e]00[0e]00 从而使ad0e0e出现在上面的jsfiddle中。 - Martin
如果这个答案会更好 只要 包含当前状态 - 此答案的历史记录和其他答案属于编辑摘要和/或注释。 - Peter Mortensen


大多数浏览器只会忽略颜色字符串中的任何NON-hex值,用零替换非十六进制数字。

ChuCknorris 翻译成 c00c0000000。此时,浏览器会将字符串分成三个相等的部分,表示 绿色 和 蓝色 值: c00c 0000 0000。每个部分中的额外位将被忽略,这将产生最终结果 #c00000 这是一种带红色的颜色。

注意,这样做  适用于CSS颜色解析,符合CSS标准。

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>


338
2017-11-29 23:01



虽然我仍然很好奇为什么OP说“在CSS中”而不是“在HTML中” - 也许他们使用的是超级旧浏览器,或者只是错了? - Mike Christensen
那么他很可能会使用已弃用的 bgcolor 属性。 - animuson♦
也许他会非常友好地发布这个神奇的HTML,在“所有浏览器和平台”中产生Chuck Norris红色。 - Mike Christensen
不跳过无效字符,将它们视为0。 - phyzome
(这个答案可能已经死了)建议:使用背景颜色代替演示颜色。文字颜色超过这么小的相对区域,很难看出差异或相似之处 - Zoe


浏览器正在尝试转换 chucknorris 到十六进制颜色代码,因为它不是一个有效的值。

  1. chucknorris,除了 c 不是有效的十六进制值。
  2. 所以它被转换为 c00c00000000
  3. 哪个成了 #C00000,一片红色。

这似乎主要是一个问题 IE浏览器 和 歌剧 (12)因为Chrome(31)和Firefox(26)都忽略了这一点。

附:括号中的数字是我测试的浏览器版本。

更轻松的说明

查克诺里斯不符合网络标准。 Web标准符合   给他。 #BADA55


220
2017-11-30 14:05





WHATWG HTML规范具有解析传统颜色值的确切算法: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

用于解析颜色字符串的Netscape Classic代码是开源的: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

例如,请注意每个字符都被解析为十六进制数字,然后被转换为32位整数 没有检查溢出。只有八个十六进制数字适合32位整数,这就是为什么只考虑最后8个字符的原因。在将十六进制数字解析为32位整数之后,然后将它们除以16,将它们截断为8位整数,直到它们适合8位,这就是忽略前导零的原因。

更新:此代码与规范中定义的内容不完全匹配,但唯一的区别是几行代码。我认为这些线路被添加(在Netscape 4中):

if (bytes_per_val > 4)
{
      bytes_per_val = 4;
}

187
2017-09-27 22:01





回答: 

  • 浏览器将尝试转换 查克·诺里斯 成十六进制值。
  • 以来 c 是唯一有效的十六进制字符 查克·诺里斯,价值变成: c00c000000000表示无效的所有值)。
  • 然后浏览器将结果分为3个groupd: Red = c00cGreen = 0000Blue = 0000
  • 由于html背景的有效十六进制值仅包含每种颜色类型的2位数([RGb),从每组中截断最后2位数,留下rgb值 c00000 这是一种砖红色调的颜色。

167
2018-05-24 05:18





原因是浏览器可以 不明白 它并尝试以某种方式将其转换为它可以理解的内容,在这种情况下转换为十六进制值!

chucknorris 以。。开始 c 这是十六进制中识别的字符,也是将所有未识别的字符转换为 0

所以 chucknorris 以十六进制格式变为: c00c00000000,所有其他角色成为 0 和 c 他们仍然在哪里......

现在他们被3除以 RGB(红色,绿色,蓝色)...... R: c00c, G: 0000, B:0000...

但我们知道RGB的有效十六进制只有2个字符,意味着 R: c0, G: 00, B:00

所以真正的结果是:

bgcolor="#c00000";

我还添加了图像中的步骤作为快速参考:

Why does HTML think “chucknorris” is a color?


135
2017-07-01 04:08



听起来像巴基会说的那样 - Tushortz
巴克特是谁? - Goku
@Goku Bucky是一个有趣的编程语言教程Youtube家伙,手柄“thenewboston” - Tushortz


查克·诺里斯 是统计数据 C 浏览器读入十六进制值。

因为a,b,c,d,e,f是 十六进制的字符

浏览器 chucknorris 转换成 c00c00000000 十六进制值。

然后 c00c00000000 十六进制值转换为 RGB 格式(除以3)

c00c00000000 => R:c00c,G:0000,B:0000

浏览器只需要2位数字即可显示颜色。

R:c00c,G:0000,B:0000 => R:c0,G:00,B:00 => c00000

最后,秀 bgcolor = c00000 在网络浏览器中。

这是一个展示的例子

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="10" width="150" align="center">chucknorris</td>
    <td bgcolor="c00c00000000" cellpadding="10" width="150" align="center">c00c00000000</td>
    <td bgcolor="c00000" cellpadding="10" width="150" align="center">c00000</td>
  </tr>
</table>


4
2018-04-17 19:16