HTML neden “chucknorris” in bir renk olduğunu düşünüyor?

7487

Bazı rastgele dizeler HTML'de arka plan renkleri olarak girildiğinde renkler nasıl ortaya çıkıyor? Örneğin:

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

Snippet'i genişlet

... tüm tarayıcılarda ve platformlarda kırmızı arka plana sahip bir belge oluşturur .

İlginç bir şekilde, chucknorrikırmızı bir arka plan chucknorroluştururken, sarı bir arka plan üretir.

Burada neler oluyor?

html browser background-color

— user456584
kaynak

154

Yan not olarak: kullanmayın bgcolor. CSS kullanın background.

— John Dvorak

47

Neden hiç denilen bir arka plan rengi eklemek istediniz chucknorris? Beklenen renk neydi?

— masterFly

106

@masterFly: Kabul edilen cevap altındaki yorumumun "yapıcı değil" olarak neden silindiğini bilmiyorum, çünkü sorunuzu oldukça iyi cevaplıyor: insanlar her zaman bu şeyleri deniyorlar. Bunu keşfettiğimde sadece 10 yaşındaydım ve o zaman tek yaptığım etrafı karıştırmak ve neler olduğunu görmekti. Her zaman bir şey yapmak için pratik bir nedene sahip olmak zorunda değilsiniz, özellikle bu kadar saçma bir şey.

— BoltClock

49

ve <body bgcolor="stevensegal">test </body> yeşil

— Chris

4

@BenDaggers Lütfen başka bir düzenleme yapmadan önce düzeltme geçmişini okuyun. Css etiketi alakasız ve zaten iki kez kaldırıldı.

— Yörüngedeki Hafiflik Yarışları

6878

Netscape günlerinden kalma bir engel:

Eksik rakamlar 0 [...] olarak kabul edilir. Yanlış bir rakam basitçe 0 olarak yorumlanır. Örneğin # F0F0F0, F0F0F0, F0F0F, #FxFxFx ve FxFxFx değerlerinin hepsi aynıdır.

Blog gönderisinden Microsoft Internet Explorer'ın renk ayrıştırması hakkında , renk uzunlukları, vb.

Kuralları blog gönderisinden sırayla uygularsak, aşağıdakileri elde ederiz:

Geçersiz olmayan tüm onaltılık karakterleri 0'larla değiştir
```
chucknorris becomes c00c0000000
```
Bir sonraki toplam karakter sayısına 3 ile bölünebilir (11 -> 12)
```
c00c 0000 0000
```
Her bileşen bir RGB renginin ilgili renk bileşenini temsil eden üç eşit gruba bölün:
```
RGB (c00c, 0000, 0000)
```
Bağımsız değişkenlerin her birini sağdan iki karaktere kadar kısaltın

Bu da aşağıdaki sonucu verir:

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

İşte bgcolorbu "şaşırtıcı" renk örneğini üretmek için eylem niteliğini gösteren bir örnek :

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

Snippet'i genişlet

Bu aynı zamanda sorunun diğer kısmını da cevaplar; neden bgcolor="chucknorr"sarı renk üretiyor? Kuralları uygularsak, dize:

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

Hangi açık sarı altın rengi verir. Dize 9 karakter olarak başladığında, bu sefer ikinci C'yi tutarız, bu nedenle son renk değerinde sonuçlanır.

Başlangıçta birisi yapabileceğinizi belirttiğinde karşılaştım color="crap"ve, kahverengi çıkıyor.

— tire
kaynak

174

Bu blog yazısı ne diyor sen 3-Char dizeleri ele varınca, sen rağmen, o Not çoğaltmak yerine 0'a prepending yerine, her bir karakteri yani 0F6olur #00FF66, değil #000F06.

— Aaron Dufour

634

@usr: HTML, hatalı biçimlendirilmiş girdileri kasıtlı olarak yok sayarak oluşturulmuştur;)

— Lily Ballard

59

Belirli bir dizenin rengini elde etmek için rastgele dizimi css renk dönüştürücüsüne de kullanabilirsiniz . Jeremy Goodell'in dize rengini hesaplamak için 5 adıma dayanır .

— TimPietrusky

15

Anlambilim için gizli bir fırsat mı? <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>Bununla bazı hata sayfaları yapabilirsiniz: Arka plana sahip bir div veya bunun gibi bir şey ekleyebilirsiniz, bu yüzden estetik açıdan şok edici değil.

— Theraot

32

@Theraot bgcolor="success"da güzel bir yeşildir. İlginç bir şekilde, CSS öznitelik / değer seçicileri (örn td[bgcolor="chucknorris"] {...}.) Kullanılarak bu renkler geçersiz kılınabilir .

