Why does CSS work with fake elements?

TL;DR

  • Custom tags are invalid in HTML. This may lead to rendering issues.
  • Makes future development more difficult since code is not portable.
  • Valid HTML offers a lot of benefits such as SEO, speed, and professionalism.

Long Answer

There are some arguments that code with custom tags is more usable.

However, it leads to invalid HTML. Which is not good for your site.

The Point of Valid CSS/HTML | StackOverflow

  • Google prefers it so it is good for SEO.
  • It makes your web page more likely to work in browsers you haven't tested.
  • It makes you look more professional (to some developers at least)
  • Compliant browsers can render [valid HTML faster]
  • It points out a bunch of obscure bugs you've probably missed that affect things you probably haven't tested e.g. the codepage or language set of the page.

Why Validate | W3C

  • Validation as a debugging tool
  • Validation as a future-proof quality check
  • Validation eases maintenance
  • Validation helps teach good practices
  • Validation is a sign of professionalism

Why does CSS work with fake elements?

(Most) browsers are designed to be (to some degree) forward compatible with future additions to HTML. Unrecognised elements are parsed into the DOM, but have no semantics or specialised default rendering associated with them.

When a new element is added to the specification, sometimes CSS, JavaScript and ARIA can be used to provide the same functionality in older browsers (and the elements have to appear in the DOM for those languages to be able to manipulate them to add that functionality).

(There is a specification for custom elements, but they have specific naming requirements and require registering using JavaScript.)

Why doesn't my professor want me to use made-up elements?

  • They are not allowed by the HTML specification
  • They might conflict with future standard elements with the same name
  • There is probably an existing HTML element that is better suited to the task

Also; why didn't he know that made-up elements existed and worked with CSS. Are they uncommon?

Yes. People don't use them because they have the above problems.


YADA (yet another (different) answer)

Edit: Please see the comment from BoltClock below regarding type vs tag vs element. I usually don't worry about semantics but his comment is very appropriate and informative.

Although there are already a bunch of good replies, you indicated that your professor prompted you to post this question so it appears you are (formally) in school. I thought I would expound a little bit more in depth about not only CSS but also the mechanics of web browsers. According to Wikipedia, "CSS is a style sheet language used for describing ... a document written in a markup language." (I added the emphasis on "a") Notice that it doesn't say "written in HTML" much less a specific version of HTML. CSS can be used on HTML, XHTML, XML, SGML, XAML, etc. Of course, you need something that will render each of these document types that will also apply styling. By definition, CSS does not know / understand / care about specific markup language tags. So, the tags may be "invalid" as far as HTML is concerned, but there is no concept of a "valid" tag/element/type in CSS.

Modern visual browsers are not monolithic programs. They are an amalgam of different "engines" that have specific jobs to do. At a bare minimum I can think of 3 engines, the rendering engine, the CSS engine, and the javascript engine/VM. Not sure if the parser is part of the rendering engine (or vice versa) or if it is a separate engine, but you get the idea.

Whether or not a visual browser (others have already addressed the fact that screen readers might have other challenges dealing with invalid tags) applies the formatting depends on whether the parser leaves the "invalid" tag in the document and then whether the rendering engine applies styles to that tag. Since it would make it more difficult to develop/maintain, CSS engines are not written to understand that "This is an HTML document so here are the list of valid tags / elements / types." CSS engines simply find tags / elements / types and then tell the rendering engine, "Here are the styles you should apply." Whether or not the rendering engine decides to actually apply the styles is up it.

Here is an easy way to think of the basic flow from engine to engine: parser -> CSS -> rendering. In reality it is much more convoluted but this is good enough for starters.

This answer is already too long so I will end there.

Tags:

Html

Css

Recent Posts