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

Warum funktioniert CSS mit Fake-Elementen?

(Die meisten) Browser sind darauf ausgelegt, in gewissem Maße aufwärtskompatibel mit zukünftigen Ergänzungen zu HTML zu sein. Nicht erkannte Elemente werden in den DOM geparst, haben jedoch keine Semantik oder spezialisierte Standardrendering zugeordnet.

Wenn ein neues Element zur Spezifikation hinzugefügt wird, können manchmal CSS, JavaScript und ARIA verwendet werden, um die gleiche Funktionalität in älteren Browsern bereitzustellen (und die Elemente müssen im DOM erscheinen, damit diese Sprachen sie manipulieren können, um diese Funktionalität hinzuzufügen).

(Es gibt eine Spezifikation für benutzerdefinierte Elemente, aber sie haben spezifische Namensanforderungen und müssen mit JavaScript registriert werden.)

Warum möchte mein Professor nicht, dass ich erfundene Elemente verwende?

• Sie sind nicht gemäß der HTML-Spezifikation erlaubt
• Sie könnten mit zukünftigen Standardelementen mit dem gleichen Namen kollidieren
• Es gibt wahrscheinlich ein vorhandenes HTML-Element, das besser für die Aufgabe geeignet ist

Außerdem; warum wusste er nicht, dass erfundene Elemente existierten und mit CSS funktionierten. Sind sie selten?

Ja. Die Leute verwenden sie nicht, weil sie die oben genannten Probleme haben.

Answer 2

TL;DR

• Benutzerdefinierte Tags sind in HTML ungültig. Dies kann zu Darstellungsproblemen führen.
• Die zukünftige Entwicklung wird erschwert, da der Code nicht portabel ist.
• Gültiges HTML bietet viele Vorteile wie SEO, Geschwindigkeit und Professionalität.

Lange Antwort

Es gibt einige Argumente, dass Code mit benutzerdefinierten Tags benutzerfreundlicher ist.

Allerdings führt dies zu ungültigem HTML. Das ist nicht gut für Ihre Website.

Der Sinn von gültigem CSS/HTML | StackOverflow

• Google bevorzugt es, also ist es gut für SEO.
• Es macht Ihre Webseite wahrscheinlicher in Browsern zu funktionieren, die Sie nicht getestet haben.
• Es macht Sie professioneller aussehen (zumindest für einige Entwickler)
• Konforme Browser können [gültiges HTML schneller] rendern
• Es zeigt eine Menge von obskuren Bugs auf, die Sie wahrscheinlich übersehen haben, die Dinge beeinflussen, die Sie wahrscheinlich nicht getestet haben, z.B. die Codepage oder Spracheinstellung der Seite.

Warum Validieren | W3C

• Validierung als Debugging-Werkzeug
• Validierung als zukunftssichere Qualitätskontrolle
• Validierung erleichtert die Wartung
• Validierung hilft dabei, gute Praktiken zu lehren
• Validierung ist ein Zeichen von Professionalität

Answer 3

YADA (yet another (different) answer)

Bearbeitung: Bitte beachten Sie den Kommentar von BoltClock unten bezüglich Typ vs. Tag vs. Element. Ich mache mir normalerweise keine Gedanken über Semantik, aber sein Kommentar ist sehr angebracht und informativ.

Obwohl es bereits eine Reihe guter Antworten gibt, haben Sie angegeben, dass Ihr Professor Sie dazu aufgefordert hat, diese Frage zu stellen, also scheint es, als ob Sie (formal) in der Schule sind. Ich dachte, ich würde ein wenig ausführlicher auf nicht nur CSS, sondern auch auf die Mechanik von Webbrowsern eingehen. Laut Wikipedia "CSS ist eine Stylesheet-Sprache, die zur Beschreibung ... eines in einer Markup-Sprache geschriebenen Dokuments verwendet wird." (Ich habe die Betonung auf "einer" hinzugefügt.) Beachten Sie, dass es nicht heißt "geschrieben in HTML" geschweige denn in einer bestimmten Version von HTML. CSS kann auf HTML, XHTML, XML, SGML, XAML usw. angewendet werden. Natürlich benötigen Sie etwas, das jede dieser Dokumentarten rendert und gleichzeitig Stile anwendet. Nach Definition kennt CSS bestimmte Markup-Sprache-Tags nicht kennen / verstehen / interessieren. Daher können die Tags "ungültig" sein, was HTML betrifft, aber es gibt kein Konzept eines "gültigen" Tags/Elements/Typs in CSS.

