Warum arbeitet CSS mit gefälschten Elementen?

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

Beispiel:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

Als mein Professor mich zum ersten Mal sah, war er etwas überrascht, dass erfundene Elemente funktionierten, und empfahl mir, einfach alle meine erfundenen Elemente in Absätze mit IDs zu ändern.

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

Warum wusste er auch nicht, dass erfundene Elemente existieren und mit CSS funktionieren? Sind sie ungewöhnlich?

Warum arbeitet CSS mit gefälschten Elementen?

(Die meisten) Browser sind so konzipiert, dass sie (bis zu einem gewissen Grad) vorwärtskompatibel mit zukünftigen HTML-Ergänzungen sind. Nicht erkannte Elemente werden in das DOM analysiert, ihnen ist jedoch keine Semantik oder spezielle Standardwiedergabe zugeordnet.

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

(Es sollte zwar angemerkt werden, dass derzeit daran gearbeitet wird, ein Mittel zum Erweitern von HTML mit benutzerdefinierten Elementen zu definieren , aber diese Arbeit befindet sich derzeit in einem frühen Entwicklungsstadium, sodass sie wahrscheinlich vermieden werden sollte, bis sie ausgereift ist.)

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

• Sie sind in der HTML-Spezifikation nicht zulässig
• Sie können mit zukünftigen Standardelementen mit demselben Namen in Konflikt stehen
• Es gibt wahrscheinlich ein vorhandenes HTML-Element, das für die Aufgabe besser geeignet ist

Ebenfalls; Warum wusste er nicht, dass erfundene Elemente existierten und mit CSS arbeiteten? Sind sie ungewöhnlich?

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

TL; DR

• Benutzerdefinierte Tags sind in HTML ungültig. Dies kann zu Renderproblemen führen.
• Erschwert die zukünftige Entwicklung, da Code nicht portierbar ist.
• Gültiges HTML bietet viele Vorteile wie SEO, Geschwindigkeit und Professionalität.

Lange Antwort

Es gibt einige Argumente, dass Code mit benutzerdefinierten Tags besser verwendet werden kann.

Dies führt jedoch zu ungültigem HTML. Welches ist nicht gut für Ihre Website.

Der Punkt des gültigen CSS / HTML | Paketüberfluss

• Google bevorzugt es, damit es gut für SEO ist.
• Dadurch funktioniert Ihre Webseite mit größerer Wahrscheinlichkeit in Browsern, die Sie nicht getestet haben.
• Dadurch sehen Sie professioneller aus (zumindest für einige Entwickler).
• Kompatible Browser können [gültiges HTML schneller rendern]
• Es weist auf eine Reihe von obskuren Fehlern hin, die Sie wahrscheinlich übersehen haben und die sich auf Dinge auswirken, die Sie wahrscheinlich nicht getestet haben, z. B. die Codepage oder den Sprachensatz der Seite.

Warum validieren? W3C

• Validierung als Debugging-Tool
• Validierung als zukunftssichere Qualitätsprüfung
• Die Validierung erleichtert die Wartung
• Die Validierung hilft dabei, bewährte Verfahren zu vermitteln
• Validierung ist ein Zeichen von Professionalität

YADA (noch eine (andere) Antwort)

Bearbeiten: Bitte beachten Sie den Kommentar von BoltClock unten bezüglich Typ vs Tag vs Element. Ich mache mir normalerweise keine Sorgen um die Semantik, aber sein Kommentar ist sehr angemessen und informativ.

