Mengapa HTML berpikir "chucknorris" adalah warna?

7488

Kenapa string acak tertentu menghasilkan warna saat dimasukkan sebagai warna latar belakang dalam HTML? Sebagai contoh:

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

Luaskan cuplikan

... menghasilkan dokumen dengan latar belakang merah di semua browser dan platform.

Menariknya, saat chucknorrimenghasilkan latar belakang merah juga, chucknorrmenghasilkan latar belakang kuning.

Apa yang terjadi di sini?

html browser background-color

— pengguna456584
sumber

154

Sebagai catatan: jangan gunakan bgcolor. Gunakan CSS background.

— John Dvorak

47

Mengapa Anda ingin menambahkan warna latar belakang yang disebut chucknorris? Apa warna yang diharapkan?

— masterFly

106

@masterFly: Saya tidak tahu mengapa komentar saya di bawah jawaban yang diterima dihapus karena "tidak konstruktif", karena itu menjawab pertanyaan Anda dengan cukup baik: orang bereksperimen dengan hal-hal ini sepanjang waktu. Saya baru berusia 10 tahun ketika saya menemukan ini dan semua yang saya lakukan pada saat itu sedang bermain-main dan melihat apa yang terjadi. Anda tidak selalu harus memiliki alasan praktis untuk melakukan sesuatu, terutama sesuatu yang sembrono seperti ini.

— BoltClock

49

dan <body bgcolor="stevensegal">tes </body> berwarna hijau

— Chris

4

@BenDaggers Harap baca riwayat revisi sebelum melakukan pengeditan lainnya. The css tag tidak relevan dan telah dihapus dua kali.

— Lightness Races dalam Orbit

6879

Ini peninggalan dari hari-hari Netscape:

Digit yang hilang diperlakukan sebagai 0 [...]. Angka yang salah hanya ditafsirkan sebagai 0. Misalnya nilai-nilai # F0F0F0, F0F0F0, F0F0F, #FxFxFx dan FxFxFx semuanya sama.

Ini dari posting blog. Kata-kata kasar tentang parsing warna Microsoft Internet Explorer yang mencakupnya dengan sangat rinci, termasuk berbagai panjang nilai warna, dll.

Jika kami menerapkan aturan pada gilirannya dari posting blog, kami mendapatkan yang berikut:

Ganti semua karakter heksadesimal tidak valid dengan 0's
```
chucknorris becomes c00c0000000
```
Pad out ke jumlah total karakter berikutnya yang dapat dibagi oleh 3 (11 -> 12)
```
c00c 0000 0000
```
Dibagi menjadi tiga kelompok yang sama, dengan masing-masing komponen mewakili komponen warna yang sesuai dari warna RGB:
```
RGB (c00c, 0000, 0000)
```
Pangkas setiap argumen dari kanan hingga dua karakter

Yang memberikan hasil sebagai berikut:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

Berikut adalah contoh yang menunjukkan bgcoloratribut dalam aksi, untuk menghasilkan carikan warna "luar biasa" ini:

<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>

Luaskan cuplikan

Ini juga menjawab bagian lain dari pertanyaan; mengapa bgcolor="chucknorr"menghasilkan warna kuning? Nah, jika kita menerapkan aturan, stringnya adalah:

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

Yang memberi warna emas kuning muda. Ketika string dimulai sebagai 9 karakter, kami menyimpan C kedua kali ini sehingga berakhir dengan nilai warna akhir.

Saya awalnya menemukan ini ketika seseorang menunjukkan Anda bisa melakukan color="crap"dan, yah, itu keluar cokelat.

— berlari
sumber

174

Perhatikan bahwa, terlepas dari apa yang dikatakan oleh posting blog itu, ketika Anda bisa menangani string 3-char, Anda menduplikasi masing-masing karakter, daripada mendahului 0. yaitu 0F6menjadi #00FF66, tidak #000F06.

— Aaron Dufour

634

@ usr: HTML dibangun dengan sengaja mengabaikan input yang salah;)

— Lily Ballard

59

Anda juga dapat menggunakan string acak saya untuk konverter warna css untuk mendapatkan warna untuk string tertentu. Ini didasarkan pada 5 langkah untuk menghitung warna string oleh Jeremy Goodell .

— TimPietrusky

15

Kesempatan tersembunyi untuk semantik? Anda bisa membuat beberapa halaman kesalahan dengan ini: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>Anda bisa menambahkan div dengan latar belakang lain atau sesuatu seperti itu, sehingga tidak terlalu mengejutkan secara estetika.

— Theraot

32