Moderner visueller Browser sind keine monolithischen Programme. Sie sind eine Vermischung verschiedener "Engines", die spezifische Aufgaben haben. Ich kann mir mindestens 3 Engines vorstellen, die Rendering-Engine, die CSS-Engine und die Javascript-Engine/VM. Ich bin mir nicht sicher, ob der Parser Teil der Rendering-Engine ist (oder umgekehrt) oder ob es sich um eine separate Engine handelt, aber Sie verstehen sicher, was ich meine.

Ob ein visueller Browser (andere haben bereits darauf hingewiesen, dass Bildschirmlesegeräte möglicherweise andere Herausforderungen haben, um mit ungültigen Tags umzugehen) das Format anwendet, hängt davon ab, ob der Parser den "ungültigen" Tag im Dokument belässt und ob die Rendering-Engine dann Stile auf diesen Tag anwendet. Da dies die Entwicklung/Wartung erschweren würde, sind CSS-Engines nicht darauf ausgelegt zu verstehen, dass "Dies ein HTML-Dokument ist, hier sind die Liste der gültigen Tags/Elemente/Typen." CSS-Engines finden einfach bestimmte Tags/Elemente/Typen und sagen dann der Rendering-Engine: "Hier sind die Stile, die du anwenden solltest." Ob die Rendering-Engine die Stile tatsächlich anwendet, liegt an ihr.

Hier ist eine einfache Möglichkeit, den grundlegenden Ablauf von Engine zu Engine zu denken: Parser -> CSS -> Rendern. In Wirklichkeit ist dies viel komplizierter, aber das reicht für den Anfang aus.

Diese Antwort ist bereits zu lang, daher werde ich hier enden.

Answer 4

Unbekannte Elemente werden von modernen Browsern als divs behandelt. Deshalb funktionieren sie. Dies ist Teil des kommenden HTML5-Standards, der eine modulare Struktur einführt, zu der neue Elemente hinzugefügt werden können.

In älteren Browsern (ich glaube IE7-) können Sie einen Javascript-Trick anwenden, nach dem sie ebenfalls funktionieren.

Hier ist eine verwandte Frage, die ich beim Suchen nach einem Beispiel gefunden habe.

Hier ist eine Frage zum Javascript-Fix. Es stellt sich heraus, dass es wirklich IE7 ist, der diese Elemente von Haus aus nicht unterstützt.

Außerdem; warum wusste er nicht, dass erfundene Tags existierten und mit CSS funktionierten. Sind sie ungewöhnlich?

Ja, ziemlich. Aber vor allem: Sie erfüllen keinen zusätzlichen Zweck. Und sie sind neu in html5. In früheren Versionen von HTML war ein unbekanntes Tag ungültig.

Außerdem scheinen Lehrer manchmal Wissenslücken zu haben. Dies könnte daran liegen, dass sie den Schülern die Grundlagen eines bestimmten Themas beibringen müssen und es sich nicht wirklich lohnt, alle Einzelheiten zu kennen und wirklich auf dem neuesten Stand zu sein. Ich habe einmal einen Verweis bekommen, weil ein Lehrer dachte, ich hätte einen Virus programmiert, nur weil ich einen Computer Musik spielen lassen konnte, indem ich den play-Befehl in GWBasic verwendet habe. (Wahre Geschichte, und ja, lange her). Aber was auch immer der Grund sein mag, ich denke, der Ratschlag, keine benutzerdefinierten Elemente zu verwenden, ist ein vernünftiger.

Answer 5

Eigentlich können Sie benutzerdefinierte Elemente verwenden. Hier ist die W3C-Spezifikation zu diesem Thema:

http://w3c.github.io/webcomponents/spec/custom/

Und hier ist ein Tutorial, das erklärt, wie man sie verwendet:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Wie von @Quentin angemerkt: Dies ist eine Entwurfspezifikation in den frühen Entwicklungsphasen, und sie legt Beschränkungen fest, welche Elementnamen verwendet werden können.