Dlaczego HTML uważa, że „chucknorris” jest kolorem?

7485

W jaki sposób niektóre losowe ciągi tworzą kolory po wprowadzeniu jako kolory tła w HTML? Na przykład:

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

Rozwiń fragment kodu

... tworzy dokument z czerwonym tłem we wszystkich przeglądarkach i platformach.

Co ciekawe, choć chucknorritworzy również czerwone tło, chucknorrwytwarza żółte tło.

Co tu się dzieje?

html browser background-color użytkownik456584
źródło

154

Na marginesie: nie używaj bgcolor. Użyj CSS background.

John Dvorak

47

Dlaczego kiedykolwiek chcesz dodać kolor tła o nazwie chucknorris? Jaki był oczekiwany kolor?

masterFly,

106

@masterFly: Nie wiem, dlaczego mój komentarz pod zaakceptowaną odpowiedzią został usunięty, ponieważ „nie jest konstruktywny”, ponieważ dość dobrze odpowiada na twoje pytanie: ludzie cały czas eksperymentują z tymi rzeczami. Miałem zaledwie 10 lat, kiedy to odkryłem, i wszystko, co wtedy robiłem, to grzebanie wokoło i zobaczenie, co się stało. Nie zawsze musisz mieć praktyczny powód, aby coś zrobić, zwłaszcza coś tak niepoważnego jak to.

BoltClock

49

a <body bgcolor="stevensegal">test </body> jest zielony

Chris

4

@BenDaggers Przeczytaj historię zmian przed dokonaniem kolejnej edycji. Css znacznik jest nieistotna i została już usunięta dwukrotnie.

Wyścigi lekkości na orbicie

6876

Jest to pozostałość po czasach Netscape:

Brakujące cyfry są traktowane jako 0 [...]. Niepoprawna cyfra jest po prostu interpretowana jako 0. Na przykład wszystkie wartości # F0F0F0, F0F0F0, F0F0F, #FxFxFx i FxFxFx są takie same.

Pochodzi z postu na blogu . Trochę o parsowaniu kolorów w programie Microsoft Internet Explorer, który obejmuje go bardzo szczegółowo, w tym różne długości wartości kolorów itp.

Jeśli zastosujemy reguły kolejno od postu na blogu, otrzymamy:

Zamień wszystkie niepoprawne znaki szesnastkowe na 0
```
chucknorris becomes c00c0000000
```
Wypełnij do następnej całkowitej liczby znaków podzielnych przez 3 (11 -> 12)
```
c00c 0000 0000
```
Podziel się na trzy równe grupy, przy czym każdy komponent reprezentuje odpowiadającą składową koloru koloru RGB:
```
RGB (c00c, 0000, 0000)
```
Obetnij każdy argument od prawej do dwóch znaków

Co daje następujący wynik:

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

Oto przykład pokazujący bgcoloratrybut w akcji, aby stworzyć tę „niesamowitą” próbkę koloru:

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

Rozwiń fragment kodu

To także odpowiada na drugą część pytania; dlaczego bgcolor="chucknorr"wytwarza żółty kolor? Cóż, jeśli zastosujemy reguły, ciąg będzie:

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

Co daje kolor jasnożółtego złota. Ponieważ ciąg zaczyna się od 9 znaków, tym razem utrzymujemy drugie C, więc kończy się na końcowej wartości koloru.

Po raz pierwszy zetknąłem się z tym, gdy ktoś wskazał, że możesz to zrobić, color="crap"i cóż, okazuje się, że jest brązowy.

dziarskość
źródło

174

Należy zauważyć, że wbrew temu, co twierdzi, że na blogu, kiedy dojdziesz do obsługi ciągów 3-char, ty duplikat każdy znak, zamiast poprzedzenie 0. czyli 0F6staje #00FF66, nie #000F06.

Aaron Dufour,

634

@usr: HTML opiera się na celowym ignorowaniu nieprawidłowo wprowadzonych danych;)

Lily Ballard,

59

Możesz także użyć mojego losowego łańcucha do konwertera kolorów css, aby uzyskać kolor dla określonego łańcucha. Jest oparty na 5 krokach do obliczenia koloru sznurka według Jeremy'ego Goodella .

TimPietrusky 11.03.13

15

Ukryta szansa na semantykę? Możesz zrobić kilka stron błędów w ten sposób: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>Możesz dodać div z innym tłem lub coś takiego, więc nie jest to tak szokujące z estetycznego punktu widzenia.

Theraot

32

@Theraot też bgcolor="success"jest fajny zielony. Co ciekawe, można zastąpić te kolory za pomocą selektorów atrybutów / wartości CSS (np td[bgcolor="chucknorris"] {...}.).

