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

Es gibt ein paar Dinge über die anderen Antworten, die entweder schlecht formuliert sind oder vielleicht ein wenig falsch sind.

FALSCH(ähnlich): Nicht-Standard-HTML-Elemente sind "nicht erlaubt", "illegal" oder "ungültig".

Nicht unbedingt. Sie sind "nicht konform". Was ist der Unterschied? Etwas kann "nicht konform" sein und trotzdem "erlaubt" sein. Das W3C wird nicht die HTML-Polizei zu Ihnen nach Hause schicken und Sie abführen.

Das W3C hat die Dinge aus einem Grund so gelassen. Konformität und Spezifikationen werden von einer Gemeinschaft definiert. Wenn Sie eine kleinere Gemeinschaft haben, die HTML für spezifischere Zwecke konsumiert und sie sich alle auf einige neue Elemente einigen, die sie benötigen, um die Dinge zu vereinfachen, können sie das haben, was das W3C als "andere anwendbare Spezifikationen" bezeichnet. (Das ist offensichtlich eine grobe Vereinfachung, aber Sie verstehen die Idee)

Das heißt, strenge Validatoren werden Ihre nicht-standardmäßigen Elemente als "ungültig" deklarieren. Aber das liegt daran, dass die Aufgabe des Validierers darin besteht, die Konformität mit der jeweiligen Spezifikation zu gewährleisten, nicht die "Legalität" für den Browser oder für die Verwendung zu gewährleisten.

FALSCH(ähnlich): Nicht-Standard-HTML-Elemente werden zu Darstellungsproblemen führen

Möglich, aber unwahrscheinlich. (ersetzen Sie "werden" durch "könnten") Der einzige Weg, wie dies zu einem Darstellungsproblem führen sollte, ist, wenn Ihr benutzerdefiniertes Element mit einer anderen Spezifikation in Konflikt gerät, z.B. mit einer Änderung an der HTML-Spezifikation oder einer anderen Spezifikation, die im selben System (wie SVG, Mathematik oder einer benutzerdefinierten Sache) eingehalten wird.

Tatsächlich, der Grund, warum CSS nicht standardmäßige Tags stilisieren kann, ist, weil die HTML-Spezifikation klar aussagt dass:

Benutzeragenten müssen Elemente und Attribute, die sie nicht verstehen, semantisch neutral behandeln; sie im DOM belassen (für DOM-Prozessoren) und sie entsprechend CSS stilisieren (für CSS-Prozessoren), aber keine Bedeutung aus ihnen ableiten

Hinweis: Wenn Sie einen benutzerdefinierten Tag verwenden möchten, merken Sie sich einfach, dass eine Änderung an der HTML-Spezifikation zu einem späteren Zeitpunkt Ihr Styling zerschießen kann, seien Sie also vorbereitet. Es ist wirklich unwahrscheinlich, dass das W3C den Tag implementieren wird.

Nicht-Standard-Tags und JavaScript (über das DOM)

Der Grund, warum Sie auf benutzerdefinierte Elemente über JavaScript zugreifen und sie ändern können, ist, dass die Spezifikation sogar darüber spricht, wie sie im DOM behandelt werden sollten, das ist die (wirklich schreckliche) API, die es Ihnen ermöglicht, die Elemente auf Ihrer Seite zu manipulieren.

Das HTMLUnknownElement-Interface muss für HTML-Elemente verwendet werden, die nicht durch diese Spezifikation definiert sind (oder andere anwendbare Spezifikationen).

Zusammenfassung: Die Konformität mit der Spezifikation dient Kommunikations- und Sicherheitszwecken. Nicht-Konformität ist von allem außer einem Validierer erlaubt, dessen einziger Zweck darin besteht, Konformität durchzusetzen, dessen Verwendung jedoch optional ist.

Zum Beispiel:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Ich bin sicher, dass das Kritik auf sich ziehen wird, aber das sind meine 2 Cent)

Answer 2

Gemäß den Spezifikationen:

CSS

Ein Typ-Selektor ist der Name eines Dokumentsprachenelements, der unter Verwendung der Syntax von CSS-Qualifizierten Namen geschrieben wird

Ich dachte, dies würde als Element-Selektor bezeichnet, aber anscheinend handelt es sich tatsächlich um den Typ-Selektor. Die Spezifikation spricht auch von CSS-Qualifizierten Namen, die keine Einschränkungen bezüglich der tatsächlichen Namen vorgeben. Das bedeutet, dass solange der Typ-Selektor der Syntax von CSS-Qualifizierten Namen entspricht, es sich technisch gesehen um korrektes CSS handelt und das Element im Dokument übereinstimmt. Es gibt keine spezifischen CSS-Einschränkungen für Elemente, die in einer bestimmten Spezifikation nicht existieren - sei es HTML oder etwas anderes.

HTML

Es gibt keine offizielle Einschränkung hinsichtlich der Einfügung beliebiger Tags in das Dokument. Allerdings besagt die Dokumentation

Autoren dürfen Elemente, Attribute oder Attributwerte nicht für Zwecke verwenden, die nicht ihrem entsprechenden semantischen Zweck bestimmt sind, da dies die korrekte Verarbeitung der Seite durch Software verhindert.

Und später heißt es

Autoren dürfen Elemente, Attribute oder Attributwerte nicht verwenden, die nicht gemäß dieser Spezifikation oder anderer anwendbarer Spezifikationen zugelassen sind. Dies erschwert es erheblich, die Sprache in Zukunft zu erweitern.

