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

7488

特定のランダムな文字列がHTMLの背景色として入力されたときに色を生成するのはなぜですか？例えば：

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

スニペットを展開

... すべてのブラウザとプラットフォームで背景が赤のドキュメントを生成します。

興味深いことに、chucknorri背景も赤になりますchucknorrが、背景は黄色になります。

何が起きてる？

html browser background-color

— user456584
ソース

154

余談ですが、は使用しないでくださいbgcolor。CSSを使用しbackgroundます。

— John Dvorak

47

という背景色を追加したいのはなぜchucknorrisですか？予想される色は何でしたか？

— masterFly 2016年

106

@masterFly：受け入れられた回答の下のコメントが「建設的でない」という理由で削除された理由がわかりません。なぜなら、それはあなたの質問に非常によく答えるためです。人々は常にこれらのことを試します。私がこれを発見したのは10歳のときでした。そのとき私が行っていたのは、いじり回して何が起こっているのかを確認することだけでした。あなたはいつも何かをするために、特にこれほど軽薄な何かをするための実際的な理由を持っている必要はありません。

— BoltClock

49

及び<body bgcolor="stevensegal">テスト</ body>の緑である

— クリス・

4

@BenDaggers別の編集を行う前に、改訂履歴をお読みください。CSSのタグは無関係であり、すでに二度削除されました。

— オービットでの軽量レース

6879

ネットスケープ時代からの持ち越しです。

欠落している数字は0 [...]として扱われます。不正な数字は単に0として解釈されます。たとえば、値＃F0F0F0、F0F0F0、F0F0F、＃FxFxFx、FxFxFxはすべて同じです。

それはブログの投稿からです。MicrosoftInternet Explorerの色解析について、色の長さの変化など、非常に詳細にカバーしています。

ブログ投稿から順にルールを適用すると、次のようになります。

すべての無効な16進文字を0に置き換えます
```
chucknorris becomes c00c0000000
```
3で割り切れる次の合計文字数まで埋め込む（11-> 12）
```
c00c 0000 0000
```
各コンポーネントがRGBカラーの対応するカラーコンポーネントを表す3つの等しいグループに分割します。
```
RGB (c00c, 0000, 0000)
```
各引数を右から2文字に切り捨てます

次の結果が得られます。

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>

スニペットを展開

これは、質問の他の部分にも回答します。なぜbgcolor="chucknorr"黄色を生成するのですか？さて、ルールを適用すると、文字列は次のようになります。

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

淡い黄色の金色になります。文字列は9文字で始まるので、今回は2番目のCを保持するため、最終的なカラー値になります。

私が最初にこれに遭遇したのは、誰かがあなたにできるcolor="crap"と指摘したときでした。まあ、それは茶色になっています。

— ダッシュ
ソース

174

あなたは3文字の文字列を処理するに着くときにブログ記事が言うにもかかわらず、あなたは、という注意複製各文字を、というよりも0を付加つまり0F6なり#00FF66、ありません#000F06。

— アーロンデュフォー2013

634

@usr：HTMLは、不正な入力を意図的に無視することを中心に構築されています;）

— リリーバラード

59

また、ランダムな文字列からCSSへのカラーコンバーターを使用して、特定の文字列の色を取得することもできます。これは、Jeremy Goodellによる文字列の色を計算するための5つのステップに基づいています。

— TimPietrusky 2013年

15

セマンティクスの隠された機会？あなたはこれでいくつかのエラーページを作ることができます：別の<body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>背景またはそのようなものでdivを追加することができますので、それは審美的に衝撃的ではありません。

— Theraot 2013

32

@Theraot bgcolor="success"も素敵なグリーンです。興味深いことに、CSS属性/値セレクター（例：）を使用して、これらの色を上書きできますtd[bgcolor="chucknorris"] {...}。

— daiscog 2016年

970

私は同意して申し訳ございませんが、従来のカラー値を解析するための規則に従ってにより投稿@Yuhongバオ、chucknorrisと一致しない#CC0000が、むしろに#C00000赤の非常に類似しているが、わずかに異なる色合い、。これを確認するために、Firefox ColorZillaアドオンを使用しました。

ルールは次のように述べています。

0を追加して、文字列の長さを3の倍数にします。 chucknorris0
文字列を3つの等しい長さの文字列に分割します。 chuc knor ris0
各文字列を2文字に切り捨てます。 ch kn ri
16進数の値を保持し、必要に応じて0を追加します。 C0 00 00

これらのルールを使用して、次の文字列を正しく解釈することができました。

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

更新：色を言った元の回答者#CC0000は、修正を含めるために回答を編集しました。

— ジェレミー・グッデル
ソース

86

私はそれを理解しました、私はいくつかの解析命令を誤って解釈しました： "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e"-完璧です!!

— ジェレミーグッデル

17

ご興味のある方のために、今日投稿した同様の質問に、5ステップアルゴリズムをUPDATEとして投稿しました。stackoverflow.com

— Jeremy Goodell

18

@TimPietruskyは、ランダムな色名のためのこのおかしな信じられないほどのデモツールを作成しました。ただ、ここに行く：randomstringtocsscolor.comをし、ボックス内をクリックし、「チャック・ノリス」と入力します。

— Jeremy Goodell、2014

4