daiscog

970

Przepraszam, że się nie zgadzam, ale zgodnie z zasadami analizy starszej wartości koloru opublikowanej przez @Yuhong Bao , chucknorrisNIE ZNACZY#CC0000 , ale raczej #C00000bardzo podobny, ale nieco inny odcień czerwieni. Użyłem Firefox ColorZilla dodatek do sprawdzenia tego.

Reguły stanowią:

ustaw ciąg o wielokrotności 3, dodając 0: chucknorris0
rozdziel ciąg na 3 ciągi o równej długości: chuc knor ris0
skróć każdy ciąg do 2 znaków: ch kn ri
zachowaj wartości szesnastkowe i w razie potrzeby dodaj 0: C0 00 00

Mogłem użyć tych reguł, aby poprawnie zinterpretować następujące ciągi:

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

AKTUALIZACJA: Oryginalni autorzy odpowiedzi, którzy twierdzili, że kolor był #CC0000od tego czasu, edytowali swoje odpowiedzi, aby uwzględnić poprawkę.

Jeremy Goodell
źródło

86

Zrozumiałem, błędnie zinterpretowałem niektóre instrukcje parsowania: „adamlevine” = „ada00e000e” = „ada00e000e00” = „ada0 0e00 0e00” = „ad 0e 0e” - Idealne !!

Jeremy Goodell,

17

Jeśli jesteś zainteresowany, opublikowałem 5-stopniowy algorytm jako AKTUALIZACJĘ na podobne pytanie, które zadałem dzisiaj: stackoverflow.com/questions/12939234/...

Jeremy Goodell,

18

@TimPietrusky stworzył to cholernie niesamowite narzędzie demonstracyjne do losowych nazw kolorów. Po prostu przejdź tutaj: randomstringtocsscolor.com i kliknij pole i wpisz „chucknorris”.

Jeremy Goodell,

4

adamlevinedziała jak na jsfiddle.net/LdyZ8/2959, ale litery są blokowane, w ada00e000ektórych są wstawiane, ale ada00e000e00następnie zmniejszane do typowej 6-cyfrowej wartości HEX, [ad]a0[0e]00[0e]00co powoduje, że ad0e0e pojawia się w powyższym jsfiddle.

Martin

3

Byłoby lepiej, gdyby ta odpowiedź zawierała tylko bieżący stan - historia tej odpowiedzi i innych odpowiedzi należy do podsumowań edycji i / lub komentarzy.

Peter Mortensen

397

Większość przeglądarek po prostu zignoruje wszelkie wartości NIE-szesnastkowe w łańcuchu kolorów, zastępując cyfry nieszesnastkowe zerami.

ChuCknorrisprzekłada się na c00c0000000. W tym momencie, przeglądarka będzie podzielić ciąg na trzy równe części, wskazując, Czerwony , Zielony i Niebieski wartości: c00c 0000 0000. Dodatkowe bity w każdej sekcji zostaną zignorowane, co daje końcowy wynik #c00000w kolorze czerwonawym.

Uwaga: nie dotyczy to analizy kolorów CSS, która jest zgodna ze standardem 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>

Rozwiń fragment kodu

Mike Christensen
źródło

7

Chociaż wciąż jestem ciekawy, dlaczego OP powiedział „w CSS”, a nie „w HTML” - może używają bardzo starej przeglądarki, lub po prostu się mylą?

Mike Christensen

7

Zatem jest bardziej niż prawdopodobne, że używa przestarzałego bgcoloratrybutu.

animuson

12

Nieprawidłowe postacie nie są pomijane, są traktowane jako 0.

traktuj swoje mody dobrze

5

(Kiedy ta odpowiedź może być martwa) sugestia: Zamiast tego użyj koloru tła, aby zademonstrować kolory. Kolor tekstu jest na tak małym obszarze względnym, że trudno dostrzec różnice lub podobieństwa

Zoe

304

Przeglądarka próbuje przekonwertować chucknorrisna kod koloru szesnastkowego, ponieważ nie jest to poprawna wartość.

W chucknorris, wszystko oprócz cnie jest prawidłową wartością szesnastkową.
Więc jest konwertowany na c00c00000000.
Który staje się # c00000 , odcieniem czerwieni.

Wydaje się, że jest to problem przede wszystkim w Internet Explorerze i Operze (12), ponieważ zarówno Chrome (31), jak i Firefox (26) po prostu to ignorują.

PS Liczby w nawiasach to wersje przeglądarek, na których testowałem.

.

Na lżejszej nucie

Chuck Norris nie spełnia standardów internetowych. Standardy sieciowe są z nim zgodne. # BADA55

aWebDeveloper
źródło

295

