Why does CSS work with fake elements?

css, html

Solution

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.

Problem

In my class, I was playing around and found out that CSS works with made-up elements. Example: ``` imsocool { color:blue; } ``` ``` <imsocool>HELLO</imsocool> ``` When my professor first saw me using this, he was a bit surprised that made-up elements worked and recommended I simply change all of my made up elements to paragraphs with ID's. Why doesn't my professor want me to use made-up elements? They work effectively. Also, why didn't he know that made-up elements exist and work with CSS. Are they uncommon?

Original source

Related problems