11

Vi alguns exemplos como esse na internet, mostrando que elementos do html com nomes personalizados funcionam em relação a aplicação de estilos css.

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

Gostaria de saber porque isso funciona e se esta prática é comum no desenvolvimento web.

3 Respostas 3

12

Creio que seja tudo devido a como ocorreu a evolução do HTML, XHTML e CSS.

O CSS pode customizar qualquer tipo de elemento que seja valido dentro do HTML e até mesmo alguns elementos XML. Note que no passado remoto houve o XHTML (algo que é praticamente embutido dentro do HTML5), ou seja não são elementos falsos, mas sim customizados.

um exemplo que podemos customizar são elementos do SVG (um xml para imagens vetoriais)

Ou seja, o HTML é como se fosse um XML, no entanto bem mais "permissivo", os seletores então provavelmente devem ser livres para manipular, houve até mesmo variações do XHTML, como:

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

Ou seja, o CSS não foi só criado para atender o HTML padrão, mas qualquer formato semelhante de linguagens de marcação. O resto vai depender do renderizador que vai processar o CSS.

Claro que hoje o XHTML tecnicamente não existe (apesar do HTML5 praticamente suportar tudo o que ele fazia), mas a herança do CSS ser "livre" para qualquer tipo de tag ficou.

Note também que a evolução do HTML não segue sincronizada com o CSS, cada um evolui ao seu tempo, ou seja, se o CSS só permitisse "tags validas" não teríamos como customizar tags novas que fossem "implementadas" no HTML.

2
10

A maioria dos browsers são feitos de maneira a aceitar compatibilidade com possíveis futuros elementos de HTML. Portanto, elementos não reconhecidos são adicionados mas não terão nenhum tipo de renderização padrão associadas a ele.

Porém, não é uma prática comum, pois

  • Eles não são permitidos pela especificação do HTML
  • Pode haver conflito com elementos futuros de mesmo nome
  • Provavelmente há um elemento existente que faça a mesma tarefa igualmente bem ou até mesmo melhor.

Baseei minha resposta na resposta dada a uma pergunta semelhante, que pode ser encontrada aqui

1
  • 2
    Acho que eles são sim permitidos pela especificação, aqui e aqui e também nesta do Google falam sobre isso. A única recomendação ("obrigação") é que eles devem conter -, por exemplo <elemento-personalizado></elemento-personalizado>, também não pode fechar automaticamente, isto <elemento-personalizado /> é inválido.
    – Inkeliz
    Commented 14/03/2017 às 18:31
6

Elementos fakes são tratados como divs pelos navegadores modernos. É por isso que eles funcionam. Isso faz parte do próprio padrão HTML5 que introduz uma estrutura modular à qual novos elementos podem ser adicionados.

Os elementos e atributos personalizados são válidos em HTML, desde que:

  • Os nomes dos elementos são minúsculos e começam com x-
  • Os nomes dos atributos são minúsculos e começam com data-

Por exemplo, <x-foo data-bar="gaz"/> ou <br data-bar="gaz"/>.

Mais informações.

1
  • 3
    Acho que se confundiu amigo, não são tratados como DIVs, o padrão de elementos "customizados" é inline, DIVs são block.
    – Syzoth
    Commented 14/03/2017 às 18:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .