透明 - html 背景色




HTMLは "チャックノリス"が色だと思うのはなぜですか? (6)

HTMLの背景色として入力すると、特定のランダムな文字列がどのように色を生成するのでしょうか? 例えば:

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

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

興味深いことに、 chucknorriは赤い背景も生成しますが、 chucknorrは黄色の背景を生成します。

何が起きてる?


WHATWG HTML仕様には、従来のカラー値を解析するための正確なアルゴリズムがありますhttps://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value : 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 : https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

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

アップデート:このコードは仕様に定義されているものと正確には一致しませんが、唯一の違いは数行のコードだけです。 私はそれが(Netscape 4で)追加されたこれらの行だと思う:

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

従来の属性の色を解析するためルールには 、既存の回答で言及されているものよりも多くのステップが必要です。 2桁の部分を切り捨てる部分は、次のように記述されます。

  1. 最後の8文字を除くすべての文字を破棄する
  2. すべてのコンポーネントに先行ゼロがある限り、先行ゼロを1つずつ破棄する
  3. 最初の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>


回答:

  • ブラウザはchucknorrisを16進数に変換しようとします。
  • chucknorris内ではcが有効な16進文字であるため 、値はc00c00000000無効なすべての値は0 )になります。
  • ブラウザは結果を3つのグループに分けます: Red = c00cGreen = 0000Blue = 0000
  • html背景の有効な16進値は各色の種類( rgb )ごとに2桁しか含まないため、最後の2桁は各グループから切り捨てられ、レンガ赤の色調のc00000 rgb値がc00000れます。

これはNetscapeの時代のホールドオーバーです。

欠落した数字は0 [...]として扱われます。 誤った数字は単に0と解釈されます。たとえば、#F0F0F0、F0F0F0、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"をすることができると指摘したときにこれに遭遇しました、そして、まあ、それは茶色です。


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

  1. chucknorrisでは、 c以外のすべてが有効な16進値ではありません。
  2. したがって、それはc00c00000000に変換されc00c00000000
  3. それは#c00000 、赤の色合いになります。

Chrome(31)とFirefox(26)の両方がこれを無視しているため、これは主にInternet ExplorerOpera (12)の問題です。

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

軽いノートで

Chuck Norrisはウェブ標準に準拠していません。 Web標準は彼に準拠しています。 #BADA55


理由はブラウザがそれを理解でき 、何とかそれを理解できるものに変換し、この場合は16進数の値に変換しようとします!...

chucknorrisは、16進数で認識される文字であるcで始まり、認識されない文字をすべて0変換し0

したがって、 chucknorrisは16進形式になります: c00c00000000 、他のすべての文字は0なり、 cはどこに残っています...

RGB (赤、緑、青)のRGB 3で割りますR: c00c, G: 0000, B:0000 ...

しかし、RGBの有効な16進数は、 R: c0, G: 00, B:00

実際の結果は次のとおりです。

bgcolor="#c00000";

私はまた、クイックリファレンスとして画像のステップを追加しました:







background-color