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?

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