Obwohl es bereits eine Reihe guter Antworten gibt, haben Sie angegeben, dass Ihr Professor Sie aufgefordert hat, diese Frage zu stellen, damit Sie (formal) in der Schule sind . Ich dachte, ich würde nicht nur CSS, sondern auch die Mechanik von Webbrowsern etwas ausführlicher erläutern. Laut Wikipedia ist "CSS eine Stylesheet-Sprache, mit der ... ein Dokument beschrieben wird, das in einer Auszeichnungssprache geschrieben ist." (Ich habe die Betonung auf "a" hinzugefügt.) Beachten Sie, dass dort nicht "in HTML geschrieben" steht, geschweige denn eine bestimmte HTML-Version. CSS kann für HTML, XHTML, XML, SGML, XAML usw. verwendet werden. Natürlich benötigen Sie etwas, das gerendert werden kannJeder dieser Dokumenttypen wendet auch das Styling an. Per Definition kennt / versteht / kümmert sich CSS nicht um bestimmte Markup-Sprach-Tags. Daher können die Tags in Bezug auf HTML "ungültig" sein, es gibt jedoch kein Konzept für ein "gültiges" Tag / Element / Typ in CSS.

Moderne visuelle Browser sind keine monolithischen Programme. Sie sind eine Mischung aus verschiedenen "Motoren", die bestimmte Aufgaben zu erledigen haben. Bei einem Minimum kann ich mich vorstellen 3 - Motoren, das Rendering - Engine, die CSS - Engine und die Javascript - Engine / VM. Sie sind sich nicht sicher, ob der Parser Teil der Rendering-Engine ist (oder umgekehrt) oder ob es sich um eine separate Engine handelt, aber Sie haben die Idee.

Unabhängig davon , ob ein visuelles Browser ( andere haben bereits angesprochen , dass Bildschirm Leser andere Herausforderungen haben könnten mit ungültigen Tags handeln ) gilt die Formatierung , ob die Parser Blätter des „ungültig“ Tag im Dokument ab und dann , ob der Rendering - Engine gilt Stile zu diesem Tag. Da dies die Entwicklung / Wartung erschweren würde, werden CSS-Engines nicht so geschrieben, dass sie verstehen, dass "dies ein HTML-Dokument ist. Hier ist die Liste der gültigen Tags / Elemente / Typen." CSS-Engines finden einfach Tags / Elemente / Typen und teilen der Rendering-Engine mit: "Hier sind die Stile, die Sie anwenden sollten." Ob die Rendering-Engine entscheidet, die Stile tatsächlich anzuwenden, ist entscheidend.

Hier ist eine einfache Möglichkeit, sich den grundlegenden Ablauf von Engine zu Engine vorzustellen: Parser -> CSS -> Rendering. In Wirklichkeit ist es viel komplizierter, aber das ist gut genug für den Anfang.

Diese Antwort ist schon zu lang, also werde ich dort enden.

Unbekannte Elemente werden divvon modernen Browsern als s behandelt . Deshalb arbeiten 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 denke IE7-) können Sie einen Javascript-Trick anwenden, nach dem sie auch funktionieren.

Hier ist eine verwandte Frage, die ich bei der Suche nach einem Beispiel gefunden habe.

Hier ist eine Frage zum Javascript-Fix . Es stellt sich heraus, dass IE7 diese Elemente nicht sofort unterstützt.

Ebenfalls; Warum wusste er nicht, dass erfundene Tags existieren und mit CSS funktionieren? Sind sie ungewöhnlich?

Ja ganz. Vor allem aber: Sie dienen keinem zusätzlichen Zweck. Und sie sind neu in HTML5. In früheren HTML-Versionen war ein unbekanntes Tag ungültig.

Außerdem scheinen Lehrer manchmal Wissenslücken zu haben. Dies könnte auf die Tatsache zurückzuführen sein, dass sie den Schülern die Grundlagen eines bestimmten Fachs beibringen müssen, und es lohnt sich nicht wirklich, alle Vor- und Nachteile zu kennen und wirklich auf dem neuesten Stand zu sein. Ich wurde einmal inhaftiert, weil ein Lehrer dachte, ich hätte einen Virus programmiert, nur weil ich mit dem playBefehl in GWBasic einen Computer dazu bringen konnte, Musik abzuspielen . (Wahre Geschichte, und ja, vor langer Zeit). Aber was auch immer der Grund sein mag, ich denke, der Rat, keine benutzerdefinierten Elemente zu verwenden, ist vernünftig.

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 benutzt:

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