— daiscog

970

Ben katılmıyorum üzgünüm ama tarafından yayınlanan bir miras renk değeri ayrıştırmak için kurallara göre @Yuhong Bao , chucknorrisdenk ETMEZ #CC0000, bunun yerine #C00000kırmızı bir çok benzer fakat biraz farklı renkten,. Bunu doğrulamak için Firefox ColorZilla eklentisini kullandım .

Kurallar şunları belirtir:

0'ları ekleyerek dizeyi 3'ün katı olan bir uzunluk yapın: chucknorris0
dizeyi 3 eşit uzunlukta dizeye ayırın: chuc knor ris0
her dizeyi 2 karaktere kısalt: ch kn ri
onaltılık değerleri koruyun ve gerektiğinde 0 ekleyin: C0 00 00

Aşağıdaki dizeleri doğru bir şekilde yorumlamak için bu kuralları kullanabildim:

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

GÜNCELLEME: Rengin olduğunu söyleyen orijinal yanıtlayanlar #CC0000, yanıtlarını düzeltmeyi içerecek şekilde düzenledi.

— Jeremy Goodell
kaynak

86

Anladım, ayrıştırma talimatlarından bazılarını yanlış yorumlamıştım: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Mükemmel !!

— Jeremy Goodell

17

İlgilenmeniz durumunda, 5 adımlı algoritmayı bugün gönderdiğim benzer bir soruya UPDATE olarak gönderdim: stackoverflow.com/questions/12939234/…

— Jeremy Goodell

18

@ Timpietrusky rastgele renk isimleri için bu korkutucu inanılmaz demo aracı yarattı. Sadece buraya gidin: randomstringtocsscolor.com ve kutuyu tıklayın ve "chucknorris" yazın.

— Jeremy Goodell

4

adamlevinejsfiddle.net/LdyZ8/2959 uyarınca çalışır, ancak içine ada00e000edoldurulmuş harfler engellenir , ada00e000e00ancak daha sonra [ad]a0[0e]00[0e]00yukarıdaki jsfiddle'da görünen ad0e0e yapmanın tipik HEX 6 basamak değerine indirilir.

— Martin

4

Bu cevabın sadece mevcut durumu içermesi daha iyi olurdu - bu cevabın geçmişi ve diğer cevaplar düzenleme özetlerine ve / veya yorumlara aittir.

— Peter Mortensen

397

Çoğu tarayıcı, renk dizenizdeki altıgen olmayan NON değerlerini yok sayar ve altıgen olmayan basamakları sıfırlarla değiştirir.

ChuCknorrisçevirir c00c0000000. Bu noktada, tarayıcı belirten üç eşit parçaya dize böleceğiz Kırmızı , Yeşil ve Mavi değerlerini: c00c 0000 0000. Her bölümde ekstra bitler göz ardı edilir, bu da #c00000kırmızımsı bir renk olan nihai sonucu verir .

Bu , CSS standardını izleyen CSS renk ayrıştırması için geçerli değildir .

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>

Snippet'i genişlet

— Mike Christensen
kaynak

7

Yine de OP'nin neden "HTML'de değil" "CSS'de" dediğini merak ediyorum - Belki de çok eski bir tarayıcı kullanıyorlar ya da sadece yanlış mı?

— Mike Christensen

7

Yani artık kullanımdan kaldırılmış bgcolorniteliği kullanıyor .

— animuson

12

Geçersiz karakterler atlanmaz, 0 olarak kabul edilir.

— Modlarınızı iyi değerlendirin

5

(Bu cevap ölü olabilirken) öneri: Renkleri göstermek için bunun yerine arka plan rengini kullanın. Metin rengi çok küçük göreceli bir alanın üzerinde, farklılıkları veya benzerlikleri görmek zor

— Zoe

304

Tarayıcı chucknorrisonaltılık renk koduna dönüştürmeye çalışıyor , çünkü geçerli bir değer değil.

İçinde chucknorris, hariç her şey cgeçerli bir onaltılık değer değildir.
Böylece dönüştürülür c00c00000000.
Hangi # c00000 , kırmızı bir gölge olur .

Hem Chrome (31) hem de Firefox (26) bunu görmezden geldiğinden, bu öncelikle Internet Explorer ve Opera (12) ile ilgili bir sorun gibi görünüyor .

PS Parantez içindeki sayılar test ettiğim tarayıcı sürümleridir.

.

Daha hafif bir notta

Chuck Norris web standartlarına uymuyor. Web standartları ona uygundur. # Bada55