Powodem jest to, że przeglądarka nie może tego zrozumieć i spróbować w jakiś sposób przetłumaczyć go na to, co może zrozumieć, aw tym przypadku na wartość szesnastkową! ...

chucknorriszaczyna się od crozpoznanego znaku w systemie szesnastkowym, a także konwertuje wszystkie nierozpoznane znaki na 0!

Tak więc chucknorrisw formacie szesnastkowym staje się: c00c00000000wszystkie pozostałe znaki stają się 0i cpozostają tam, gdzie się znajdują ...

Teraz dzielą się przez 3 dla RGB(czerwony, zielony, niebieski) ... R: c00c, G: 0000, B:0000...

Ale wiemy, że poprawna wartość szesnastkowa dla RGB to tylko 2 znaki R: c0, G: 00, B:00

Tak więc prawdziwy wynik to:

bgcolor="#c00000";

Dodałem również kroki na obrazku jako szybkie odniesienie dla Ciebie:

Alireza
źródło

23

To takie słodkie wytłumaczenie: D: D: D

Dominik Bucher,

2

Tak mądre i bardzo proste i proste wyjaśnienie, jakiego kiedykolwiek doświadczyłem

Saurin Vala

1

bardzo kreatywna odpowiedź :)

ahmednawazbutt

222

Specyfikacja WHATWG HTML ma dokładny algorytm parsowania starszej wartości koloru: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

Kod Netscape Classic używany do analizowania ciągów kolorów jest open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Na przykład zauważ, że każdy znak jest analizowany jako cyfra szesnastkowa, a następnie jest przenoszony do 32-bitowej liczby całkowitej bez sprawdzania przepełnienia . Tylko osiem cyfr szesnastkowych mieści się w 32-bitowej liczbie całkowitej, dlatego brane są pod uwagę tylko ostatnie 8 znaków. Po przetworzeniu cyfr szesnastkowych na 32-bitowe liczby całkowite są one następnie obcinane do 8-bitowych liczb całkowitych, dzieląc je przez 16, aż zmieszczą się w 8-bitowe, dlatego zera wiodące są ignorowane.

Aktualizacja: ten kod nie jest dokładnie zgodny z definicją w specyfikacji, ale jedyną różnicą jest kilka linii kodu. Myślę, że to te linie zostały dodane (w Netscape 4):

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

Yuhong Bao
źródło

Dzięki, pokazałeś mi, gdzie jest stary kod źródłowy Netscape ... dlaczego tak trudno go znaleźć?

kb1000

202

Odpowiedź:

Przeglądarka spróbuje przekonwertować chucknorris na wartość szesnastkową.
Ponieważ cjest to jedyny prawidłowy znak szesnastkowy w chucknorris , wartość zmienia się w: c00c00000000( 0 dla wszystkich wartości, które były nieprawidłowe ).
Przeglądarka następnie dzieli wynik na 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
Ponieważ prawidłowe wartości szesnastkowe dla tła html zawierają tylko 2 cyfry dla każdego typu koloru ( r , g , b ), ostatnie 2 cyfry są obcinane z każdej grupy, pozostawiając wartość rgb, c00000której kolor jest ceglasto-czerwonawy.

Webeng
źródło

22

chucknorris zaczyna się na c , a przeglądarka odczytuje go do wartości szesnastkowej.

Ponieważ A, B, C, D, E i F są znakami szesnastkowymi .

Przeglądarka konwertuje chucknorrisdo wartości szesnastkowym C00C00000000.

Następnie C00C00000000wartość szesnastkowa jest konwertowana do formatu RGB (podzielona przez 3):

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

Przeglądarka potrzebuje tylko dwóch cyfr do wskazania koloru:

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

Na koniec pokaż bgcolor = C00000w przeglądarce internetowej.

Oto przykład, który to pokazuje:

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

Rozwiń fragment kodu

sameera lakshitha
źródło

15

Te zasady przetwarzania kolorów atrybutów starszych wymaga dodatkowych czynności niż wymienione w istniejących odpowiedzi. Skrócony komponent do części dwucyfrowej jest opisany jako:

Odrzuć wszystkie postacie oprócz ostatnich 8
Odrzucaj wiodące zera jeden po drugim, o ile wszystkie składniki mają wiodące zero
Odrzuć wszystkie postacie oprócz pierwszych 2

Kilka przykładów:

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

Poniżej znajduje się częściowa implementacja algorytmu. Nie obsługuje błędów ani przypadków, w których użytkownik wprowadza prawidłowy kolor.

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Salman A.
źródło

Dlaczego HTML uważa, że ​​„chucknorris” jest kolorem?

Odpowiedzi:

Dlaczego HTML uważa, że „chucknorris” jest kolorem?