Wie von @Quentin hervorgehoben: Dies ist ein Entwurf einer Spezifikation in den frühen Tagen der Entwicklung, der Einschränkungen hinsichtlich der Elementnamen auferlegt.

Es gibt ein paar Dinge an den anderen Antworten, die entweder nur schlecht formuliert oder vielleicht ein wenig falsch sind.

FALSE (ish): Nicht standardmäßige HTML-Elemente sind "nicht erlaubt", "illegal" oder "ungültig".

Nicht unbedingt. Sie sind "nicht konform" . Was ist der Unterschied? Etwas kann sich "nicht anpassen" und trotzdem "erlaubt" werden. Das W3C wird die HTML-Polizei nicht zu Ihnen nach Hause schicken und Sie wegbringen.

Das W3C hat die Dinge aus einem bestimmten Grund so gelassen. Konformität und Spezifikationen werden von einer Community definiert. Wenn Sie zufällig eine kleinere Community haben, die HTML für spezifischere Zwecke verwendet, und alle sich auf einige neue Elemente einigen, die sie zur Vereinfachung benötigen, können sie das haben, was das W3C als "andere anwendbare Spezifikationen" bezeichnet . (Dies ist natürlich eine grobe Vereinfachung, aber Sie haben die Idee)

Strenge Validatoren erklären Ihre nicht standardmäßigen Elemente jedoch für "ungültig". Dies liegt jedoch daran, dass es die Aufgabe des Validators ist, die Konformität mit den Spezifikationen sicherzustellen, für die er validiert, und nicht die "Legalität" für den Browser oder die Verwendung sicherzustellen .

FALSCH (ish): Nicht-Standard - HTML - Elemente werden in Rendering - Probleme führen

Möglicherweise, aber unwahrscheinlich. (Ersetzen Sie "wird" durch "könnte".) Dies kann nur dann zu einem Rendering-Problem führen, wenn Ihr benutzerdefiniertes Element mit einer anderen Spezifikation in Konflikt steht, z. B. einer Änderung der HTML-Spezifikation oder einer anderen Spezifikation, die innerhalb desselben Systems berücksichtigt wird (z SVG, Mathe oder etwas Benutzerdefiniertes).

Der Grund , warum CSS nicht standardmäßige Tags formatieren kann, liegt darin, dass in der HTML-Spezifikation eindeutig Folgendes angegeben ist :

Benutzeragenten müssen Elemente und Attribute behandeln, die sie nicht als semantisch neutral verstehen. Belassen Sie sie im DOM (für DOM-Prozessoren) und gestalten Sie sie gemäß CSS (für CSS-Prozessoren), ohne daraus eine Bedeutung abzuleiten

Hinweis: Wenn Sie ein benutzerdefiniertes Tag verwenden möchten, denken Sie daran, dass eine spätere Änderung der HTML-Spezifikation Ihr Styling in die Luft jagen könnte. Seien Sie also vorbereitet. Es ist jedoch sehr unwahrscheinlich, dass das W3C das <imsocool>Tag implementiert .

Nicht standardmäßige Tags und JavaScript (über das DOM)

Der Grund, warum Sie mit JavaScript auf benutzerdefinierte Elemente zugreifen und diese ändern können, liegt darin, dass in der Spezifikation sogar angegeben ist, wie sie im DOM behandelt werden sollen. Dies ist die (wirklich schreckliche) API, mit der Sie die Elemente auf Ihrer Seite bearbeiten können.

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

TL; DR: Die Einhaltung der Spezifikation erfolgt aus Gründen der Kommunikation und Sicherheit. Nichtkonformität ist weiterhin von allen außer einem Validator zulässig , dessen einziger Zweck darin besteht, die Konformität durchzusetzen, dessen Verwendung jedoch optional ist.

Zum Beispiel:

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

(Ich bin sicher, das wird Flammen ziehen, aber da sind meine 2 Cent)

Nach den Angaben:

CSS

Eine Typauswahl ist der Name eines Dokumentensprachelementtyps, der unter Verwendung der Syntax von CSS-qualifizierten Namen geschrieben wurde