adamlevineどおりに作業を行うjsfiddle.net/LdyZ8/2959しかしに文字がブロックさada00e000eにパディングされたada00e000e00が、その後の典型的なHEX 6桁の値まで低下[ad]a0[0e]00[0e]00従って上記jsfiddleに表示ad0e0eを行います。

— Martin

4

この回答に現在の状態のみが含まれているとよいでしょう。この回答と他の回答の履歴は、編集の要約やコメントに属しています。

— Peter Mortensen 2016年

397

ほとんどのブラウザは、カラー文字列の16進数以外の値を単に無視し、16進数以外の数字をゼロに置き換えます。

ChuCknorrisに変換されc00c0000000ます。この時点で、ブラウザは文字列を3つの等しいセクションに分割し、赤、緑、青の値を示しますc00c 0000 0000。各セクションの余分なビットは無視され、最終的#c00000に赤みがかった色になります。

これは、CSS標準に準拠するCSSカラー解析には適用されないことに注意してください。

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>

スニペットを展開

— マイク・クリステンセン
ソース

7

OPが「HTMLで」ではなく「CSSで」と言った理由について私はまだ興味を持っていますが、おそらく超古いブラウザーを使用しているのでしょうか、それとも単に間違っているのでしょうか。

— Mike Christensen

7

したがって、彼はおそらく非推奨のbgcolor属性を使用しています。

— アニムソン

12

無効な文字がスキップされていない、彼らは0として扱われます

— だけでなく、あなたの改造を扱う

5

（この回答が無効になる可能性があります）提案：代わりに背景色を使用して色を示します。テキストの色が非常に小さい相対領域上にあるため、違いや類似点を確認するのが困難です

— Zoe

304

chucknorris有効な値ではないため、ブラウザは16進数のカラーコードに変換しようとしています。

ではchucknorris、を除くすべてcが有効な16進数値ではありません。
したがって、に変換されc00c00000000ます。
これは、赤の色合い＃c00000になります。

Chrome（31）とFirefox（26）の両方がこれを無視するため、これは主にInternet ExplorerとOpera（12）の問題のようです。

PS括弧内の数字は、私がテストしたブラウザのバージョンです。

。

軽いメモで

Chuck NorrisはWeb標準に準拠していません。Web標準は彼に準拠しています。＃BADA55

— aWebDeveloper
ソース

297

その理由は、ブラウザがそれを理解できず、どういうわけかそれをそれが理解できるものに変換しようとし、この場合は16進値に変換しようとするからです！...

chucknorrisc16進数で認識された文字で始まる、またすべての認識されない文字を0！

だから、chucknorris16進形式で次のようになりますc00c00000000、他のすべての文字がなる0とc、彼らがどこにいるのまま...

これで、RGB（赤、緑、青）の3で割られますR: c00c, G: 0000, B:0000... ...

しかし、RGBの有効な16進数は2文字だけであることを知っています。 R: c0, G: 00, B:00

したがって、実際の結果は次のとおりです。

bgcolor="#c00000";

画像の手順もクイックリファレンスとして追加しました。

— アリレザ
ソース

23

これはとてもかわいい説明です：D：D：D

— ドミニクブッチャー

2

だから、賢明と私が今まで経験してきた非常にシンプルでstraigh前方説明

— Saurinヴァラ

1

非常に創造的な答え:)

— ahmednawazbutt

222

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

たとえば、各文字が16進数として解析され、オーバーフローをチェックせずに 32ビット整数にシフトされることに注意してください。32ビット整数に適合するのは8桁の16進数だけなので、最後の8文字のみが考慮されます。16進数を32ビット整数に解析した後、8ビットに収まるまで16で除算して8ビット整数に切り捨てます。そのため、先行ゼロは無視されます。

更新：このコードは、仕様で定義されているものと完全には一致しませんが、数行のコードが異なるだけです。（Netscape 4で）追加されたのは次の行だと思います：

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

— バオ・ユホン
ソース

ありがとう、古いNetscapeのソースコードがどこにあるか教えてくれました...なぜ見つけるのがそんなに難しいのですか？

— kb1000

202

回答：

ブラウザは、chucknorrisを16進値に変換しようとします。
cは、chucknorrisで唯一の有効な16進文字なので、値は次のようになりますc00c00000000（無効なすべての値の場合は0）。
ブラウザは、その後3 groupdsに結果を分けます：Red = c00c、Green = 0000、Blue = 0000。
HTML背景の有効な16進数値には、各色タイプ（r、g、b）の2桁しか含まれていないため、最後の2桁は各グループから切り捨てられ、RGB値はc00000赤レンガ色の色になります。

— Webeng
ソース

22

chucknorrisはcで始まり、ブラウザはそれを16進値に読み取ります。

A、B、C、D、E、およびFは16進数の文字だからです。

ブラウザchucknorrisは16進値に変換されますC00C00000000。

次に、C00C0000000016進値がRGB形式（3で除算）に変換されます。

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

ブラウザは、色を示すために2桁しか必要としません。

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>

スニペットを展開

— サメーラ・ラクシタ
ソース

15

レガシー属性の色を解析するためのルールには、既存の回答で述べられているものよりも追加の手順が含まれます。コンポーネントを2桁に切り捨てる方法は次のとおりです。

最後の8つを除くすべての文字を破棄
すべてのコンポーネントに先行ゼロがある限り、先行ゼロを1つずつ破棄します
最初の2つを除くすべての文字を破棄する

いくつかの例：

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>

スニペットを展開

— サルマンA
ソース