1. ホーム
  2. ハイパーリンク

[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?

2022-03-17 08:27:12

質問

HTMLの背景色として特定のランダムな文字列を入力すると、色が出るのはなぜですか?

例えば

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

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

一方 chucknorr を生成します。 黄色の背景 !

どうなってるんだ?

解決方法は?

Netscape時代の名残りです。

<ブロッククオート

欠けた桁は0[...]として扱われます。例えば、#F0F0F0、F0F0F、F0F0F、#FxFxFx、FxFxFxはすべて同じ値です。

ブログ記事からです Microsoft Internet Explorerのカラーパースに関するちょっとした雑感 では、色値の長さの違いなど、非常に詳細にカバーしています。

ブログの記事から順番にルールを当てはめていくと、次のようになります。

  1. 有効でない16進数の文字をすべて0に置き換える。

    chucknorris becomes c00c0000000
    
    
  2. 3 で割り切れる次の総文字数までパッドアウトする(11 → 12)。

    c00c 0000 0000
    
    
  3. 3つの等しいグループに分割され、各成分はRGBカラーの対応する色成分を表します。

    RGB (c00c, 0000, 0000)
    
    
  4. 右からの各引数を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" と、まあ、茶色く出てくるわけです。