HTMLが「チャックノリス」を色だと考えるのはなぜですか？

これは、Netscapeの時代からの引き継ぎです。
欠落している数字は0 [...]として扱われます。誤った数字は単に0として解釈されます。たとえば、値＃F0F0F0、F0F0F0、F0F0F、＃FxFxFx、およびFxFxFxはすべて同じです。
これはブログ投稿からのものです。MicrosoftInternetExplorerの色の解析について、さまざまな長さの色の値など、詳細に説明しています。
ブログ投稿から順番にルールを適用すると、次のようになります。
無効な16進文字をすべて0に置き換えます。
チャックノリスはc00c0000000になります
3で割り切れる次の合計文字数にパディングします（11→12）。
c00c 0000 0000
3つの等しいグループに分割し、各コンポーネントはRGBカラーの対応するカラーコンポーネントを表します。
RGB（c00c、0000、0000）
各引数を右から2文字に切り捨てます。
最後に、次の結果が得られます。
RGB（c0、00、00）=＃C00000またはRGB（192、0、0）
これは、この「驚くべき」色見本を作成するためのbgcolor属性の動作を示す例です。
<表>

チャックノリス
 Mr T 
ニンジャタートル


病気
がらくた
草


これは、質問の他の部分にも答えます。bgcolor= "chucknorr"が黄色を生成するのはなぜですか？ルールを適用すると、文字列は次のようになります。
c00c00000 => c00 c00 000 => c0 c0 00 [RGB（192、192、0）]
淡いイエローゴールドの色になります。文字列は9文字で始まるため、今回は2番目の「C」を保持します。したがって、最終的な色の値になります。
私はもともと、color = "crap"を実行できると誰かが指摘したときにこれに遭遇しましたが、まあ、茶色になります。
|
同意できないことをお詫び申し上げますが、@ Yuhong Baoによって投稿されたレガシーカラー値を解析するためのルールによれば、チャックノリスは＃CC0000ではなく、＃C00000と同じです。これを確認するために、FirefoxColorZillaアドオンを使用しました。
ルールは次のように述べています。
0を追加して、文字列を3の倍数の長さにします。chucknorris0
文字列を3つの等しい長さの文字列に分割します：chuc knor ris0
各文字列を2文字に切り捨てます：ch kn ri
16進値を保持し、必要に応じて0を追加します：C0 00 00
これらのルールを使用して、次の文字列を正しく解釈することができました。
ラッキーチャーム
幸運
LuckBeALady
LuckBeALadyTonight
江南スタイル
更新：色が＃CC0000であると言った元の回答者は、その後、修正を含めるように回答を編集しました。
|
ほとんどのブラウザは、カラー文字列内の16進数以外の値を単に無視し、16進数以外の数字をゼロに置き換えます。
ChuCknorrisはc00c0000000に変換されます。この時点で、ブラウザは文字列を3つの等しいセクションに分割し、赤、緑、青の値を示します：c00c00000000。各セクションの余分なビットは無視され、最終結果は赤みがかった色の＃c00000になります。
これは、CSS標準に準拠するCSSカラー解析には適用されないことに注意してください。
 赤みがかった 
 上記と同じ 
 黒 