Ich dachte , das das hieß Element Wähler, aber anscheinend ist es eigentlich der Typ - Selektor. In der Spezifikation wird weiter darüber gesprochen, CSS qualified nameswas die tatsächlichen Namen nicht einschränkt. Das heißt, solange die Typauswahl mit der CSS-qualifizierten Namenssyntax übereinstimmt, ist sie technisch korrekt und entspricht dem Element im Dokument. Es gibt keine CSS-spezifische Einschränkung für Elemente, die in einer bestimmten Spezifikation nicht vorhanden sind - HTML oder auf andere Weise.

HTML

Es gibt keine offizielle Einschränkung für das Einfügen von Tags in das gewünschte Dokument. In der Dokumentation heißt es jedoch

Autoren dürfen Elemente, Attribute oder Attributwerte nicht für andere Zwecke als den entsprechenden semantischen Zweck verwenden, da dies verhindert, dass Software die Seite korrekt verarbeitet.

Und es heißt später

Autoren dürfen keine Elemente, Attribute oder Attributwerte verwenden, die nach dieser Spezifikation oder anderen anwendbaren Spezifikationen nicht zulässig sind, da dies die zukünftige Erweiterung der Sprache erheblich erschwert.

Ich bin mir nicht sicher, wo oder ob die Spezifikation besagt, dass unbekannte Elemente zulässig sind , aber es geht um die HTMLUnknownElement- Schnittstelle für nicht erkannte Elemente. Einige Browser erkennen möglicherweise nicht einmal Elemente, die in der aktuellen Spezifikation enthalten sind (IE8 fällt mir ein).

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

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

Wenn Sie sich dann für die Verwendung entscheiden, KOMMENTIEREN Sie unbedingt Ihr HTML !! Einige Leute haben möglicherweise Probleme, herauszufinden, was es ist, sodass ein Kommentar ihnen eine Menge Zeit sparen kann.

Etwas wie das,

<!-- Custom tags in use, refer to their CSS for aid -->

Wenn Sie Ihre eigenen benutzerdefinierten Tags / Elemente erstellen, haben die älteren Browser keine Ahnung, wie dies bei HTML5-Elementen wie nav/ aussieht section.

Wenn Sie an diesem Konzept interessiert sind, empfehle ich, es richtig zu machen.

Loslegen

Mit benutzerdefinierten Elementen können Webentwickler neue Arten von HTML-Elementen definieren. Die Spezifikation ist eines von mehreren neuen API-Grundelementen, die unter dem Dach von Web Components landen, aber möglicherweise das wichtigste. Webkomponenten existieren nicht ohne die Funktionen, die durch benutzerdefinierte Elemente freigeschaltet wurden:

Definieren neuer HTML / DOM-Elemente Erstellen Sie Elemente, die sich von anderen Elementen erstrecken. Bündeln Sie benutzerdefinierte Funktionen logisch zu einem einzigen Tag. Erweitern Sie die API vorhandener DOM-Elemente

Es gibt eine Menge, die Sie damit machen können, und es macht Ihr Skript schön, wie dieser Artikel es gerne ausdrückt. Benutzerdefinierte Elemente, die neue Elemente in HTML definieren .

Also lasst uns zusammenfassen,

Vorteile

• Sehr elegant und leicht zu lesen.

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

• Ermöglicht dem Code ein einzigartiges Gefühl

Nachteile

• Die Unterstützung älterer Browser ist eine wichtige Sache.

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

• Schließlich ist eine Sache zu berücksichtigen, aber ich bin mir nicht sicher, Block- und Inline-Elemente. Wenn Sie benutzerdefinierte Tags verwenden, werden Sie am Ende mehr CSS schreiben, da das benutzerdefinierte Tag keine Standardseite hat.

Die Wahl liegt ganz bei Ihnen und Sie sollten sich darauf stützen, 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 .

Lernen Sie die Technologie Warum benutzerdefinierte Elemente? Mit benutzerdefinierten Elementen können Autoren ihre eigenen Elemente definieren. Autoren verknüpfen JavaScript-Code mit benutzerdefinierten Tag-Namen und verwenden diese benutzerdefinierten Tag-Namen wie jedes Standard-Tag.

