Warum funktioniert CSS mit Fake-Elementen?

Question

In meiner Klasse habe ich herumgespielt und herausgefunden, dass CSS mit erfundenen Elementen funktioniert.

Beispiel:

imsocool {
    color:blue;
}

HELLO

Als mein Professor mich das zum ersten Mal machen sah, war er ein wenig überrascht, dass erfundene Elemente funktionieren und empfahl mir, einfach alle meine erfundenen Elemente in Paragraphen mit IDs zu ändern.

Warum möchte mein Professor nicht, dass ich erfundene Elemente verwende? Sie funktionieren effektiv.

Außerdem, warum wusste er nicht, dass erfundene Elemente existieren und mit CSS funktionieren. Sind sie ungewöhnlich?

Answer 1

Erfundene Tags werden kaum verwendet, weil es unwahrscheinlich ist, dass sie zuverlässig in jedem aktuellen Browser und jedem zukünftigen Browser funktionieren.

Ein Browser muss den HTML-Code in Elemente analysieren, die er kennt, daher werden erfundene Tags in etwas anderes umgewandelt, um ins Dokumentobjektmodell (DOM) zu passen. Da die Webstandards nicht abdecken, wie mit allem umgegangen wird, was außerhalb der Standards liegt, neigen Webbrowser dazu, nicht standardkonformen Code auf unterschiedliche Weise zu behandeln.

Die Webentwicklung ist schon knifflig genug mit einer Vielzahl unterschiedlicher Browser, die ihre eigenen Eigenheiten haben, ohne eine weitere Unsicherheit hinzuzufügen. Das Beste ist, sich an Dinge zu halten, die tatsächlich den Standards entsprechen, denn das ist dem, was die Browserhersteller zu befolgen versuchen, daher hat es die beste Chance tatsächlich zu funktionieren.

Answer 2

Andere haben ausgezeichnete Punkte gemacht, aber es lohnt sich zu beachten, dass wenn Sie sich ein Framework wie AngularJS ansehen, es einen sehr guten Fall für benutzerdefinierte Elemente und Attribute gibt. Diese vermitteln nicht nur eine bessere semantische Bedeutung für das XML, sondern können auch Verhalten, Aussehen und Gefühl für die Webseite bereitstellen.

Answer 3

CSS ist eine Stylesheet-Sprache, die verwendet werden kann, um XML-Dokumente zu präsentieren, nicht nur (X)HTML-Dokumente. Ihr Snippet mit den erfundenen Tags könnte Teil eines rechtlichen XML-Dokuments sein; es wäre eines, wenn Sie es in einem einzelnen Wurzelelement einschließen würden. Wahrscheinlich haben Sie bereits ein ... darum herum? Jeder aktuelle Browser kann XML-Dokumente anzeigen.

Natürlich ist es kein sehr gutes XML-Dokument, es fehlt eine Grammatik und eine XML-Deklaration. Wenn Sie stattdessen eine HTML-Deklarationskopfzeile verwenden (und wahrscheinlich eine Serverkonfiguration, die den richtigen Mime-Typ sendet), wäre es stattdessen ungültiges HTML.

(X)HTML hat Vorteile gegenüber reinem XML, da Elemente eine semantische Bedeutung haben, die nützlich ist im Kontext einer Webseitendarstellung. Tools können mit dieser Semantik arbeiten, andere Entwickler kennen die Bedeutung, es ist weniger fehleranfällig und besser zu lesen.

In anderen Kontexten ist es jedoch besser, CSS mit XML und/oder XSLT zur Präsentation zu verwenden. Das ist das, was Sie getan haben. Da dies nicht Ihre Aufgabe war und Sie nicht wussten, was Sie tun, und HTML/CSS in den meisten Fällen der bessere Weg ist, sollten Sie in Ihrem Szenario dabei bleiben.

Sie sollten Ihrem Dokument einen (X)HTML-Kopf hinzufügen, damit Tools Ihnen sinnvolle Fehlermeldungen geben können.