@Theraot bgcolor="success"juga berwarna hijau. Menariknya, seseorang dapat mengesampingkan warna-warna ini menggunakan atribut CSS / pemilih nilai (misalnya, td[bgcolor="chucknorris"] {...}).

— daiscog

970

Saya minta maaf untuk tidak setuju, tetapi menurut aturan untuk parsing nilai warna lama yang diposting oleh @Yuhong Bao , chucknorrisTIDAK menyamakan #CC0000, tetapi lebih ke #C00000, warna merah yang sangat mirip tetapi sedikit berbeda. Saya menggunakan add-on Firefox ColorZilla untuk memverifikasi ini.

Aturan menyatakan:

buat string menjadi panjang yang merupakan kelipatan dari 3 dengan menambahkan 0s: chucknorris0
pisahkan string menjadi 3 panjang string yang sama: chuc knor ris0
potong setiap string menjadi 2 karakter: ch kn ri
pertahankan nilai hex, dan tambahkan 0 jika perlu: C0 00 00

Saya dapat menggunakan aturan ini untuk menafsirkan string berikut dengan benar:

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

UPDATE: Penjawab asli yang mengatakan warna #CC0000telah diedit jawaban mereka untuk memasukkan koreksi.

— Jeremy Goodell
sumber

86

Saya menemukan jawabannya, saya telah salah menafsirkan beberapa instruksi penguraian: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Sempurna !!

— Jeremy Goodell

17

Jika Anda tertarik, saya memposting algoritma 5-langkah sebagai UPDATE pada pertanyaan serupa yang saya posting hari ini: stackoverflow.com/questions/12939234/…

— Jeremy Goodell

18

@TimPietrusky menciptakan alat demo yang luar biasa aneh ini untuk nama warna acak. Buka saja di sini: randomstringtocsscolor.com dan klik di kotak dan ketik "chucknorris".

— Jeremy Goodell

4

adamlevinetidak bekerja sesuai jsfiddle.net/LdyZ8/2959 tetapi huruf-huruf diblokir ke ada00e000emana diisi ada00e000e00tetapi kemudian dikurangi menjadi nilai HEX 6 digit khas [ad]a0[0e]00[0e]00sehingga membuat ad0e0e yang muncul di jsfiddle di atas.

— Martin

4

Akan lebih baik jika jawaban ini hanya berisi keadaan saat ini - riwayat jawaban ini dan jawaban lainnya termasuk dalam ringkasan edit dan / atau komentar.

— Peter Mortensen

397

Sebagian besar browser hanya akan mengabaikan nilai-nilai NON-hex dalam string warna Anda, menggantikan angka non-hex dengan nol.

ChuCknorrisditerjemahkan menjadi c00c0000000. Pada titik ini, browser akan membagi string menjadi tiga bagian yang sama, menunjukkan Merah , Hijau dan Biru nilai-nilai: c00c 0000 0000. Bit tambahan di setiap bagian akan diabaikan, yang membuat hasil akhir #c00000yang merupakan warna kemerahan.

Catatan, ini tidak berlaku untuk parsing warna CSS, yang mengikuti standar 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>

Luaskan cuplikan

— Mike Christensen
sumber

7

Meskipun saya masih penasaran mengapa OP mengatakan "dalam CSS" dan bukan "dalam HTML" - Mungkin mereka menggunakan browser yang sangat lama, atau hanya salah?

— Mike Christensen

7

Jadi dia kemungkinan besar menggunakan bgcoloratribut yang sudah usang .

— animuson

12

Karakter yang tidak valid tidak dilompati, mereka diperlakukan sebagai 0.

— perlakukan mod Anda dengan baik

5

(WHile jawaban ini mungkin sudah mati) saran: Gunakan warna latar belakang untuk menunjukkan warna. Warna teks melebihi area relatif yang kecil sehingga sulit untuk melihat perbedaan atau kesamaan

— Zoe

304

Peramban mencoba mengonversi chucknorrismenjadi kode warna hex, karena itu bukan nilai yang valid.

Di chucknorris, semuanya kecuali cbukan nilai hex yang valid.
Jadi itu akan dikonversi menjadi c00c00000000.
Yang menjadi # c00000 , warna merah.

Ini tampaknya menjadi masalah terutama dengan Internet Explorer dan Opera (12) karena Chrome (31) dan Firefox (26) mengabaikannya.

PS Angka dalam kurung adalah versi browser yang saya uji.

.

Pada nada yang lebih ringan

Chuck Norris tidak sesuai dengan standar web. Standar web sesuai dengannya. # BADA55

— aWebDeveloper
sumber

297

Alasannya adalah browser tidak dapat memahaminya dan mencoba menerjemahkannya entah bagaimana ke apa yang dapat dimengerti dan dalam hal ini menjadi nilai heksadesimal! ...

chucknorrisdimulai dengan ckarakter yang dikenali dalam heksadesimal, juga itu mengkonversi semua karakter yang tidak dikenal menjadi 0!

Jadi chucknorrisdalam format heksadesimal menjadi:, c00c00000000semua karakter lain menjadi 0dan ctetap berada di tempat mereka ...

Sekarang mereka dibagi 3 untuk RGB(merah, hijau, biru) ... R: c00c, G: 0000, B:0000...

Tapi kita tahu heksadesimal yang valid untuk RGB hanya 2 karakter, artinya R: c0, G: 00, B:00

Jadi hasil sebenarnya adalah:

bgcolor="#c00000";

Saya juga menambahkan langkah-langkah pada gambar sebagai referensi cepat untuk Anda:

— Alireza
sumber

23

Ini penjelasan yang sangat lucu: D: D: D

— Dominik Bucher

2

Penjelasan yang begitu bijak dan sangat sederhana dan lurus yang pernah saya alami

— Saurin Vala

1

jawaban yang sangat kreatif :)

— ahmednawazbutt

222

WHATWG HTML spec memiliki algoritma yang tepat untuk mem-parsing nilai warna yang lama: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

Kode Netscape Classic yang digunakan untuk parsing string warna adalah open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Misalnya, perhatikan bahwa setiap karakter diuraikan sebagai digit hex dan kemudian digeser menjadi integer 32-bit tanpa memeriksa overflow . Hanya delapan digit hex yang masuk ke dalam integer 32-bit, itulah sebabnya hanya 8 karakter terakhir yang dipertimbangkan. Setelah menguraikan digit hex menjadi bilangan bulat 32-bit, mereka kemudian dipotong menjadi bilangan bulat 8-bit dengan membaginya dengan 16 sampai mereka masuk ke dalam 8-bit, itulah sebabnya nol di depan diabaikan.

Pembaruan: kode ini tidak sama persis dengan apa yang didefinisikan dalam spesifikasi, tetapi satu-satunya perbedaan ada beberapa baris kode. Saya pikir ini adalah baris-baris ini yang ditambahkan (dalam Netscape 4):

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

— Yuhong Bao
sumber

Terima kasih, Anda menunjukkan di mana kode sumber Netscape lama ... mengapa sulit ditemukan?

— kb1000

202

Menjawab:

Browser akan mencoba mengubah chucknorris menjadi nilai heksadesimal.
Karena chanya karakter hex yang valid di chucknorris , nilainya berubah menjadi: c00c00000000( 0 untuk semua nilai yang tidak valid ).
Browser kemudian membagi hasilnya menjadi 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
Karena nilai hex yang valid untuk latar belakang html hanya berisi 2 digit untuk setiap jenis warna ( r , g , b ), 2 digit terakhir terpotong dari masing-masing grup, meninggalkan nilai rgb c00000yang merupakan warna kencang bata-kemerahan.

— Webeng
sumber

22

chucknorris dimulai dengan c , dan browser membacanya menjadi nilai heksadesimal.

Karena A, B, C, D, E, dan F adalah karakter dalam heksadesimal .

Browser mengonversi chucknorriske nilai heksadesimal C00C00000000,.

Kemudian nilai C00C00000000heksadesimal dikonversi ke format RGB (dibagi 3):

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

Browser hanya membutuhkan dua digit untuk menunjukkan warnanya:

R:C00C, G:0000, B:0000=> R:C0, G:00, B:00=>C00000

Akhirnya, tunjukkan bgcolor = C00000di browser web.

Berikut ini contoh yang menunjukkan:

<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>

Luaskan cuplikan

— sameera lakshitha
sumber

15

The aturan untuk parsing warna pada atribut warisan melibatkan langkah-langkah tambahan selain yang disebut dalam jawaban yang ada. Komponen terpotong untuk bagian 2 digit dijelaskan sebagai:

Buang semua karakter kecuali 8 yang terakhir
Buang nol di depan satu per satu selama semua komponen memiliki nol di depan
Buang semua karakter kecuali 2 yang pertama

Beberapa contoh:

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

Di bawah ini adalah implementasi sebagian dari algoritma. Itu tidak menangani kesalahan atau kasus di mana pengguna memasukkan warna yang valid.

Tampilkan cuplikan kode

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>

Luaskan cuplikan

— Salman A
sumber