ChatGPT解决这个技术问题 Extra ChatGPT

Why does HTML think “chucknorris” is a color?

Why do certain random strings produce colors when entered as background colors in HTML?

For example, bgcolor="chucknorris" produces a red background:

test

Conversely, bgcolor="chucknorr" produces a yellow background:

test

This holds true across various browsers and platforms. What’s going on here?

I had to (because how could I not) so I ran an entire dictionary through a script and rendered it out as a table - and yes, whippersnappers is absolutely a valid color code.
This question was referenced in the podcast CoRecursive, in the 2022-01 episode, at about 34 min 35 secs. Though the referenced answers and comments do not seem to be here (incl. in deleted answers). It is this question (unless there is another one with the same phrasing).
@mindplay.dk Currently fails with an endless stream of dependency errors.

i
ib.

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, finally, 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:

chuck norris Mr T ninjaturtle
sick crap grass

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 that you could do color="crap" and, well, it comes out brown.


Fun fact - According to this logic then test would give you the color of a California Taxi Cab! The HQ of Netscape was in Mountain View, California!
Fun fact #2 - Charmeleon, Ivysaur, and Squirtle will produce red, green, and blue colors respectively.
Is the idea here that, if you're a programmer from some future society that uses 16 bits per color, present-day browsers will truncate them to the most significant 8 bits?
J
Jeremy Goodell

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.


A
Alireza

The reason is the browser can not understand it and try to somehow translate it to what it can understand and in this case into a hexadecimal value!...

chucknorris starts with c which is recognised character in hexadecimal, also it's converting all unrecognised characters into 0!

So chucknorris in hexadecimal format becomes: c00c00000000, all other characters become 0 and c remains where they are...

Now they get divided by 3 for RGB(red, green, blue)... R: c00c, G: 0000, B:0000...

But we know valid hexadecimal for RGB is just 2 characters, means R: c0, G: 00, B:00

So the real result is:

bgcolor="#c00000";

I also added the steps in the image as a quick reference for you:

https://i.stack.imgur.com/sc8bX.jpg


I love the drawing :)
M
Mike Christensen

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.

Redish

Same as above

Black


You might consider editing your answer, because the <font> element is hereby obsolete by HTML5.
i
ib.

The browser is trying to convert chucknorris into hex colour code, because it’s not a valid value.

In chucknorris, everything except c is not a valid hex value. So it gets converted to c00c00000000. Which becomes #c00000, a shade of red.

This seems to be an issue primarily with Internet Explorer and Opera (12) as both Chrome (31) and Firefox (26) just ignore this.

P.S. The numbers in brackets are the browser versions I tested on.

On a lighter note

Chuck Norris doesn’t conform to web standards. Web standards conform to him. #BADA55


I have tested this on Firefox 26 and it works so I don't believe your reference is correct. Also from the following link scrappy-do.blogspot.com/2004/08/… you will see that this was inherited from Netscape so it is not specific to Internet Explorer or Opera!
Y
Yuhong Bao

The WHATWG HTML spec has the exact algorithm for parsing a legacy color value: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.

The code Netscape Classic used for parsing color strings is open source: https://github.com/zii/netscape/blob/master/lib/layout/layimage.c#L150.

For example, notice that each character is parsed as a hex digit and then is shifted into a 32-bit integer without checking for overflow. Only eight hex digits fit into a 32-bit integer, which is why only the last 8 characters are considered. After parsing the hex digits into 32-bit integers, they are then truncated into 8-bit integers by dividing them by 16 until they fit into 8-bit, which is why leading zeros are ignored.

Update: This code does not exactly match what is defined in the spec, but the only difference there is a few lines of code. I think it is these lines that were added (in Netscape 4):

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

a
arkon

Answer:

The browser will try to convert chucknorris into a hexadecimal value.

Since c is the only valid hex character in chucknorris, the value turns into: c00c00000000(0 for all values that were invalid).

The browser then divides the result into 3 groupds: Red = c00c, Green = 0000, Blue = 0000.

Since valid hex values for html backgrounds only contain 2 digits for each color type (r, g, b), the last 2 digits are truncated from each group, leaving an rgb value of c00000 which is a brick-reddish toned color.


i
ib.

chucknorris starts with c, and the browser reads it into a hexadecimal value.

Because A, B, C, D, E, and F are characters in hexadecimal.

The browser converts chucknorris to a hexadecimal value, C00C00000000.

Then the C00C00000000 hexadecimal value is converted to RGB format (divided by 3):

C00C00000000 ⇒ R:C00C, G:0000, B:0000

The browser needs only two digits to indicate the colour:

R:C00C, G:0000, B:0000 ⇒ R:C0, G:00, B:00 ⇒ C00000

Finally, show bgcolor = C00000 in the web browser.

Here's an example demonstrating it:

chucknorris c00c00000000 c00000


S
Salman A

The rules for parsing colors on legacy attributes involves additional steps than those mentioned in existing answers. The truncate component to 2 digits part is described as:

Discard all characters except the last 8 Discard leading zeros one by one as long as all components have a leading zero Discard all characters except the first 2

Some examples:

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

Below is a partial implementation of the algorithm. It does not handle errors or cases where the user enters a valid color.

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, "
", "getComputedStyle: " + color1); $cells.eq(3).empty().append("bgcolor: " + color, "
", "getComputedStyle: " + color2); }); }); body { font: medium monospace; } input { width: 20em; } table { table-layout: fixed; width: 100%; }

Left Color Right Color
   
   


M
Muhammad Ali

Answer In Simple Words:

The short answer is that HTML is desperate to please and will accept basically anything you give it. HTML is built around intentionally ignoring malformed input.

Whole Concept:

HTML accepts non-hexadecimal character as 0 so we all know that 0-9 define zero to nine then A-F define ten to fifteen. So there are so many words that can be a color like "chucknorris" as deep blood red color like this. and similarly "stevensegal" means green.

Showing Unexpected Colors: If you are putting any word at bgcolor that contains a few hexadecimal character then that character will show you some unexpected color that you never imagine. It works like #F00F00 is equal to #FotFot. But this will only work on bgcolor inside the table tag nowhere else.

Demo:

Why HTML thinks Chucknorris as color?

Here is the implementation...!!!

It is the color of:
chucknorris