— aWebDeveloper
kaynak

296

Nedeni tarayıcı olabilir olduğunu anlamıyorum bunu ve bir şekilde bir onaltılık değer haline o anlayabilir ne ve bu durumda çevirmeyi deneyin! ...

chucknorrisconaltılık karakter olarak tanınan karakterle başlar , ayrıca tüm tanınmayan karakterleri dönüştürür 0!

Yani chucknorrisonaltılık biçimde: c00c00000000diğer tüm karakterler olurlar 0ve coldukları yerde kalırlar ...

Şimdi RGB(kırmızı, yeşil, mavi) için 3'e bölünüyorlar ... R: c00c, G: 0000, B:0000...

Ancak RGB için geçerli onaltılık değerin sadece 2 karakter olduğunu biliyoruz, R: c0, G: 00, B:00

Yani gerçek sonuç:

bgcolor="#c00000";

Ayrıca, resimdeki adımları sizin için hızlı bir referans olarak ekledim:

— Alireza
kaynak

23

Bu çok şirin bir açıklama: D: D: D

— Dominik Bucher

2

Şimdiye kadar yaşamış olduğum kadar akıllıca ve çok basit ve düz ileri açıklama

— Saurin Vala

1

very creative answer :)

— ahmednawazbutt

222

WHATWG HTML spesifikasyonu, eski bir renk değerini ayrıştırmak için tam bir algoritmaya sahiptir: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

Renk dizelerini ayrıştırmak için kullanılan Netscape Classic kodu açık kaynaktır: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Örneğin, her karakterin onaltılık bir basamak olarak ayrıştırıldığına ve sonra taşma kontrolü yapılmadan 32 bitlik bir tam sayıya kaydırıldığına dikkat edin . 32 bitlik bir tam sayıya yalnızca sekiz onaltılık rakam sığar, bu nedenle yalnızca son 8 karakter dikkate alınır. Onaltılık basamakları 32 bit tamsayılara ayrıştırdıktan sonra, 8 bite sığana kadar 16'ya bölerek 8 bit tamsayılara bölünürler, bu nedenle önde gelen sıfırlar yok sayılır.

Güncelleme: Bu kod, spesifikasyonda tanımlananla tam olarak eşleşmiyor, ancak tek fark birkaç satır kod var. (Netscape 4'te) eklenen bu satırlar olduğunu düşünüyorum:

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

— Yuhong Bao
kaynak

Teşekkürler, bana eski Netscape kaynak kodunun nerede olduğunu gösterdin ... neden bu kadar zor?

— kb1000

202

Cevap:

Tarayıcı chucknorris'i onaltılık bir değere dönüştürmeye çalışacaktır .
Yana ctek geçerli onaltılık karakter ChuckNorris , değer döner içine: c00c00000000( geçersiz olan tüm değerler için 0 ).
Tarayıcı, daha sonra 3 groupds içine sonucu böler: Red = c00c, Green = 0000, Blue = 0000.
Html arkaplanları için geçerli onaltılık değerler her renk türü için yalnızca 2 basamak içerdiğinden ( r , g , b ), her gruptan son 2 basamak kesilir ve rgb değeri c00000tuğla kırmızımsı tonlu bir renk kalır.

— Webeng
kaynak

22

chucknorris c ile başlar ve tarayıcı onu onaltılık bir değere okur.

Çünkü A, B, C, D, E ve F onaltılık karakterlerdir .

Tarayıcı chucknorrisonaltılık bir değere dönüştürülür C00C00000000.

Daha sonra C00C00000000onaltılık değer RGB formatına dönüştürülür (3'e bölünür):

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

Tarayıcı, rengi belirtmek için yalnızca iki basamağa ihtiyaç duyar:

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

Son olarak, bgcolor = C00000web tarayıcısında gösterin .

İşte bunu gösteren bir örnek:

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

Snippet'i genişlet

— Sameera Lakhitha
kaynak

15

Eski niteliklerini renkleri ayrıştırmak için kurallar mevcut cevapları belirtilenler haricindeki ek adımları içerir. 2 basamaklı kısma bileşen şu şekilde tanımlanır:

Son 8 dışındaki tüm karakterleri sil
Tüm bileşenlerin önünde sıfır varsa, baştaki sıfırları tek tek atın
İlk 2 hariç tüm karakterleri atın

Bazı örnekler:

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

Aşağıda algoritmanın kısmi bir uygulaması verilmiştir. Kullanıcının geçerli bir renk girdiği hataları veya durumları işlemez.

Kod snippet'ini göster

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>

Snippet'i genişlet

— Salman A
kaynak