Answer 4

...Ich ändere einfach alle meine erfundenen Tags in Absätze mit ID's.

Ich habe tatsächlich Einwände gegen seinen Vorschlag, wie man es richtig macht.

1. Ein

   -Tag ist für Absätze. Ich sehe Leute, die es die ganze Zeit anstelle eines div verwenden - einfach für den Abstandszweck oder weil es sanfter erscheint. Wenn es kein Absatz ist, verwenden Sie es nicht.

2. Sie müssen nicht oder wollen nicht überall ID's hinzufügen, es sei denn, Sie müssen es gezielt ansprechen (z.B. mit Javascript). Verwenden Sie Klassen oder einfach ein normales div.

Answer 5

Überraschenderweise hat niemand (einschließlich meines früheren Selbst) Barrierefreiheit erwähnt. Ein weiterer Grund, warum die Verwendung gültiger Tags anstelle von benutzerdefinierten für die Kompatibilität mit der größtmöglichen Menge an Software, einschließlich Bildschirmleseprogrammen und anderen Tools, die Menschen für Barrierefreiheitszwecke benötigen, wichtig ist. Darüber hinaus schreiben Barrierefreiheitsgesetze wie das WAI vor, barrierefreie Websites zu erstellen, was im Allgemeinen bedeutet, dass sie gültige Markup verwenden müssen.

---

Offensichtlich hat es niemand erwähnt, also werde ich es tun.

Dies ist ein Nebenprodukt der Browserkriege.

In den 1990er Jahren, als das Internet erstmals populär wurde, nahm der Wettbewerb auf dem Browsermarkt zu. Um wettbewerbsfähig zu bleiben und Nutzer anzulocken, versuchten einige Browser (insbesondere der Internet Explorer) hilfreich und "benutzerfreundlich" zu sein, indem sie versuchten herauszufinden, was die Autoren von Webseiten meinten und somit auch falsche Markup zuließen (z.B., **_foobar_** würde korrekt als fett-kursiv dargestellt).

Dies erschien bis zu einem gewissen Grad sinnvoll, denn wenn ein Browser ständig über Syntaxfehler klagte, während ein anderer alles akzeptierte und ein (mehr oder weniger) korrektes Ergebnis lieferte, würden die Menschen natürlich zum Letzteren übergehen.

Obwohl viele dachten, die Browserkriege seien vorbei, entfachte in den letzten Jahren ein neuer Konflikt zwischen Browser-Herstellern, seit Chrome veröffentlicht wurde, Apple wieder zu wachsen begann und Safari vorantrieb und der IE seine Dominanz verlor. (Man könnte es einen "Kalten Krieg" nennen, aufgrund der wahrgenommenen Zusammenarbeit und Unterstützung von Standards durch die Browser-Hersteller.) Daher ist es nicht überraschend, dass selbst zeitgenössische Browser, die angeblich streng den Webstandards entsprechen, tatsächlich versuchen "klug" zu sein und standardwidriges Verhalten wie dieses zulassen, um wieder einen Vorteil zu erlangen.

Leider führte dieses großzügige Verhalten zu einem massiven (manche würden sagen sogar krebsartigen) Wachstum von schlecht strukturierten Webseiten. Da der IE der nachsichtigste und beliebteste Browser war und aufgrund von Microsofts fortgesetzter Missachtung von Standards wurde der IE berüchtigt dafür, schlechtes Design zu fördern und kaputte Seiten zu verbreiten und aufrechtzuerhalten.

Möglicherweise können Sie vorerst mit solchen Eigenheiten und Exploits auf einigen Browsern durchkommen, aber abgesehen von gelegentlichen Rätseln oder Spielen sollten Sie immer an Webstandards halten, wenn Sie Webseiten und Websites erstellen, um sicherzustellen, dass sie korrekt angezeigt werden und nicht kaputtgehen (möglicherweise komplett ignoriert werden) bei einem Browser-Update.