Warum erzeugen seltsame Dinge im Schriftfarbenattribut echte Farben? [duplicate]

Question 1

Ich unterrichte einen jr. High-/High-School-Webprogrammierkurs, und wir beginnen mit einfachen Elementen und Attributen wie Schriftart und Farbe, bevor wir zu CSS übergehen. Ich weiß, dass Farben veraltet sind und Schriftarten nicht in HTML5 enthalten sind, aber für Unterrichtszwecke finde ich es praktisch, mit einfachen HTML-Tags zu beginnen und uns zu CSS hochzuarbeiten. Die Schüler haben viel Freude daran, in der ersten Unterrichtswoche die Farben auf einer Seite ändern zu können. (Ich bringe ihnen in Woche 1 auch Laufschrift und Blinzeln bei, informiere sie aber, dass sie Punkte verlieren, wenn sie sie jemals wieder benutzen).

Einer der Schüler fing an, Hausaufgaben mit seltsamen Dingen in den Farbattributwerten einzureichen, wie „Kegel“ oder „Spiderman“. Ich begann damit zu experimentieren und stellte fest, dass fast alles, was Sie in das Attribut color=”” des Font-Tags einfügen, eine Art Farbe erzeugt. Und es scheint, dass die Farbe in den neuesten Versionen von IE, Firefox, Chrome, Opera und Safari konsistent ist.

Ich habe festgestellt, dass das Einfügen von “LuckyCharms” als CSS-Farbe NICHT FUNKTIONIERT. Es scheint nur dort zu funktionieren, wo Farben in HTML-Attributen erwartet werden, zum Beispiel font color=”LuckyCharms” oder body bgcolor=”LuckyCharms”.

Ich versuche meiner Klasse zu erklären, warum dies passiert, und bisher konnte ich es nicht verstehen oder Google eine gute Antwort geben. Es scheint, dass es als Farbcode interpretiert wird, aber ich kann nicht verstehen, wie.

AKTUALISIEREN: Nach einigem Ausprobieren habe ich einen 5-Stufen-Algorithmus (unter Verwendung des bereitgestellten Links) ermittelt, um so ziemlich jeden String in die entsprechende Hex-Farbe umzuwandeln. Ich werde den Algorithmus hier zur Erbauung zukünftiger Besucher bereitstellen:

Ändern Sie jedes Nicht-Hex-Zeichen in eine 0.
Fügen Sie dem String Nullen hinzu, bis seine Länge ein Vielfaches von 3 ist.

Teilen Sie die Schnur in 3 gleiche Teile.
Wenn die Länge der Teilzeichenfolgen größer als 2 ist und alle drei Teilzeichenfolgen mit einer 0 beginnen, entfernen Sie die führenden Nullen aus jeder Zeichenfolge.
Wenn die Länge der Teilzeichenfolgen immer noch größer als 2 ist, kürzen Sie jede Teilzeichenfolge auf 2 Zeichen.

Das ist es, setzen Sie die Teilzeichenfolgen zusammen und Sie haben Ihren Hex-Farbcode. Ich habe diesen Algorithmus mit etwa 20 verschiedenen Beispielen verifiziert und die Ergebnisse mit dem Add-On-Farbwähler Firefox ColorZilla verglichen.

Beachten Sie, dass in diesem Fall die Regeln tatsächlich ausdrücklich in dem in einer der Antworten angegebenen Link angegeben sind und von allen Browsern eingehalten werden. Sie können sich also darauf verlassen, dass es in jedem Browser funktioniert (falls Sie wirklich lustige Farbnamen verwenden möchten).

Question 2

Die HTML 5-Spezifikation umfasst die Regeln zum Analysieren von Legacy-Farben.

Sie sind ziemlich lang und sollen es Browsern ermöglichen, konsistent zu sein, wie sie mit fehlerhaftem Code umgehen.

Question 3

Sehr interessant. Scheint, als würde der Browser jedes Zeichen interpretieren, das er kann (af), und den Rest auf Nullen belassen, wenn er nicht übereinstimmen kann. Zum Beispiel:

Spiderman
 00DE0 A

Braucht aber noch mehr Experimente.

Question 4

Das ist eine spannende Frage.

Durch kurzes Experimentieren habe ich herausgefunden, dass „Luck“ die gleiche Farbe (zumindest in meinen Augen) wie „LuckyCharms“ erzeugt, aber „LuckBeALady“ einen dunkleren Farbton erzeugt, während „LuckBeALadyTonight“ blauer ist.

Übrigens war mein erster Gedanke, dass es auf die erkennbaren Hex-Zeichen einwirkt, aber das verwandelt “LuckyCharms” in cca, was schwarz wird. Kombinationen von Nullen und den Hex-Zeichen, wie Madara Uchiba vorschlägt, konnten nicht dasselbe Grasgrün wie “LuckyCharms” darstellen.

Habe da keine Antwort.

Question 5

Die grundlegende Antwort auf das, was zu erwarten ist, lautet “es hängt vom Browser ab”. Eines der Probleme mit früheren HTML-Versionen vor 5 besteht darin, dass nicht angegeben ist, was passiert, wenn der Browser auf nicht standardmäßiges HTML stößt. Die Interpretation von @Madara Uchiha ist ein Beispiel dafür, wie ein Browser die Farbspezifikation interpretieren könnte, aber es ist genauso zulässig, dass der Browser abstürzt oder das CD-Fach auswirft oder die Auflösung Ihres Monitors auf 400 x 300 ändert px. Das ist natürlich nicht ideal – was Sie also sehen, ist die Idee eines Programmierers, was passieren sollte, wenn eine nicht standardmäßige HTML-Farbspezifikation angetroffen wird.

Der Grund, warum es mit CSS nicht passiert, ist, dass es ein anderer Parser ist, der die Farbe interpretiert. Derselbe Parser interpretiert die Farbe unabhängig davon, ob es sich um Inline-CSS oder in einem verlinkten CSS-Dokument handelt. CSS definiert Was passiert mit einem falschen Wert, wenn er auftritt: Er wird ignoriert und wirkt sich überhaupt nicht auf das Dokument aus.

Ich würde sagen, dass dies ein guter Zeitpunkt ist, um mit der Klasse über die Einhaltung von Standards zu sprechen, da dies ein kritischer Bereich des Verständnisses für Studenten ist – und für einige Fachleute, die ich unglücklicherweise kenne. Wenn sie sagen: “Aber Farbskittles funktioniert gut”, können Sie ihnen sagen, dass es gut funktioniert wenn sie es anschauenaber es ist durchaus möglich, dass es den Browser ihrer Dozenten zum Absturz bringt und ihnen ein dickes, fettes F einbringt. Das kommt einem Szenario aus der realen Welt so nahe wie möglich, wenn einige von uns ihre Wochenenden aufgeben müssen, weil jemand zur Demo-Zeit ist Sonst funktioniert der beschissene Code nicht richtig.

Ich bin aber nicht verbittert. Meist 🙂