Verwenden Sie zum Beispiel nach dem Registrieren einer speziellen Art von Schaltfläche, die als Super-Schaltfläche bezeichnet wird, die Super-Schaltfläche wie folgt:

Benutzerdefinierte Elemente sind weiterhin Elemente. Wir können sie genauso einfach erstellen, verwenden, bearbeiten und komponieren wie jeder Standard oder heute.

Dies scheint eine sehr gute Bibliothek zu sein, aber ich habe bemerkt, dass sie den Build-Status von Window nicht bestanden hat. Dies ist auch in einem Pre-Alpha, glaube ich, also würde ich dies im Auge behalten, während es sich entwickelt.

Warum will er nicht, dass du sie benutzt? Sie sind weder üblich noch Teil des HTML5-Standards. Technisch sind sie nicht erlaubt. Sie sind ein Hack.

Ich mag sie aber selbst. Sie könnten an XHTML5 interessiert sein. Sie können Ihre eigenen Tags definieren und diese als Teil des Standards verwenden.

Wie andere bereits betont 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 üblich sind. Möglicherweise war er sich einfach nicht bewusst, dass Sie es konnten.

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

Ein Browser muss den HTML-Code in ihm bekannte Elemente analysieren, damit erfundene Tags in etwas anderes konvertiert werden, das in das Dokumentobjektmodell (DOM) passt. Da die Webstandards nicht behandeln, wie mit allem umgegangen wird, was außerhalb der Standards liegt, behandeln Webbrowser nicht standardmäßigen Code auf unterschiedliche Weise.

Die Webentwicklung ist mit einer Reihe verschiedener Browser, die ihre eigenen Macken haben, schwierig genug, ohne ein weiteres Element der Unsicherheit hinzuzufügen. Am besten halten Sie sich an Dinge, die tatsächlich in den Standards enthalten sind. Dies versuchen die Browser-Anbieter zu befolgen, damit die beste Chance besteht, tatsächlich zu funktionieren.

Ich denke, erfundene Tags sind möglicherweise verwirrender oder unklarer als Ps mit IDs (einige Textblöcke im Allgemeinen). Wir alle wissen, dass ap mit einer ID ein Absatz ist, aber wer weiß, wofür erfundene Tags bestimmt sind? Zumindest ist das mein Gedanke. :) Daher ist dies eher ein Stil- / Klarheitsproblem als ein Problem der Funktionalität.

Andere haben hervorragende Punkte gemacht, aber es ist erwähnenswert, dass es einen sehr gültigen Fall für benutzerdefinierte Elemente und Attribute gibt , wenn Sie sich ein Framework wie AngularJS ansehen . Diese vermitteln nicht nur eine bessere semantische Bedeutung für die XML, sondern können auch Verhalten, Aussehen und Verhalten für die Webseite bereitstellen.

CSS ist eine Stylesheet-Sprache, mit der XML-Dokumente und nicht nur (X) HTML-Dokumente dargestellt werden können. Ihr Snippet mit den erfundenen Tags kann Teil eines legalen XML-Dokuments sein. Es wäre eine, wenn Sie es in ein einzelnes Root-Element einschließen. Wahrscheinlich haben Sie schon eine <html> ...</html>um sich? Jeder aktuelle Browser kann XML-Dokumente anzeigen.

Natürlich ist es kein sehr gutes XML-Dokument, es fehlen eine Grammatik und eine XML-Deklaration. Wenn Sie stattdessen einen HTML-Deklarationsheader verwenden (und wahrscheinlich eine Serverkonfiguration, die den richtigen MIME-Typ sendet), handelt es sich stattdessen um illegales HTML.

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

In anderen Kontexten ist es jedoch besser, CSS mit XML und / oder XSLT für die Präsentation zu verwenden. Das hast du getan. Da dies nicht Ihre Aufgabe war, wussten Sie nicht, was Sie taten, und HTML / CSS ist der bessere Weg, um die meiste Zeit in Ihrem Szenario daran festzuhalten.

