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

HTML

路易神奇Itachi

2020-03-13

在HTML中作为背景色输入时，某些随机字符串如何产生颜色？例如：

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

... 在所有浏览器和平台上产生背景为红色的文档。

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

这里发生了什么？

第1425篇《HTML为什么认为“ chucknorris”是一种颜色？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答

布雷西 2020.03.13

解析旧属性上的颜色的规则涉及到比现有答案中提到的步骤更多的步骤。将截断部分转换为2位数部分描述为：

丢弃除最后8个字符以外的所有字符
只要所有组件都具有前导零，则一一丢弃前导零。
丢弃除前两个字符外的所有字符

一些例子：

oooFoooFoooF
000F 000F 000F                <- replace, pad and chunk
0F 0F 0F                      <- leading zeros truncated
0F 0F 0F                      <- truncated to 2 characters from right

oooFooFFoFFF
000F 00FF 0FFF                <- replace, pad and chunk
00F 0FF FFF                   <- leading zeros truncated
00 0F FF                      <- truncated to 2 characters from right

ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- replace, pad and chunk
BC000000 BC000000 BC000000    <- truncated to 8 characters from left
BC BC BC                      <- truncated to 2 characters from right

AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- replace, pad and chunk
0C000000 0C000000 0C000000    <- truncated to 8 characters from left
C000000 C000000 C000000       <- leading zeros truncated
C0 C0 C0                      <- truncated to 2 characters from right

以下是该算法的部分实现。它不处理错误或用户输入有效颜色的情况。

function parseColor(input) {
  // todo: return error if input is ""
  input = input.trim();
  // todo: return error if input is "transparent"
  // todo: return corresponding #rrggbb if input is a named color
  // todo: return #rrggbb if input matches #rgb
  // todo: replace unicode code points greater than U+FFFF with 00
  if (input.length > 128) {
    input = input.slice(0, 128);
  }
  if (input.charAt(0) === "#") {
    input = input.slice(1);
  }
  input = input.replace(/[^0-9A-Fa-f]/g, "0");
  while (input.length === 0 || input.length % 3 > 0) {
    input += "0";
  }
  var r = input.slice(0, input.length / 3);
  var g = input.slice(input.length / 3, input.length * 2 / 3);
  var b = input.slice(input.length * 2 / 3);
  if (r.length > 8) {
    r = r.slice(-8);
    g = g.slice(-8);
    b = b.slice(-8);
  }
  while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") {
    r = r.slice(1);
    g = g.slice(1);
    b = b.slice(1);
  }
  if (r.length > 2) {
    r = r.slice(0, 2);
    g = g.slice(0, 2);
    b = b.slice(0, 2);
  }
  return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");
}

$(function() {
  $("#input").on("change", function() {
    var input = $(this).val();
    var color = parseColor(input);
    var $cells = $("#result tbody td");
    $cells.eq(0).attr("bgcolor", input);
    $cells.eq(1).attr("bgcolor", color);

    var color1 = $cells.eq(0).css("background-color");
    var color2 = $cells.eq(1).css("background-color");
    $cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1);
    $cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2);
  });
});

body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p><input id="input" placeholder="Enter color e.g. chucknorris"></p>
<table id="result">
  <thead>
    <tr>
      <th>Left Color</th>
      <th>Right Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Gil番长 2020.03.13

chucknorris以c开头，浏览器将其读取为十六进制值。

因为A，B，C，D，E和F是十六进制字符。

浏览器将转换chucknorris为十六进制值C00C00000000。

然后将C00C00000000十六进制值转换为RGB格式（除以3）：

C00C00000000 => R:C00C, G:0000, B:0000

浏览器仅需要两位数字来指示颜色：

R:C00C, G:0000, B:0000=> R:C0, G:00, B:00=>C00000

最后，bgcolor = C00000在Web浏览器中显示。

这是一个演示它的示例：

<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>

老丝LEY西门 2020.03.13

回答：

浏览器将尝试将chucknorris转换为十六进制值。
由于c是唯一有效的十六进制字符查克·诺里斯，值会变成：c00c00000000（0为无效的所有值）。
然后，浏览器将所述结果为3个groupds：，Red = c00c，。Green = 0000Blue = 0000
由于html背景的有效十六进制值对于每种颜色类型（r，g，b）仅包含2位数字，因此每组都将截断最后2位数字，而剩下的rgb值为c00000砖红色调的颜色。

西门斯丁 2020.03.13

很抱歉，我不同意，但是根据解析@Yuhong Bao发布的旧色值的规则，chucknorris不等于#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答复者已经编辑了他们的答案以包括更正。

ProTony 2020.03.13

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

例如，请注意，每个字符都被解析为十六进制数字，然后在不检查overflow的情况下被转换为32位整数。32位整数只能容纳8个十六进制数字，这就是为什么只考虑最后8个字符的原因。将十六进制数字解析为32位整数后，然后将它们除以16，直到它们适合8位，然后将其截断为8位整数，这就是为什么忽略前导零的原因。

更新：此代码与规范中定义的代码不完全匹配，但唯一的区别是几行代码。我认为是添加了以下几行（在Netscape 4中）：

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

null 2020.03.13

这是Netscape时代的遗留物：

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

摘自博客文章关于Microsoft Internet Explorer的颜色解析的一点怨言，它详细介绍了它，包括不同长度的颜色值等。

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

将所有无效的十六进制字符替换为0
```
chucknorris becomes c00c0000000
```
填充到下一个可被3整除的字符总数（11-> 12）
```
c00c 0000 0000
```
分为三个相等的组，每个分量代表RGB颜色的相应颜色分量：
```
RGB (c00c, 0000, 0000)
```
将每个参数从右向下截断为两个字符

得到以下结果：

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>

This also answers the other part of the question; why does bgcolor="chucknorr" produce a yellow colour? Well, if we apply the rules, the string is:

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

Which gives a light yellow gold colour. As the string starts off as 9 characters, we keep the second C this time around hence it ends up in the final colour value.

I originally encountered this when someone pointed out you could do color="crap" and, well, it comes out brown.

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android