|
その理由は、ブラウザがそれを理解できず、どういうわけかそれを理解できるものに、この場合は16進値に変換しようとするためです！...
チャックノリスは、16進数で認識される文字であるcで始まります。また、認識されないすべての文字を0に変換します。
したがって、16進形式のchucknorrisはc00c00000000になり、他のすべての文字は0になり、cはそのままになります...
RGB（赤、緑、青）の場合は3で除算されます... R：c00c、G：0000、B：0000 .. ..
ただし、RGBの有効な16進数は2文字であり、R：c0、G：00、B：00を意味します。
したがって、実際の結果は次のとおりです。
bgcolor = "＃c00000";
また、クイックリファレンスとして画像の手順を追加しました。
|
チャックノリスは有効な値ではないため、ブラウザはチャックノリスを16進カラーコードに変換しようとしています。
チャックノリスでは、c以外のすべてが有効な16進値ではありません。
したがって、c00c00000000に変換されます。
これは＃c00000、赤の色合いになります。
Chrome（31）とFirefox（26）の両方がこれを無視しているため、これは主にInternet ExplorerとOpera（12）の問題のようです。
P.S.括弧内の数字は、私がテストしたブラウザのバージョンです。
軽いノートで
チャックノリスはウェブ標準に準拠していません。 Web標準に準拠
彼に。 ＃BADA55
|
WHATWG HTML仕様には、レガシーカラーを解析するための正確なアルゴリズムがあります値：
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value。
カラー文字列の解析に使用されるコードNetscapeClassicはオープンソースです。
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155。
たとえば、各文字が16進数として解析され、オーバーフローをチェックせずに32ビット整数にシフトされることに注意してください。 32ビット整数に収まるのは8桁の16進数のみであるため、最後の8文字のみが考慮されます。 16進数を32ビット整数に解析した後、8ビットに収まるまで16で除算することにより、8ビット整数に切り捨てられます。そのため、先行ゼロは無視されます。
更新：このコードは仕様で定義されているものと正確には一致しませんが、唯一の違いは数行のコードです。 （Netscape 4で）追加されたのは次の行だと思います。
if（bytes_per_val> 4）
{{
bytes_per_val = 4;
}
|
回答：
ブラウザは、チャックノリスを16進値に変換しようとします。
cはchucknorrisで唯一有効な16進文字であるため、値は次のようになります。c00c00000000（無効だったすべての値に対して0）。
次に、ブラウザは結果を3つのグループに分割します：赤= c00c、緑= 0000、青= 0000。
HTML背景の有効な16進値には、各色タイプ（r、g、b）の2桁しか含まれていないため、最後の2桁は各グループから切り捨てられ、赤レンガ色の色であるc00000のrgb値が残ります。
|
チャックノリスはcで始まり、ブラウザはそれを16進値に読み込みます。
A、B、C、D、E、およびFは16進数の文字であるためです。
ブラウザは、チャックノリスを16進値C00C00000000に変換します。
次に、C00C00000000の16進値がRGB形式（3で除算）に変換されます。
C00C00000000⇒R：C00C、G：0000、B：0000
ブラウザは、色を示すために2桁だけを必要とします。
R：C00C、G：0000、B：0000⇒R：C0、G：00、B：00⇒C00000
最後に、Webブラウザにbgcolor = C00000を表示します。
これを示す例を次に示します。
<表>

チャックノリス
 c00c00000000 
 c00000 


|
レガシー属性の色を解析するためのルールには、既存の回答に記載されているものよりも追加の手順が含まれます。コンポーネントを2桁に切り捨てる部分は、次のように記述されます。
最後の8文字を除くすべての文字を破棄します
すべてのコンポーネントに先行ゼロがある限り、先行ゼロを1つずつ破棄します
最初の2文字を除くすべての文字を破棄します
いくつかの例：
oooFoooFoooF
000F 000F 000F <-交換、パッド、チャンク
0F 0F 0F <-先行ゼロが切り捨てられました
0F 0F 0F <-右から2文字に切り捨てられます
oooFooFFoFFF
000F 00FF 0FFF <-交換、パッド、チャンク
00F 0FF FFF <-先行ゼロが切り捨てられました
00 0F FF <-右から2文字に切り捨てられます
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <-置換、パッド、チャンク
BC000000 BC000000 BC000000 <-左から8文字に切り捨てられます
BC BC BC <-右から2文字に切り捨て
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <-置換、パッド、チャンク
0C000000 0C000000 0C000000 <-左から8文字に切り捨てられます
C000000 C000000 C000000 <-先行ゼロが切り捨てられました
C0 C0 C0 <-右から2文字に切り捨てられます
以下は、アルゴリズムの部分的な実装です。エラーやユーザーが有効な色を入力した場合は処理されません。
関数parseColor（input）{
// todo：入力が ""の場合、エラーを返します
input = input.trim（）;
// todo：入力が「透過的」の場合にエラーを返す
// todo：入力が名前付きの色の場合、対応する#rrggbbを返します
// todo：入力が#rgbと一致する場合は#rrggbbを返します
// todo：U + FFFFより大きいユニコードコードポイントを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）{
入力+ = "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値：
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value。
カラー文字列の解析に使用されるコードNetscapeClassicはオープンソースです。
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155。
たとえば、各文字が16進数として解析され、オーバーフローをチェックせずに32ビット整数にシフトされることに注意してください。 32ビット整数に収まるのは8桁の16進数のみであるため、最後の8文字のみが考慮されます。 16進数を32ビット整数に解析した後、8ビットに収まるまで16で除算することにより、8ビット整数に切り捨てられます。そのため、先行ゼロは無視されます。
更新：このコードは仕様で定義されているものと正確には一致しませんが、唯一の違いは数行のコードです。 （Netscape 4で）追加されたのは次の行だと思います。
if（bytes_per_val> 4）
{{
bytes_per_val = 4;
}
|
回答：
ブラウザは、チャックノリスを16進値に変換しようとします。
cはchucknorrisで唯一有効な16進文字であるため、値は次のようになります。c00c00000000（無効だったすべての値に対して0）。
次に、ブラウザは結果を3つのグループに分割します：赤= c00c、緑= 0000、青= 0000。
HTML背景の有効な16進値には、各色タイプ（r、g、b）の2桁しか含まれていないため、最後の2桁は各グループから切り捨てられ、赤レンガ色の色であるc00000のrgb値が残ります。
|
チャックノリスはcで始まり、ブラウザはそれを16進値に読み込みます。
A、B、C、D、E、およびFは16進数の文字であるためです。
ブラウザは、チャックノリスを16進値C00C00000000に変換します。
次に、C00C00000000の16進値がRGB形式（3で除算）に変換されます。
C00C00000000⇒R：C00C、G：0000、B：0000
ブラウザは、色を示すために2桁だけを必要とします。
R：C00C、G：0000、B：0000⇒R：C0、G：00、B：00⇒C00000
最後に、Webブラウザにbgcolor = C00000を表示します。
これを示す例を次に示します。
<表>

チャックノリス
 c00c00000000 
 c00000 


|
レガシー属性の色を解析するためのルールには、既存の回答に記載されているものよりも追加の手順が含まれます。コンポーネントを2桁に切り捨てる部分は、次のように記述されます。
最後の8文字を除くすべての文字を破棄します
すべてのコンポーネントに先行ゼロがある限り、先行ゼロを1つずつ破棄します
最初の2文字を除くすべての文字を破棄します
いくつかの例：
oooFoooFoooF
000F 000F 000F <-交換、パッド、チャンク
0F 0F 0F <-先行ゼロが切り捨てられました
0F 0F 0F <-右から2文字に切り捨てられます
oooFooFFoFFF
000F 00FF 0FFF <-交換、パッド、チャンク
00F 0FF FFF <-先行ゼロが切り捨てられました
00 0F FF <-右から2文字に切り捨てられます
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <-置換、パッド、チャンク
BC000000 BC000000 BC000000 <-左から8文字に切り捨てられます
BC BC BC <-右から2文字に切り捨て
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <-置換、パッド、チャンク
0C000000 0C000000 0C000000 <-左から8文字に切り捨てられます
C000000 C000000 C000000 <-先行ゼロが切り捨てられました
C0 C0 C0 <-右から2文字に切り捨てられます
以下は、アルゴリズムの部分的な実装です。エラーやユーザーが有効な色を入力した場合は処理されません。
関数parseColor（input）{
// todo：入力が ""の場合、エラーを返します
input = input.trim（）;
// todo：入力が「透過的」の場合にエラーを返す
// todo：入力が名前付きの色の場合、対応する#rrggbbを返します
// todo：入力が#rgbと一致する場合は#rrggbbを返します
// todo：U + FFFFより大きいユニコードコードポイントを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）{
入力+ = "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