Sie sollten Ihrem Dokument einen (X) HTML-Header hinzufügen, damit Tools Ihnen aussagekräftige Fehlermeldungen geben können.

... Ich ändere einfach alle meine erfundenen Tags in Absätze mit IDs.

Ich habe tatsächlich Probleme mit seinem Vorschlag, wie man es richtig macht.

1. Ein <p>Tag steht für Absätze. Ich sehe Leute, die es die ganze Zeit anstelle eines Div verwenden - einfach aus Platzgründen oder weil es sanfter erscheint. Wenn es kein Absatz ist, verwenden Sie ihn nicht.

2. Sie müssen oder möchten keine IDs auf alles kleben, es sei denn, Sie müssen gezielt darauf abzielen (z. B. mit Javascript). Verwenden Sie Klassen oder nur ein direktes Div.

CSS wurde von Anfang an als markupunabhängig konzipiert, sodass es mit jeder Markup-Sprache verwendet werden kann, die baumähnliche DOM-Strukturen erzeugt (z. B. SVG). Jedes Tag, das der name tokenProduktion entspricht, ist in CSS vollkommen gültig. Ihre Frage bezieht sich also eher auf HTML als auf CSS.

Elemente mit benutzerdefinierten Tags werden von der HTML5-Spezifikation unterstützt. HTML5 standardisiert die Art und Weise, wie unbekannte Elemente im DOM analysiert werden müssen. HTML5 ist also die erste HTML-Spezifikation, die streng genommen benutzerdefinierte Elemente ermöglicht. Sie müssen nur den HTML5-Doctype <!DOCTYPE html>in Ihrem Dokument verwenden.

Ab benutzerdefinierten Tag-Namen selbst ...

In diesem Dokument http://www.w3.org/TR/custom-elements/ werden benutzerdefinierte Tags empfohlen, die mindestens ein '-' (Bindestrich) enthalten. Auf diese Weise werden sie nicht mit zukünftigen HTML-Elementen in Konflikt geraten. Daher sollten Sie Ihr Dokument folgendermaßen ändern:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 

^{Anscheinend hat es niemand erwähnt, also werde ich es tun.}

Dies ist ein Nebenprodukt von Browserkriegen .

In den 90er Jahren, als das Internet zum ersten Mal zum Mainstream wurde, nahm der Wettbewerb auf dem Browsermarkt zu. Um wettbewerbsfähig zu bleiben und Benutzer anzulocken, versuchten einige Browser (insbesondere Internet Explorer), hilfreich und „benutzerfreundlich“ zu sein, indem sie versuchten, herauszufinden, was Seitengestalter meinten, und erlaubten daher Markups, die falsch sind (z. B. <b><i>foobar</b></i>korrekt als fett dargestellt werden). Kursivschrift).

Dies war bis zu einem gewissen Grad sinnvoll, denn wenn sich ein Browser weiterhin über Syntaxfehler beschwerte, während ein anderer etwas aß, was Sie darauf geworfen hatten, und ein (mehr oder weniger) korrektes Ergebnis ausspuckte, strömten die Leute natürlich zu letzterem.

Während viele dachten, die Browserkriege seien vorbei, hat sich in den letzten Jahren seit der Veröffentlichung von Chrome ein neuer Krieg zwischen Browser-Anbietern wieder entzündet. Apple begann erneut zu wachsen und Safari voranzutreiben, und der IE verlor seine Dominanz. (Man könnte es aufgrund der wahrgenommenen Zusammenarbeit und Unterstützung von Standards durch Browser-Anbieter als "Kalten Krieg" bezeichnen.) Daher ist es nicht verwunderlich, dass selbst moderne Browser, die angeblich streng den Webstandards entsprechen, tatsächlich versuchen, "clever" und "klug" zu sein Erlauben Sie ein solches Standard-Breaking-Verhalten, um nach wie vor einen Vorteil zu erzielen.

Leider führte dieses freizügige Verhalten zu einem massiven ( manche sagen sogar krebsartigen) Wachstum von schlecht markierten Webseiten. Da der IE der mildeste und beliebteste Browser war und Microsoft weiterhin gegen Standards verstößt, wurde der IE berüchtigt dafür, schlechtes Design zu fördern und zu fördern sowie fehlerhafte Seiten zu verbreiten und aufrechtzuerhalten.

Möglicherweise können Sie in einigen Browsern vorerst mit solchen Macken und Exploits davonkommen, aber abgesehen von gelegentlichen Rätseln oder Spielen oder Ähnlichem sollten Sie sich beim Erstellen von Webseiten und Websites immer an Webstandards halten, um sicherzustellen, dass diese korrekt und korrekt angezeigt werden Vermeiden Sie, dass sie durch ein Browser-Update beschädigt (möglicherweise vollständig ignoriert) werden.

Während Browser CSS im Allgemeinen mit HTML-Tags verknüpfen, unabhängig davon, ob sie gültig sind oder nicht, sollten Sie dies ABSOLUT NICHT tun.

Aus CSS-Sicht ist daran technisch nichts auszusetzen. Die Verwendung von erfundenen Tags sollten Sie jedoch NIEMALS in HTML tun.

HTML ist eine Auszeichnungssprache, dh jedes Tag entspricht einem bestimmten Informationstyp.

Ihre erfundenen Tags entsprechen keiner Art von Informationen. Dies führt zu Problemen bei Webcrawlern wie Google.

Lesen Sie weitere Informationen zur Wichtigkeit eines korrekten Markups .

Bearbeiten

Divs beziehen sich auf Gruppen mehrerer verwandter Elemente, die in Blockform angezeigt werden sollen und als solche bearbeitet werden können.

Bereiche beziehen sich auf Elemente, die anders als der aktuelle Kontext gestaltet werden sollen und inline und nicht als Block angezeigt werden sollen. Ein Beispiel ist, wenn einige Wörter in einem Satz Großbuchstaben sein müssen.

Benutzerdefinierte Tags korrelieren nicht mit Standards und daher sollte span / div stattdessen mit Klassen- / ID-Eigenschaften verwendet werden.

Hierfür gibt es sehr spezielle Ausnahmen, wie z. B. Angular JS

Obwohl CSS einen so genannten "Tag-Selektor" hat, weiß es nicht, was ein Tag ist. Damit muss die Sprache des Dokuments definiert werden. CSS wurde entwickelt, um nicht nur mit HTML, sondern auch mit XML verwendet zu werden, wobei (vorausgesetzt, Sie verwenden keine DTD oder ein anderes Validierungsschema) die Tags so gut wie alles sein können. Sie könnten es auch mit anderen Sprachen verwenden, obwohl Sie Ihre eigene Semantik für genau das entwickeln müssten, was Dinge wie "Tags" und "Attribute" entsprechen.

Browser wenden CSS im Allgemeinen auf unbekannte Tags in HTML an, da dies als besser angesehen wird, als vollständig zu brechen: Zumindest können sie etwas anzeigen. Es ist jedoch sehr schlecht, "gefälschte" Tags absichtlich zu verwenden. Ein Grund dafür ist, dass von Zeit zu Zeit neue Tags definiert werden. Wenn eines definiert wird, das Ihrem gefälschten Tag ähnelt, aber nicht ganz auf die gleiche Weise funktioniert, kann dies in neuen Browsern zu Problemen mit Ihrer Website führen.

Warum arbeitet CSS mit gefälschten Elementen? Weil es niemanden verletzt, weil du sie sowieso nicht benutzen sollst.

Warum möchte mein Professor nicht, dass ich erfundene Elemente verwende? Denn wenn dieses Element in Zukunft durch eine Spezifikation definiert wird, hat Ihr Element ein unvorhersehbares Verhalten.

Warum wusste er auch nicht, dass erfundene Elemente existieren und mit CSS funktionieren? Sind sie ungewöhnlich? Weil er, wie die meisten anderen Webentwickler, versteht, dass wir keine Dinge verwenden sollten, die in Zukunft zufällig kaputt gehen könnten.