Pytanie Dlaczego HTML myśli "chucknorris" jest kolorem?


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

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

... tworzy dokument z czerwone tło we wszystkich przeglądarkach i platformach.

Co ciekawe, podczas gdy chucknorri wytwarza również czerwone tło, chucknorr wytwarza żółte tło.

Co się dzieje tutaj?


6549
2017-11-29 22:54


pochodzenie


Na marginesie: nie używaj bgcolor. Użyj CSS background. - John Dvorak
Dlaczego kiedykolwiek chcesz dodać kolor tła o nazwie chucknorris? Jaki był oczekiwany kolor? - masterFly
@masterFly: Nie wiem, dlaczego mój komentarz pod zaakceptowaną odpowiedzią został usunięty z powodu "braku konstruktywności", ponieważ dość dobrze odpowiada na twoje pytanie: ludzie eksperymentują z tymi rzeczami przez cały czas. Miałem zaledwie 10 lat, kiedy to odkryłem i wszystko, co robiłem w tamtym czasie, rozśmieszało mnie i widziałem, co się stało. Nie zawsze musisz mieć praktyczny powód do robienia czegoś, zwłaszcza coś tak niepoważnego jak to. - BoltClock♦
i <body bgcolor="stevensegal"> test </ body> jest zielony - Chris
Wspaniały! Zacznę używać tego teraz. Za każdym razem, gdy próbuję wpisać czerwony, automatycznie kończy się rebeccapurple. PS google to, jeśli nie znasz tej historii. - Simon_Weaver


Odpowiedzi:


To przystanek z czasów Netscape:

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

To z bloga Trochę rant o analizie kolorów Microsoft Internet Explorer który bardzo szczegółowo opisuje, w tym różne długości wartości kolorów itp.

Jeśli zastosujemy reguły po kolei z posta na blogu, otrzymamy:

  1. Zastąp wszystkie niepoprawne znaki szesnastkowe zerami

    chucknorris becomes c00c0000000
    
  2. Obróć do następnej całkowitej liczby znaków podzielnych przez 3 (11 -> 12)

    c00c 0000 0000
    
  3. Podziel się na trzy równe grupy, przy czym każdy składnik reprezentuje odpowiedni składnik koloru koloru RGB:

    RGB (c00c, 0000, 0000)
    
  4. Obcięcie każdego z argumentów od prawej do dwóch znaków

Który daje następujący wynik:

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

Oto przykład demonstrujący bgcolor atrybut w akcji, aby wyprodukować 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>

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

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

Który daje jasnożółty złoty kolor. Ponieważ ciąg zaczyna się od 9 znaków, tym razem zachowujemy drugie C, a więc kończy się ono ostateczną wartością koloru.

Początkowo napotkałem to, gdy ktoś wskazał, że możesz to zrobić color="crap" i, cóż, wychodzi brązowo.


6051
2017-11-30 21:53



Zauważ, że pomimo tego, co pisze ten wpis na blogu, kiedy masz do czynienia z ciągami 3-znakowymi, ty duplikować każdy znak, zamiast poprzedzać 0. tj. 0F6 staje się #00FF66, nie #000F06. - Aaron Dufour
@usr: HTML opiera się na celowym ignorowaniu zniekształconych danych wejściowych;) - Kevin Ballard
Możesz również użyć mojego losowy ciąg znaków do koloru css konwerter, aby uzyskać kolor określonego łańcucha. Jest oparty na 5 kroków do obliczenia koloru sznurka przez Jeremy'ego Goodella. - TimPietrusky
Ukryta szansa na semantykę? W tym celu można utworzyć strony błędów: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span> Możesz dodać element div z innym tłem lub coś podobnego, więc nie jest to szokujące pod względem estetycznym. - Theraot
@ Theraot bgcolor="success" jest też ładną zielenią. Co ciekawe, można zastąpić te kolory za pomocą selektorów atrybutów / wartości CSS (na przykład., td[bgcolor="chucknorris"] {...}). - megaflop


Przykro mi, że się nie zgadzam, ale zgodnie z regułami analizowania wartości kolorów ze starszej wersji przesłanej przez @Yuhong Bao, chucknorris NIE równa się #CC0000, ale raczej do #C00000, bardzo podobny, ale nieco inny odcień czerwieni. Użyłem Dodatek Firefox ColorZilla aby to zweryfikować.

Zasady stanowią:

  • utwórz ciąg o długości równej wielokrotności 3 przez dodanie 0s: chucknorris0
  • oddzielić ciąg na 3 ciągi o równej długości: chuc knor ris0
  • skracać każdy ciąg do 2 znaków: ch kn ri
  • zachowaj wartości szesnastkowe i dodaj 0 w razie potrzeby: C0 00 00

Byłem w stanie użyć tych reguł, aby prawidłowo interpretować następujące ciągi:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle 

AKTUALIZACJA: Oryginalni respondenci, którzy powiedzieli, że to kolor #CC0000 od tego czasu zredagowali swoje odpowiedzi, aby uwzględnić korektę.


829
2017-10-17 17:55



Wyjaśniłem to, źle zinterpretowałem niektóre z parsujących instrukcji: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Perfect! - Jeremy Goodell
Jeśli jesteś zainteresowany, zamieściłem algorytm 5-etapowy jako AKTUALIZACJĘ na podobne pytanie, które opublikowałem dzisiaj: stackoverflow.com/questions/12939234/... - Jeremy Goodell
@TimPietrusky stworzył to niesamowite narzędzie demo dla losowych nazw kolorów. Po prostu idź tutaj: randomstringtocsscolor.com i kliknij pole i wpisz "chucknorris". - Jeremy Goodell
adamlevine działa tak jak na jsfiddle.net/LdyZ8/2959 ale litery są zablokowane ada00e000e który jest wyściełany do ada00e000e00 ale następnie zredukowane do typowej sześciocyfrowej wartości HEX [ad]a0[0e]00[0e]00 w ten sposób czyniąc ad0e0e, który pojawia się w jsfiddle powyżej. - Martin
Byłoby lepiej, gdyby ta odpowiedź była tylko zawierał obecny stan - historia tej odpowiedzi i inne odpowiedzi znajdują się w podsumowaniach edycji i / lub komentarzach. - Peter Mortensen


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