Ich bin mir nicht sicher, wo genau die Spezifikation besagt, dass unbekannte Elemente erlaubt sind, aber es wird die HTMLUnknownElement-Schnittstelle für nicht erkannte Elemente erwähnt. Einige Browser erkennen möglicherweise nicht einmal Elemente, die in der aktuellen Spezifikation enthalten sind (denken Sie an IE8).

Es gibt einen Entwurf für benutzerdefinierte Elemente, aber ich bezweifle, dass er irgendwo bereits implementiert ist.

Answer 3

Dies ist mit html5 möglich, aber Sie müssen ältere Browser berücksichtigen.

Wenn Sie sich dafür entscheiden, sie zu verwenden, stellen Sie sicher, dass Sie IHREN html-KOMMENTIEREN!! Einige Leute haben möglicherweise Schwierigkeiten herauszufinden, worum es geht, daher könnte ein Kommentar ihnen viel Zeit sparen.

So etwas in der Art,

Wenn Sie Ihre eigenen benutzerdefinierten Tags/Elemente erstellen, haben ältere Browser keine Ahnung, was das ist, genauso wie html5-Elemente wie nav/section.

Wenn Sie an diesem Konzept interessiert sind, empfehle ich, es auf die richtige Weise zu tun.

Erste Schritte

Benutzerdefinierte Elemente ermöglichen es Webentwicklern, neue Arten von HTML-Elementen zu definieren. Die Spezifikation ist eine von mehreren neuen API-Primitiven, die unter dem Dach von Webkomponenten landen, aber möglicherweise die wichtigste. Webkomponenten existieren nicht ohne die Funktionen, die durch benutzerdefinierte Elemente freigeschaltet werden:

Neue HTML/DOM-Elemente definieren Elemente erstellen, die von anderen Elementen erweitern Benutzerdefinierte Funktionalität logisch in einem einzigen Tag bündeln Die API vorhandener DOM-Elemente erweitern

Es gibt viel, was Sie damit tun können, und es macht Ihr Skript schön, wie in diesem Artikel lobend erwähnt wird. Benutzerdefinierte Elemente definieren neue Elemente in HTML.

Also lassen Sie uns zusammenfassen,

Pro

• Sehr elegant und einfach zu lesen.

• Es ist schön, nicht so viele divs zu sehen. :p

• Eine einzigartige Note dem Code verleihen

Contra

• Unterstützung für ältere Browser ist eine wichtige Sache, die berücksichtigt werden muss.

• Andere Entwickler haben möglicherweise keine Ahnung, was sie tun sollen, wenn sie nichts über benutzerdefinierte Tags wissen. (Erklären Sie es ihnen oder fügen Sie Kommentare hinzu, um sie zu informieren)

• Zuletzt etwas zu berücksichtigen, bin mir jedoch unsicher, sind Block- und Inline-Elemente. Durch Verwendung benutzerdefinierter Tags werden Sie mehr CSS schreiben müssen, weil der benutzerdefinierte Tag keine Standardseiten haben wird.

Die Wahl liegt ganz bei Ihnen und Sie sollten sie danach ausrichten, was das Projekt verlangt.

Update 1/2/2014

Hier ist ein sehr hilfreicher Artikel, den ich gefunden habe und den ich teilen möchte, Benutzerdefinierte Elemente.

Erfahren Sie die Technik Warum benutzerdefinierte Elemente? Benutzerdefinierte Elemente ermöglichen es Autoren, ihre eigenen Elemente zu definieren. Autoren verknüpfen JavaScript-Code mit benutzerdefinierten Tag-Namen und verwenden dann diese benutzerdefinierten Tag-Namen wie jeder Standardtag.

Beispielsweise, nachdem Sie eine spezielle Art von Schaltfläche namens super-button registriert haben, verwenden Sie die Super-Schaltfläche so:

Benutzerdefinierte Elemente sind immer noch Elemente. Wir können sie genauso einfach erstellen, verwenden, manipulieren und zusammensetzen wie jedes Standard- oder heute vorhandene.

Dies scheint eine sehr gute Bibliothek zu sein, die man verwenden kann, aber ich habe bemerkt, dass sie den Build-Status von Windows nicht bestanden hat. Ich glaube auch, dass dies in einer Pre-Alpha-Phase ist, also würde ich empfehlen, dies im Auge zu behalten, während es sich entwickelt.

Answer 4

Warum will er nicht, dass du sie verwendest? Sie sind nicht gebräuchlich und auch nicht Teil des HTML5-Standards. Technisch gesehen sind sie nicht erlaubt. Sie sind ein Hack.

Ich persönlich mag sie, obwohl. Möglicherweise interessierst du dich für XHTML5. Es ermöglicht dir, deine eigenen Tags zu definieren und sie als Teil des Standards zu verwenden.

Außerdem, wie andere bereits angemerkt haben, sind sie ungültig und daher nicht tragbar.

Warum wusste er nicht, dass sie existieren? Ich weiß es nicht, außer dass sie nicht verbreitet sind. Möglicherweise war er einfach nicht darüber informiert, dass man sie verwenden konnte.

Answer 5

Ich denke, dass erfundene Tags möglicherweise nur verwirrender oder unklarer sind als p's mit IDs (irgendein Textblock im Allgemeinen). Wir alle wissen, dass ein p mit einer ID ein Absatz ist, aber wer weiß, wofür erfundene Tags gedacht sind? Zumindest ist das mein Gedanke. :) Daher handelt es sich hierbei mehr um ein Stil- / Klarheitsproblem als um ein Funktionalitätsproblem.