Why does CSS work with "fake" HTML elements?

Asked

Viewed 179 times

11

I saw some examples like this on the internet, showing that html elements with custom names work in relation to the application of css styles.

elementofake {
  color:red;
  font-size:30px;
  font-weight:bold;
}
<elementofake>Olá mundo.</elementofake>

I would like to know why this works and whether this practice is common in web development.

html css

3 answers

12


I believe it is all due to how the evolution of HTML, XHTML and CSS occurred.

CSS can customize any type of element that is valid within HTML and even some XML elements. Note that in the remote past there was XHTML (something that is practically embedded within HTML5), ie are not false elements, but customized.

an example we can customize are SVG elements (an xml for vector images)

That is, HTML is like an XML, however much more "permissive", the selectors then probably should be free to manipulate, there were even variations of XHTML, as:

  • XHTML 1
  • XHTML Mobile Profile
  • XHTML 2.0
  • XHTML5

That is, the CSS was not only created to meet the Standard HTML, but any similar format of markup languages. The rest will depend on the renderer that will process the CSS.

Of course today XHTML technically doesn’t exist (although HTML5 pretty much supports everything it did), but the CSS heritage is "free" for any kind of tag.

Note also that the evolution of HTML does not follow synchronized with CSS, each evolves at its own time, that is, if CSS only allowed "valid tags" we would not have to customize new tags that were "implemented" in HTML.

  • 2

    I believe it is also valid to quote web Components, that work on custom elements.

  • @Andersoncarloswoss great, I will read and then read this https://w3c.github.io/webcomponents/spec/custom/ and then update ;)

10

Most browsers are designed to accept compatibility with possible future HTML elements. Therefore, unrecognized elements are added but will not have any standard rendering type associated with it.

However, it is not a common practice because

  • They are not allowed by the HTML specification
  • There may be conflict with future elements of the same name
  • Probably there is an existing element that does the same task equally well or even better.

I based my answer on the answer given to a similar question, which can be found here

  • 2

    I think they are allowed by the specification, here and here and also in this google talk about it. The only recommendation ("obligation") is that they should contain -, for example <elemento-personalizado></elemento-personalizado>, also cannot close automatically, this <elemento-personalizado /> is invalid.

6

Elements fakes are treated as Divs by modern browsers. That’s why they work. This is part of the HTML5 standard itself that introduces a modular structure to which new elements can be added.

Custom elements and attributes are valid in HTML, provided that:

  • Element names are lowercase and start with x-
  • The names of attributes are lowercase and start with date-

For example, <x-foo data-bar="gaz"/> or <br data-bar="gaz"/>.

More information.

  • 3

    I think you got confused friend, are not treated as Divs, the standard elements "customized" is inline, Divs are block.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.