Why does CSS work with fake elements?

Question

In my class, I was playing around and found out that CSS works with made-up elements.

Example:

相关标签:

Answer 1

Surprisingly, nobody (including my past self) mentioned accessibility. Another reason that using valid tags instead of custom ones is for compatibility with the greatest amount of software, including screen-readers and other tools that people need for accessibility purposes. Moreover, accessibility laws like WAI require making accessible websites, which generally means requiring them to use valid markup.

---

^{Apparently nobody mentioned it, so I will.}

This is a by-product of browser wars.

Back in the 1990’s when the Internet was first starting to go mainstream, competition incrased in the browser market. To stay competitive and draw users, some browsers (most notably Internet Explorer) tried to be helpful and “user-friendly” by attempting to figure out what page designers meant and thus allowed markup that are incorrect (e.g., <b><i>foobar</b></i> would correctly render as bold-italics).

This made sense to some degree because if one browser kept complaining about syntax errors while another ate anything you threw at it and spit out a (more-or-less) correct result, then people would naturally flock to the latter.

While many thought the browser wars were over, a new war between browser vendors has reignited in the past few years since Chrome was released, Apple started growing again and pushing Safari, and IE lost its dominance. (You could call it a “cold war” due to the perceived cooperation and support of standards by browser vendors.) Therefore, it is not a surprise that even contemporary browsers which supposedly conform strictly to web standards actually try to be “clever” and allow standard-breaking behavior such as this in order to try to gain an advantage as before.

Unfortunately, this permissive behavior led to a massive (some might even say cancerous) growth of poorly marked up webpages. Because IE was the most lenient and popular browser, and due to Microsoft’s continued flouting of standards, IE became infamous for encouraging and promoting bad design and propagating and perpetuating broken pages.

You may be able to get away with using quirks and exploits like that on some browsers for now, but other than the occasional puzzle or game or something, you should always stick to web standards when creating web pages and sites to ensure they display correctly and avoid them becoming broken (possibly completely ignored) with a browser update.

Answer 2

According to the specs:

CSS

A type selector is the name of a document language element type written using the syntax of CSS qualified names

I thought this was called the element selector, but apparently it is actually the type selector. The spec goes on to talk about CSS qualified names which put no restriction on what the names actually are. That is to say that as long as the type selector matches CSS qualified name syntax it is technically correct CSS and will match the element in the document. There is no CSS-specific restriction on elements that do not exist in a particular spec -- HTML or otherwise.

HTML

There is no official restriction on including any tags in the document that you want. However, the documentation does say

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.

And it later says

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

I'm not sure specifically where or if the spec says that unkown elements are allowed, but it does talk about the HTMLUnknownElement interface for unrecognized elements. Some browsers may not even recognize elements that are in the current spec (IE8 comes to mind).

There is a draft for custom elements, though, but I doubt it is implemented anywhere yet.

Answer 3

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

Answer 4

Why does CSS work with fake elements? Because it doesn't hurt anyone because you're not supposed to use them anyways.

Why doesn't my professor want me to use made-up elements? Because if that element is defined by a specification in the future your element will have an unpredictable behavior.

Also, why didn't he know that made-up elements exist and work with CSS. Are they uncommon? Because he, like most other web developers, understand that we shouldn't use things that might break randomly in the future.

Answer 5

Made-up tags are hardly ever used, because it's unlikely that they will work reliably in every current browser, and every future browser.

A browser has to parse the HTML code into elements that it knows, to made-up tags will be converted into something else to fit in the document object model (DOM). As the web standards doesn't cover how to handle everyting that is outside of the standards, web browsers tend to handle non-standars code in different ways.

Web development is tricky enough with a bunch of different browsers that have their own quirks, without adding another element of uncertainty. The best bet it to stick with things that are actually in the standards, that is what the browser vendors try to follow, so that has the best chance to actually work.

Answer 6

Unknown elements are treated as divs by modern browsers. That's why they work. This is part of the oncoming HTML5 standard that introduces a modular structure to which new elements can be added.

In older browsers (I think IE7-) you can apply a Javascript-trick after which they will work as well.

Here is a related question I found when looking for an example.

Here is a question about the Javascript fix. Turns out it is indeed IE7 that doesn't support these elements out of the box.

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

Yes, quite. But especially: they don't serve additional purpose. And they are new to html5. In earlier versions of HTML an unknown tag was invalid.

Also, teachers seem to have gaps in their knowledge, sometimes. This might be due to the fact that they need to teach students the basics about a given subject, and it doesn't really pay off to know all ins and outs and be really up to date. I once got detention because a teacher thought I programmed a virus, just because I could make a computer play music using the play command in GWBasic. (True story, and yes, long ago). But whatever the reason, I think the advice not to use custome elements is a sound one.