Why does HTML think “chucknorris” is a color?

 

How come certain random strings produce colors when entered as background colors in HTML? For example: 

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

It's a holdover from the Netscape days:

Missing digits are treated as 0[...]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same.

It is from the blog post A little rant about Microsoft Internet Explorer's color parsing which covers it in great detail, including varying lengths of color values, etc.

If we apply the rules in turn from the blog post, we get the following:

  • Replace all nonvalid hexadecimal characters with 0's 

    chucknorris becomes c00c0000000

  • Pad out to the next total number of characters divisible by 3 (11 -> 12) 

    c00c 0000 0000

  • Split into three equal groups, with each component representing the corresponding colour component of an RGB colour: 

    RGB (c00c, 0000, 0000)

  • Truncate each of the arguments from the right down to two characters

    • Which gives the following result: 

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

    Here's an example demonstrating the bgcolor attribute in action, to produce this "amazing" colour swatch: 

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

    I'm sorry to disagree, but according to the rules for parsing a legacy color value posted by @Yuhong Bao, chucknorris DOES NOT equate to #CC0000 , but rather to #C00000 , a very similar but slightly different hue of red. I used the Firefox ColorZilla add-on to verify this.

    The rules state:

  • make the string a length that is a multiple of 3 by adding 0s: chucknorris0
  • separate the string into 3 equal length strings: chuc knor ris0
  • truncate each string to 2 characters: ch kn ri
  • keep the hex values, and add 0's where necessary: C0 00 00

    • I was able to use these rules to correctly interpret the following strings:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

    • UPDATE: The original answerers who said the color was #CC0000 have since edited their answers to include the correction.

    Most browsers will simply ignore any NON-hex values in your color string, substituting non-hex digits with zeros.

    ChuCknorris translates to c00c0000000 . At this point, the browser will divide the string into three equal sections, indicating Red, Green and Blue values: c00c 0000 0000 . Extra bits in each section will be ignored, which makes the final result #c00000 which is a reddish color.

    Note, this does not apply to CSS color parsing, which follow the CSS standard. 

    <p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>
    链接地址: http://www.djcxy.com/p/87364.html

    上一篇: 背景颜色变化瓷砖

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