ChuCknorris przetłumaczyć na c00c0000000. W tym momencie przeglądarka podzieli ciąg na trzy równe sekcje, wskazując Czerwony, Zielony i niebieski wartości: c00c 0000 0000. Dodatkowe bity w każdej sekcji będą ignorowane, co daje ostateczny wynik #c00000 który jest czerwonawym kolorem.

Uwaga, to robi nie zastosuj do parsowania kolorów CSS, które są zgodne 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>


338
2017-11-29 23:01



Chociaż wciąż jestem ciekawy, dlaczego OP powiedział "w CSS", a nie "w HTML" - może używają super starej przeglądarki lub po prostu się mylą? - Mike Christensen
Tak więc najprawdopodobniej używa przestarzałego bgcolor atrybut. - animuson♦
Być może będzie tak uprzejmy, aby opublikować ten magiczny HTML, który produkuje czerwony Chuck Norris w "wszystkich przeglądarkach i platformach". - Mike Christensen
Nieprawidłowe znaki nie są pomijane, są traktowane jako 0. - phyzome
(Gdy ta odpowiedź może być martwa) sugestia: Użyj koloru tła zamiast przedstawienia kolorów. Kolor tekstu jest nad tak małym względnym obszarem, że trudno dostrzec różnice lub podobieństwa - Zoe


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

  1. W chucknorris, wszystko oprócz c nie jest poprawną wartością szesnastkową.
  2. Więc się konwertuje c00c00000000.
  3. Który staje # c00000, odcień czerwieni.

Wydaje się, że jest to problem głównie z Internet Explorer i Opera (12) ponieważ zarówno Chrome (31), jak i Firefox (26) po prostu to ignorują.

P.S. Liczby w nawiasach są wersjami przeglądarek, które testowałem.

.

Na lżejszą nutę

Chuck Norris nie spełnia standardów internetowych. Standardy internetowe są zgodne   do niego. # BADA55


220
2017-11-30 14:05





Specyfikacja HTML WHATWG ma dokładny algorytm do analizy 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 parsowania ciągów kolorowych to open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Na przykład zauważ, że każdy znak jest parsowany jako cyfra szesnastkowa, a następnie jest przesuwany do 32-bitowej liczby całkowitej bez sprawdzania przepełnienia. Tylko osiem cyfr szesnastkowych mieści się w 32-bitowej liczbie całkowitej, dlatego uwzględniane są tylko ostatnie 8 znaków. Po przeanalizowaniu cyfr szesnastkowych w 32-bitowych liczbach całkowitych, są one następnie obcięte do 8-bitowych liczb całkowitych przez podzielenie ich przez 16, aż zmieszczą się w 8-bitowe, i dlatego początkowe zera są ignorowane.

Aktualizacja: ten kod nie pasuje dokładnie do tego, co jest zdefiniowane 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;
}

187
2017-09-27 22:01





Odpowiedź: 

  • Przeglądarka spróbuje przekonwertować chucknorris do wartości szesnastkowej.
  • Od c jest jedyną poprawną literą w chucknorris, wartość zmienia się w: c00c00000000(0 dla wszystkich wartości, które były nieprawidłowe).
  • Przeglądarka dzieli wynik na 3 grupy: 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, sol, b), 2 ostatnie cyfry są skracane z każdej grupy, pozostawiając wartość rgb równą c00000 który jest czerwono-stonowanym kolorem.

167
2018-05-24 05:18





Powodem jest przeglądarka nie rozumieć to i staraj się jakoś przetłumaczyć na to, co może zrozumieć, a w tym przypadku na wartość szesnastkową!

chucknorris zaczynać z c który jest rozpoznawany jako znak szesnastkowy, a także konwertuje wszystkie nierozpoznane znaki na 0!

Więc chucknorris w formacie szesnastkowym staje się: c00c00000000, stają się wszystkie inne postacie 0 i c pozostaje tam, gdzie są ...

Teraz są podzielone przez 3 za RGB(czerwony, zielony, niebieski) ... R: c00c, G: 0000, B:0000...

Ale wiemy, że poprawna liczba szesnastkowa dla RGB to tylko 2 znaki, czyli R: c0, G: 00, B:00

Tak więc prawdziwy wynik to:

bgcolor="#c00000";

Dodałem również kroki w obrazie jako szybki odnośnik:

Why does HTML think “chucknorris” is a color?


135
2017-07-01 04:08



Brzmi jak to, co powie bucky - Tushortz
@Tushortz kto jest bucky? - Goku
@Goku Bucky jest zabawnym samouczkiem w języku programowania Youtube, który przechodzi przez uchwyt "thenewboston" - Tushortz


chucknorris to statystyki z do przeglądarka odczytała wartość szesnastkową.

ponieważ a, b, c, d, e, f są znaki w systemie szesnastkowym

Przeglądarka chucknorris Konwertuj na c00c00000000 wartość szesnastkowa.

Następnie c00c00000000 Wartość szesnastkowa jest konwertowana na RGB format (podzielony przez 3)

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

Przeglądarka potrzebuje tylko 2 cyfry, aby wskazać kolor.

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

wreszcie pokaż bgcolor = c00000 w przeglądarce internetowej.

Oto przykład demonstrujący

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


4
2018-04-17 19:16