Question

可能重复：
Why does HTML think “chucknorris” is a color?

我正在教一个小伙伴。高中/高中网络编程课，我们开始使用简单的元素和属性，如字体和颜色，然后再转到CSS。我知道颜色已被弃用，HTML5中不包含字体，但出于教学目的，我发现从简单的HTML标签开始并逐步使用CSS非常方便。在课程的第一周，学生可以在页面上更改颜色，从而获得很多乐趣。（我也在第1周教他们选框和眨眼，但告诉他们如果他们再次使用它们，他们将失去分数）。

其中一名学生开始用颜色属性值中的奇怪事物提交作业，如“Skittles”或“Spiderman”。我开始尝试使用它并发现几乎任何你在font标签上的color =“”属性中都会产生某种颜色。并且看起来在IE，Firefox，Chrome，Opera和Safari的最新版本中颜色是一致的。

我发现将“LuckyCharms”作为CSS颜色放入不起作用。它似乎只适用于HTML属性中预期颜色的位置，例如font color =“LuckyCharms”或body bgcolor =“LuckyCharms”。

我试图向我的班级解释为什么会发生这种情况，到目前为止我还没有理解它，或者谷歌给出了一个很好的答案。它似乎被解释为颜色代码，但我无法理解如何。

更新： 经过一些试验和错误后，我确定了一个5步算法（使用提供的链接）将几乎任何字符串转换为相应的十六进制颜色。我将在此提供算法，以便对未来访问者进行启发：

将每个非十六进制字符更改为0。
将0添加到字符串，直到其长度为3的倍数。
将字符串分成3个相等的部分。
虽然子字符串的长度大于2，并且所有三个子字符串都以0开头，但从每个字符串中删除前导0。
如果子字符串的长度仍然大于2，则将每个子字符串截断为2个字符。

就是这样，将子串放在一起，你就得到了十六进制颜色代码。我用大约20个不同的样本验证了这个算法，并使用Firefox ColorZilla附加颜色选择器比较了结果。

请注意，在这种情况下，规则确实在其中一个答案中指定的链接中明确说明，并且将被所有浏览器遵守。因此，您可以依赖它在任何浏览器中工作（如果您真的想使用有趣的颜色名称）。

Answer 1

HTML 5规范包括the rules for parsing legacy colours。

它们相当长，旨在让浏览器在处理损坏的代码方面保持一致。

Answer 2

非常有趣。似乎浏览器将解释它可以的任何字符（a-f），如果它不匹配则将其余字符保留为0。例如：

Spiderman
 00DE0 A

但仍需要更多的实验。

Answer 3

这是一个有趣的问题。

通过简短的实验，我发现“运气”会产生相同的颜色（无论如何），就像“LuckyCharms”一样，但“LuckBeALady”会让你变暗，而“LuckBeALadyTonight”会更蓝。

顺便说一下，我的第一个想法是它是在可识别的十六进制字符上进行操作，但是将“LuckyCharms”转换为cca，后者呈现黑色。正如Madara Uchiba所暗示的那样，0和十六角的组合未能呈现与“LuckyCharms”相同的草绿色

没有答案。

Answer 4

预计会发生什么的基本答案是“它取决于浏览器”。之前版本的HTML之前的问题之一是，未指定浏览器遇到非标准HTML时会发生什么。来自@Madara Uchiha的解释是浏览器如何解释颜色规范的一个例子，但是对于浏览器崩溃或弹出CD托盘或将显示器的分辨率更改为400x300，它在标准方面也是允许的。 PX。当然，这并不理想 - 所以你所看到的是一个程序员的想法，同时，如果遇到非标准的HTML颜色规范会发生什么。

CSS没有发生的原因是它是一个解释颜色的不同解析器。无论是内联CSS还是链接的CSS文档，这个解析器都会解释颜色。 CSS does define遇到不正确的值时会发生什么：它被忽略，根本不会影响文档。

我想说这是与全班同学谈论标准合规的好时机，因为这是对学生理解的一个重要领域 - 以及一些我不幸知道的专业人士。当他们说“但彩色Skittles工作得很好”时，你可以告诉他们，当他们看到它时，它可以正常工作，但它完全有可能会让他们的教师浏览器崩溃，赚取他们当我们中的一些人不得不放弃我们的周末时，因为在演示时别人的蹩脚代码无法正常工作。这就像你可以得到的现实场景一样接近。

但是，我并不痛苦。主要是：）

为什么字体颜色属性中的奇怪东西会产生真实的颜色？

4 个答案: