Pertanyaan Mengapa HTML menganggap "chucknorris" berwarna?


Bagaimana string acak tertentu menghasilkan warna ketika dimasukkan sebagai warna latar dalam HTML? Sebagai contoh:

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

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

Menariknya, sementara chucknorri menghasilkan latar belakang merah juga, chucknorr menghasilkan latar belakang kuning.

Apa yang sedang terjadi sini?


6540
2017-11-29 22:54


asal


Jawaban:


Ini adalah peninggalan dari hari-hari Netscape:

Angka-angka 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 Sedikit kata-kata kasar tentang parsing warna Microsoft Internet Explorer yang menutupinya dengan sangat detail, termasuk berbagai nilai warna, dll.

Jika kami menerapkan aturan secara bergantian dari pos blog, kami mendapatkan yang berikut:

  1. Ganti semua karakter heksadesimal nonvalid dengan 0

    chucknorris becomes c00c0000000
    
  2. Pad ke jumlah total karakter berikutnya yang dapat dibagi oleh 3 (11 -> 12)

    c00c 0000 0000
    
  3. Bagi menjadi tiga kelompok yang sama, dengan masing-masing komponen mewakili komponen warna yang sesuai dari warna RGB:

    RGB (c00c, 0000, 0000)
    
  4. Memotong setiap argumen dari kanan hingga dua karakter

Yang memberikan hasil sebagai berikut:

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

Berikut contoh yang menunjukkan bgcolor atribut dalam aksi, untuk menghasilkan contoh warna "menakjubkan" 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>

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

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

Yang memberi warna emas kuning muda. Saat string dimulai sebagai 9 karakter, kita menyimpan C kedua kali ini sehingga nilai warna akhirnya akan berakhir.

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


6041
2017-11-30 21:53



Saya minta maaf untuk tidak setuju, tetapi menurut aturan untuk mengurai nilai warna warisan yang diposkan oleh @Yuhong Bao, chucknorris TIDAK sama dengan #CC0000, tetapi lebih kepada #C00000, warna merah yang sangat mirip tetapi sedikit berbeda. Saya menggunakan Firefox ColorZilla add-on untuk memverifikasi ini.

Aturannya menyatakan:

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

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle 

MEMPERBARUI: Penjawab asli yang mengatakan warna itu #CC0000 sejak mengedit jawaban mereka untuk memasukkan koreksi.


826
2017-10-17 17:55



Kebanyakan browser akan mengabaikan nilai NON-hex dalam string warna Anda, menggantikan digit non-hex dengan nol.

ChuCknorris diterjemahkan 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 ekstra di setiap bagian akan diabaikan, yang membuat hasil akhir #c00000 yang merupakan warna kemerahan.

Perhatikan, ini tidak 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>


337
2017-11-29 23:01



Browser sedang mencoba untuk mengkonversi chucknorris ke kode warna hex, karena itu bukan nilai yang valid.

  1. Di chucknorris, semuanya kecuali c bukan nilai hex yang valid.
  2. Jadi itu akan dikonversi c00c00000000.
  3. Yang menjadi # c00000, warna merah.

Ini sepertinya menjadi masalah utamanya Internet Explorer dan Opera (12) karena Chrome (31) dan Firefox (26) mengabaikan ini.

P.S. Angka-angka dalam tanda kurung adalah versi browser yang saya uji.

.

Pada catatan yang lebih ringan

Chuck Norris tidak sesuai dengan standar web. Standar web sesuai   untuk dia. # BADA55


219
2017-11-30 14:05



Spesifikasi HTML WHATWG memiliki algoritme yang tepat untuk mengurai nilai warna lawas: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

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

Sebagai contoh, perhatikan bahwa setiap karakter diuraikan sebagai digit hex dan kemudian digeser ke integer 32-bit tanpa memeriksa limpahan. Hanya delapan digit hex yang cocok dengan bilangan bulat 32-bit, yang mengapa hanya 8 karakter terakhir yang dipertimbangkan. Setelah mengurai digit heksa menjadi bilangan bulat 32-bit, mereka kemudian dipotong menjadi 8-bit bilangan bulat dengan membaginya dengan 16 sampai mereka masuk ke 8-bit, itulah mengapa nol memimpin diabaikan.

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

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

186
2017-09-27 22:01



Menjawab: 

  • Browser akan mencoba mengonversi Chuck Norris menjadi nilai heksadesimal.
  • Sejak c adalah satu-satunya karakter hex yang valid dalam Chuck Norris, 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 dipotong dari masing-masing grup, meninggalkan nilai rgb c00000 yang merupakan warna kemerahan bata-kemerahan.

166
2018-05-24 05:18



Alasannya adalah browser bisa tidak mengerti dan mencoba entah bagaimana menerjemahkannya ke apa yang dapat dipahami dan dalam hal ini menjadi nilai heksadesimal!

chucknorris dimulai dengan c karakter yang dikenali dalam heksadesimal, juga mengubah semua karakter yang tidak dikenal menjadi 0!

Begitu chucknorris dalam format heksadesimal menjadi: c00c00000000, semua karakter lain menjadi 0 dan c tetap di mana mereka ...

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

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

Jadi hasil sebenarnya adalah:

bgcolor="#c00000";

Saya juga menambahkan langkah-langkah dalam gambar sebagai referensi cepat:

Why does HTML think “chucknorris” is a color?


133
2017-07-01 04:08



Chuck Norris adalah statistik dengan c browser membaca ke nilai heksadesimal.

karena a, b, c, d, e, f adalah karakter dalam heksadesimal

Browser chucknorris ubah ke c00c00000000 nilai heksadesimal.

Kemudian c00c00000000 nilai heksadesimal dikonversi menjadi RGB format (dibagi dengan 3)

c00c00000000 => R:c00c,G:0000,B:0000

Browser hanya membutuhkan 2 digit untuk menunjukkan warna.

R:c00c,G:0000,B:0000 => R:c0,G:00,B:00 => c00000

akhirnya, tunjukkan bgcolor = c00000 di browser web.

Berikut contoh yang ditunjukkan

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


3
2018-04-17 19:16