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

Von seinen Anfängen an wurde CSS so konzipiert, dass es markupsprachenagnostisch ist, sodass es mit jeder Markup-Sprache verwendet werden kann, um baumähnliche DOM-Strukturen zu erstellen (z. B. SVG). Jedes Tag, das der Produktion Name- Token entspricht, ist in CSS völlig gültig. Daher handelt es sich bei Ihrer Frage eher um HTML als um CSS selbst.

Elemente mit benutzerdefinierten Tags werden von der HTML5-Spezifikation unterstützt. HTML5 standardisiert die Art und Weise, wie unbekannte Elemente im DOM verarbeitet werden müssen. Daher ist HTML5 die erste HTML-Spezifikation, die benutzerdefinierte Elemente streng genommen ermöglicht. Sie müssen lediglich das HTML5-Doctype in Ihrem Dokument verwenden.

Was die benutzerdefinierten Tag-Namen selbst betrifft...

Dieses Dokument http://www.w3.org/TR/custom-elements/ empfiehlt, dass die von Ihnen gewählten benutzerdefinierten Tags mindestens ein '-' (Bindestrich) enthalten. Auf diese Weise werden sie nicht mit zukünftigen HTML-Elementen konkurrieren. Daher sollten Sie Ihr Dokument eher wie folgt ändern:

so-cool {
    color:blue;
}

    HELLO

Answer 2

Während Browser CSS im Allgemeinen mit HTML-Tags in Beziehung setzen, unabhhängig davon, ob sie gültig sind oder nicht, sollten Sie dies AUF JEDEN FALL nicht tun.

Technisch gesehen ist dies aus CSS-Sicht nicht falsch. Verwenden von erfundenen Tags ist jedoch etwas, das Sie in HTML NIE tun sollten.

HTML ist eine Auszeichnungssprache, was bedeutet, dass jeder Tag einem bestimmten Typ von Informationen entspricht.

Ihre erfundenen Tags entsprechen keinem Informations-Typ. Dies wird Probleme mit Web-Crawlern wie Google verursachen.

Erfahren Sie mehr auf der Bedeutung korrekter Markierung.

Bearbeiten

Divs beziehen sich auf Gruppen von mehreren verwandten Elementen, die in Blockform angezeigt und entsprechend manipuliert werden können.

Spans beziehen sich auf Elemente, die anders gestaltet werden sollen als der Kontext, in dem sie sich derzeit befinden, und sollten inline, nicht als Block, angezeigt werden. Ein Beispiel ist, wenn in einem Satz einige Wörter in Großbuchstaben erscheinen sollen.

Benutzerdefinierte Tags entsprechen keinen Standards, daher sollten Span/Div stattdessen mit Klassen-/ID-Eigenschaften verwendet werden.

Es gibt sehr spezifische Ausnahmen, wie zum Beispiel Angular JS.

Answer 3

Auch wenn CSS etwas namens "Tag-Selektor" hat, weiß es eigentlich nicht, was ein Tag ist. Das ist Sache der Sprache des Dokuments, es zu definieren. CSS wurde so konzipiert, dass es nicht nur mit HTML, sondern auch mit XML verwendet werden kann, wo (unter der Annahme, dass Sie kein DTD oder ein anderes Validierungsschema verwenden) die Tags ziemlich beliebig sein können. Sie könnten es auch mit anderen Sprachen verwenden, müssten jedoch Ihre eigenen Semantiken für genau Dinge wie "Tags" und "Attribute" entwickeln.

Browser wenden CSS im Allgemeinen auf unbekannte Tags in HTML an, da dies als besser angesehen wird als eine vollständige Zerstörung: zumindest können sie etwas anzeigen. Es ist jedoch sehr schlechte Praxis, absichtlich "falsche" Tags zu verwenden. Ein Grund dafür ist, dass von Zeit zu Zeit neue Tags definiert werden, und wenn eines definiert wird, das Ihrem falschen Tag ähnelt, aber nicht ganz auf die gleiche Weise funktioniert, kann dies Probleme auf Ihrer Website in neuen Browsern verursachen.

Answer 4

Warum funktioniert CSS mit Fake-Elementen? Weil es niemandem schadet, weil du sie sowieso nicht verwenden sollst.

Warum will mein Professor nicht, dass ich erfundene Elemente verwende? Weil wenn dieses Element in Zukunft durch eine Spezifikation definiert wird, wird sich das Verhalten deines Elements unvorhersehbar verhalten.

Außerdem, warum wusste er nicht, dass erfundene Elemente existieren und mit CSS funktionieren. Sind sie selten? Weil er, wie die meisten anderen Webentwickler, verstehen, dass wir Dinge nicht verwenden sollten, die zufällig in der Zukunft brechen könnten.