[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
質問
HTMLの背景色として特定のランダムな文字列を入力すると、色が出るのはなぜですか?
例えば
<body bgcolor="chucknorris"> test </body>
を持つドキュメントを生成します。 赤色背景 すべてのブラウザとプラットフォームで
一方
chucknorr
を生成します。
黄色の背景
!
どうなってるんだ?
解決方法は?
Netscape時代の名残りです。
<ブロッククオート欠けた桁は0[...]として扱われます。例えば、#F0F0F0、F0F0F、F0F0F、#FxFxFx、FxFxFxはすべて同じ値です。
ブログ記事からです Microsoft Internet Explorerのカラーパースに関するちょっとした雑感 では、色値の長さの違いなど、非常に詳細にカバーしています。
ブログの記事から順番にルールを当てはめていくと、次のようになります。
-
有効でない16進数の文字をすべて0に置き換える。
chucknorris becomes c00c0000000
-
3 で割り切れる次の総文字数までパッドアウトする(11 → 12)。
c00c 0000 0000
-
3つの等しいグループに分割され、各成分はRGBカラーの対応する色成分を表します。
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"
と、まあ、茶色く出てくるわけです。
関連
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] <meta http-equiv="X-UA-Compatible" content="IE=edge">は何をするのですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] PHPでHTML/XMLをパースして処理する方法とは?
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] 以下のHTMLフォームの例で、「mailto:[email protected]」とは何ですか?
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?
-
[解決済み] mailchimpのメールインラインスタイルのコーディングがいつも通りできない