codes - html background color transparent
Warum hält HTML „chucknorris“ für eine Farbe? (6)
Wie erzeugen bestimmte zufällige Zeichenfolgen Farben, wenn sie als Hintergrundfarben in HTML eingegeben werden? Zum Beispiel:
<body bgcolor="chucknorris"> test </body>
... erstellt ein Dokument mit einem roten Hintergrund für alle Browser und Plattformen.
Interessanterweise produziert chucknorri
einen roten Hintergrund, während chucknorri
einen gelben Hintergrund erzeugt.
Was ist denn hier los?
Der Browser versucht, chucknorris
in einen chucknorris
Farbcode zu konvertieren, da dies kein gültiger Wert ist.
- In
chucknorris
ist alles außerc
kein gültiger Hex-Wert. - Es wird also in
c00c00000000
konvertiert. - Welches wird # c00000 , eine Rottöne .
Dies scheint vor allem bei Internet Explorer und Opera (12) ein Problem zu sein, da sowohl Chrome (31) als auch Firefox (26) dies einfach ignorieren.
PS Die Zahlen in Klammern sind die Browserversionen, die ich getestet habe.
.
Leichter
Chuck Norris entspricht nicht den Webstandards. Webstandards entsprechen ihm. # BADA55
Der Grund ist, dass der Browser es nicht verstehen kann und versuchen kann , es irgendwie in das zu verstehen, was er verstehen kann, und in diesem Fall in einen Hexadezimalwert! ...
chucknorris
beginnt mit c
, einem erkannten Zeichen im Hexadezimal- chucknorris
, und konvertiert alle nicht erkannten Zeichen in 0
!
chucknorris
im hexadezimalen Format wird also: c00c00000000
, alle anderen Zeichen werden 0
und c
bleibt dort, wo sie sind ...
Jetzt werden sie für RGB
(rot, grün, blau) durch 3 geteilt ... R: c00c, G: 0000, B:0000
...
Wir wissen jedoch, dass das gültige Hexadezimal für RGB nur 2 Zeichen ist, R: c0, G: 00, B:00
Das eigentliche Ergebnis ist also:
bgcolor="#c00000";
Ich habe auch die Schritte im Bild als Schnellreferenz hinzugefügt:
Die WHATWG-HTML-Spezifikation verfügt über den genauen Algorithmus zum Analysieren eines alten Farbwerts: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value
Der Code, den Netscape Classic zum Analysieren von Farbstrings verwendet, ist Open Source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155
Beachten Sie beispielsweise, dass jedes Zeichen als Hexadezimalzeichen analysiert wird und dann in eine 32-Bit-Ganzzahl verschoben wird, ohne auf Überlauf zu prüfen . Nur acht Hex-Ziffern passen in eine 32-Bit-Ganzzahl, weshalb nur die letzten 8 Zeichen berücksichtigt werden. Nachdem die Hex-Ziffern in 32-Bit-Ganzzahlen analysiert wurden, werden sie in 8-Bit-Ganzzahlen gekürzt, indem sie durch 16 geteilt werden, bis sie in 8-Bit passen. Aus diesem Grund werden führende Nullen ignoriert.
Update: Dieser Code stimmt nicht genau mit den Angaben in der Spezifikation überein. Der einzige Unterschied besteht jedoch in einigen Codezeilen. Ich denke, es wurden diese Zeilen hinzugefügt (in Netscape 4):
if (bytes_per_val > 4)
{
bytes_per_val = 4;
}
Die meisten Browser ignorieren einfach alle Nicht-Hex-Werte in Ihrer Farbzeichenfolge und ersetzen Nicht-Hex-Ziffern durch Nullen.
ChuCknorris
in c00c0000000
übersetzt. An diesem Punkt teilt der Browser die Zeichenfolge in drei gleiche Abschnitte auf, die die Werte Rot , Grün und Blau c00c 0000 0000
: c00c 0000 0000
. Zusätzliche Bits in jedem Abschnitt werden ignoriert, wodurch das Endergebnis #c00000
das eine rötliche Farbe hat.
Beachten Sie, dass dies nicht für die CSS-Farbanalyse gilt, die dem CSS-Standard entspricht.
<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>
chucknorris
ich nicht zustimmen, aber gemäß den Regeln für das Parsing eines von @Yuhong Bao geposteten Farbwerts chucknorris
chucknorris NICHT #CC0000
, sondern eher #C00000
, einem sehr ähnlichen, jedoch etwas anderen Rotton. Ich habe das Firefox ColorZilla Add-On verwendet , um dies zu überprüfen.
Die Regeln besagen:
- Machen Sie aus der Zeichenfolge eine Länge, die ein Vielfaches von 3 ist, indem Sie 0s hinzufügen:
chucknorris0
- Trennen Sie die Saite in 3 Saiten gleicher Länge:
chuc knor ris0
- kürzen Sie jede Zeichenfolge auf 2 Zeichen:
ch kn ri
- Behalten Sie die Hex-Werte bei, und fügen Sie bei Bedarf 0 hinzu:
C0 00 00
Ich konnte diese Regeln verwenden, um die folgenden Zeichenfolgen richtig zu interpretieren:
-
LuckyCharms
-
Luck
-
LuckBeALady
-
LuckBeALadyTonight
-
GangnamStyle
UPDATE: Die ursprünglichen Antworter, die sagten, dass die Farbe #CC0000
haben ihre Antworten seitdem #CC0000
, um die Korrektur #CC0000
.
Antworten:
- Der Browser versucht, chucknorris in einen Hexadezimalwert umzuwandeln.
- Da
c
das einzige gültige Hex-Zeichen in chucknorris ist , ändert sich der Wert in:c00c00000000
( 0 für alle ungültigen Werte ). - Der Browser teilt das Ergebnis in drei Gruppen auf:
Red = c00c
,Green = 0000
,Blue = 0000
. - Da gültige Hex-Werte für HTML-Hintergründe nur 2 Ziffern für jeden
c00000
( r , g , b ) enthalten, werden die letzten 2 Ziffern aus jeder Gruppe abgeschnitten, so dass ein rgb-Wert vonc00000
übrigc00000
der eine ziegelrötlich getönte Farbe darstellt.