Por que o CSS funciona com elementos falsos?

Na minha turma, eu estava brincando e descobri que o CSS funciona com elementos inventados.

Exemplo:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

Quando meu professor me viu usando isso pela primeira vez, ele ficou um pouco surpreso com o fato de os elementos de maquiagem funcionarem e recomendou que eu simplesmente alterasse todos os meus elementos de composição para parágrafos com IDs.

Por que meu professor não quer que eu use elementos inventados? Eles trabalham efetivamente.

Além disso, por que ele não sabia que os elementos inventados existem e funcionam com CSS. Eles são incomuns?

Por que o CSS funciona com elementos falsos?

(A maioria) dos navegadores são projetados para serem (até certo ponto) compatíveis com as adições futuras ao HTML. Os elementos não reconhecidos são analisados ​​no DOM, mas não têm semântica ou renderização padrão especializada associada a eles.

Quando um novo elemento é adicionado à especificação, às vezes CSS, JavaScript e ARIA podem ser usados ​​para fornecer a mesma funcionalidade em navegadores mais antigos (e os elementos precisam aparecer no DOM para que esses idiomas possam manipulá-los para adicionar essa funcionalidade. )

(Embora seja necessário observar que o trabalho está em andamento para definir um meio de estender o HTML com elementos personalizados , mas esse trabalho está nos estágios iniciais de desenvolvimento no momento, portanto, provavelmente deve ser evitado até que amadureça.)

Por que meu professor não quer que eu use elementos inventados?

• Eles não são permitidos pela especificação HTML
• Eles podem entrar em conflito com futuros elementos padrão com o mesmo nome
• Provavelmente, existe um elemento HTML existente mais adequado à tarefa

Além disso; por que ele não sabia que os elementos inventados existiam e trabalhavam com CSS. Eles são incomuns?

Sim. As pessoas não as usam porque têm os problemas acima.

TL; DR

• Tags personalizadas são inválidas em HTML. Isso pode levar a problemas de renderização.
• Torna o desenvolvimento futuro mais difícil, pois o código não é portátil.
• O HTML válido oferece muitos benefícios, como SEO, velocidade e profissionalismo.

Resposta longa

Existem alguns argumentos que o código com tags personalizadas é mais utilizável.

No entanto, isso leva a HTML inválido. O que não é bom para o seu site.

O ponto de CSS / HTML válido | StackOverflow

• O Google prefere, por isso é bom para SEO.
• Isso aumenta a probabilidade de sua página da web funcionar em navegadores que você não testou.
• Faz você parecer mais profissional (pelo menos para alguns desenvolvedores)
• Navegadores compatíveis podem renderizar [HTML válido mais rápido]
• Ele indica um monte de bugs obscuros que você provavelmente perdeu que afetam coisas que provavelmente não foram testadas, por exemplo, a página de código ou o conjunto de idiomas da página.

Por que validar | W3C

• Validação como uma ferramenta de depuração
• Validação como uma verificação de qualidade à prova de futuro
• Validação facilita a manutenção
• A validação ajuda a ensinar boas práticas
• Validação é um sinal de profissionalismo

YADA (mais uma resposta (diferente))

Edit: Por favor, veja o comentário do BoltClock abaixo sobre o tipo vs tag vs elemento. Geralmente não me preocupo com a semântica, mas o comentário dele é muito apropriado e informativo.

Embora já haja muitas respostas boas, você indicou que seu professor solicitou que você publicasse essa pergunta, para que pareça que você está (formalmente) na escola . Eu pensei em explicar um pouco mais sobre não apenas o CSS, mas também a mecânica dos navegadores da web. Segundo a Wikipedia , "CSS é uma linguagem de folha de estilos usada para descrever ... um documento escrito em uma linguagem de marcação". (Eu adicionei a ênfase em "a") Observe que ele não diz "escrito em HTML", muito menos uma versão específica do HTML. CSS pode ser usado em HTML, XHTML, XML, SGML, XAML, etc. Claro, você precisa de algo que renderizecada um desses tipos de documento que também aplicará estilo. Por definição, o CSS não conhece / entende / se importa com tags específicas da linguagem de marcação. Portanto, as tags podem ser "inválidas" no que diz respeito ao HTML, mas não há conceito de uma tag / elemento / tipo "válido" no CSS.

Modernos navegadores visuais não são programas monolíticas. Eles são uma amálgama de diferentes "mecanismos" que têm tarefas específicas a serem executadas. No mínimo , posso pensar em três mecanismos, o mecanismo de renderização, o mecanismo CSS e o mecanismo javascript / VM. Não tenho certeza se o analisador faz parte do mecanismo de renderização (ou vice-versa) ou se é um mecanismo separado, mas você entendeu.

Se um navegador visual ou não ( outros já abordaram o fato de que os leitores de tela podem ter outros desafios ao lidar com tags inválidas ) aplica a formatação depende se o analisador deixa a tag "inválida" no documento e se o mecanismo de renderização aplica estilos para essa tag. Como isso tornaria mais difícil o desenvolvimento / manutenção, os mecanismos CSS não foram escritos para entender que "Este é um documento HTML, então aqui está a lista de tags / elementos / tipos válidos". Os mecanismos CSS simplesmente localizam tags / elementos / tipos e depois informam ao mecanismo de renderização: "Aqui estão os estilos que você deve aplicar". Depende se o mecanismo de renderização decide realmente aplicar os estilos.

Aqui está uma maneira fácil de pensar no fluxo básico de mecanismo para mecanismo: analisador -> CSS -> renderização. Na realidade, é muito mais complicado, mas isso é bom o suficiente para começar.

Esta resposta já é muito longa, então vou terminar por aí.

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

Em navegadores mais antigos (acho que o IE7-), você pode aplicar um truque de Javascript, após o qual eles também funcionarão.

Aqui está uma pergunta relacionada que encontrei ao procurar um exemplo.

Aqui está uma pergunta sobre a correção do Javascript . Acontece que é realmente o IE7 que não suporta esses elementos imediatamente.

Além disso; por que ele não sabia que etiquetas inventadas existiam e trabalhavam com CSS. Eles são incomuns?

Sim, bastante. Mas especialmente: eles não servem a propósitos adicionais. E eles são novos no html5. Nas versões anteriores do HTML, uma tag desconhecida era inválida.

Além disso, os professores parecem ter lacunas em seus conhecimentos, às vezes. Isso pode ser devido ao fato de que eles precisam ensinar aos alunos o básico sobre um determinado assunto, e não vale a pena conhecer todos os detalhes e estar realmente atualizado. Certa vez, fui detido porque um professor pensou que eu tinha programado um vírus, apenas porque eu podia fazer um computador tocar música usando o playcomando GWBasic. (História verdadeira, e sim, há muito tempo). Mas, seja qual for o motivo, acho que o conselho de não usar elementos de custume é sensato.

Na verdade, você pode usar elementos personalizados. Aqui está a especificação do W3C sobre este assunto:

http://w3c.github.io/webcomponents/spec/custom/

E aqui está um tutorial explicando como usá-los:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Conforme apontado por @Quentin: este é um rascunho de especificação nos primeiros dias de desenvolvimento e que impõe restrições sobre como podem ser os nomes dos elementos.

Existem algumas coisas nas outras respostas que são pouco expressas ou talvez um pouco incorretas.

FALSE (ish): elementos HTML não padrão são "não permitidos", "ilegais" ou "inválidos".

Não necessariamente. Eles são "não conformes" . Qual é a diferença? Algo não pode "estar em conformidade" e ainda pode ser "permitido". O W3C não vai enviar a polícia HTML para sua casa e levá-lo embora.

O W3C deixou as coisas assim por uma razão. Conformidade e especificações são definidas por uma comunidade. Se houver uma comunidade menor consumindo HTML para fins mais específicos e todos concordarem com alguns novos elementos de que precisam para facilitar as coisas, eles podem ter o que o W3C chama de "outras especificações aplicáveis" . (é uma simplificação grosseira, obviamente, mas você entendeu)

Dito isto, validadores estritos declararão seus elementos não padrão como "inválidos". mas isso ocorre porque o trabalho do validador é garantir a conformidade com qualquer especificação que esteja validando, não garantir a "legalidade" do navegador ou do uso .

FALSE (ish): elementos HTML não-padrão irá resultar em problemas de processamento

Possivelmente, mas improvável. (substituir "será" por "pode") A única maneira de resultar em um problema de renderização é se o seu elemento personalizado entrar em conflito com outra especificação, como uma alteração na especificação HTML ou outra especificação sendo honrada no mesmo sistema (como SVG, Math ou algo personalizado).

De fato, o motivo pelo qual o CSS pode estilizar tags não padrão é porque a especificação HTML afirma claramente que:

Os agentes de usuários devem tratar elementos e atributos que eles não entendem como semanticamente neutros; deixando-os no DOM (para processadores DOM) e estilizando-os de acordo com CSS (para processadores CSS), mas sem inferir nenhum significado deles

Nota: se você quiser usar uma tag personalizada, lembre-se de que uma alteração nas especificações do HTML posteriormente poderá aumentar seu estilo, portanto, esteja preparado. No <imsocool>entanto, é realmente improvável que o W3C implemente a tag.

Tags não padrão e JavaScript (via DOM)

O motivo pelo qual você pode acessar e alterar elementos personalizados usando JavaScript é porque a especificação fala sobre como eles devem ser tratados no DOM , que é a API (realmente horrível) que permite manipular os elementos em sua página.

A interface HTMLUnknownElement deve ser usada para elementos HTML que não são definidos por esta especificação (ou outras especificações aplicáveis).

TL; DR: A conformidade com as especificações é feita para fins de comunicação e segurança. A não conformidade ainda é permitida por tudo, exceto por um validador , cujo único objetivo é impor a conformidade, mas cujo uso é opcional.

Por exemplo:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Tenho certeza de que isso atrairá chamas, mas há meus 2 centavos)

De acordo com as especificações:

CSS

Um seletor de tipo é o nome de um tipo de elemento de linguagem de documento escrito usando a sintaxe dos nomes qualificados de CSS

Eu pensei que isso era chamado de seletor de elementos , mas aparentemente é realmente o seletor de tipos . A especificação continua falando sobre CSS qualified namesquais não colocam restrições sobre quais são os nomes. Ou seja, desde que o seletor de tipo corresponda à sintaxe de nome qualificado de CSS, ele é tecnicamente correto em CSS e corresponderá ao elemento no documento. Não há restrição específica de CSS para elementos que não existem em uma especificação específica - HTML ou outro.

HTML

Não há nenhuma restrição oficial sobre a inclusão de tags no documento que você deseja. No entanto, a documentação diz

Os autores não devem usar elementos, atributos ou valores de atributos para outros fins que não os propósitos semânticos apropriados, pois isso impede o software de processar corretamente a página.

E depois diz

Os autores não devem usar elementos, atributos ou valores de atributos que não são permitidos por esta especificação ou por outras especificações aplicáveis, pois isso torna significativamente mais difícil a extensão do idioma no futuro.

Não sei exatamente onde ou se a especificação diz que elementos desconhecidos são permitidos , mas fala sobre a interface HTMLUnknownElement para elementos não reconhecidos. Alguns navegadores podem nem reconhecer elementos que estão na especificação atual (o IE8 vem à mente).

No entanto, existe um rascunho para elementos personalizados , mas duvido que ele já esteja implementado em qualquer lugar.

Isso é possível com o html5, mas é necessário levar em consideração os navegadores mais antigos.

Se você decidir usá-los, certifique-se de COMENTAR seu html !! Algumas pessoas podem ter problemas para descobrir o que é, então um comentário pode economizar uma tonelada de tempo.

Algo assim,

<!-- Custom tags in use, refer to their CSS for aid -->

Quando você cria sua própria tag / elementos personalizados, os navegadores mais antigos não têm idéia do que são elementos html5 como nav/ section.

Se você está interessado nesse conceito, recomendo fazê-lo da maneira certa.

Começando

Elementos personalizados permitem que os desenvolvedores da Web definam novos tipos de elementos HTML. A especificação é uma das várias novas primitivas de API que chegam ao âmbito dos componentes da Web, mas é possivelmente a mais importante. Os Componentes da Web não existem sem os recursos desbloqueados por elementos personalizados:

Definir novos elementos HTML / DOM Crie elementos que se estendem a partir de outros elementos Agrupe logicamente a funcionalidade personalizada em uma única tag Estenda a API dos elementos DOM existentes

Há muito o que você pode fazer com isso e isso torna seu script bonito, como este artigo gosta de colocar. Elementos personalizados que definem novos elementos em HTML .

Então vamos recapitular,

Prós

• Muito elegante e fácil de ler.

• É bom não ver tantos divs. : p

• Permite uma sensação única ao código

Contras

• O suporte a navegadores mais antigos é algo importante a considerar.

• Outros desenvolvedores podem não ter idéia do que fazer se não souberem sobre tags personalizadas. (Explique a eles ou adicione comentários para informá-los)

• Por fim, uma coisa a ser levada em consideração, mas não tenho certeza, são os elementos de bloco e embutidos. Ao usar tags personalizadas, você acabará escrevendo mais css, pois a tag personalizada não terá um lado padrão.

A escolha é inteiramente sua e você deve basear-se no que o projeto está pedindo.

Atualização 1/2/2014

Aqui está um artigo muito útil que encontrei e achei que compartilharia, elementos personalizados .

Aprenda a tecnologia Por que elementos personalizados? Elementos personalizados permitem que os autores definam seus próprios elementos. Os autores associam o código JavaScript aos nomes de marcas personalizadas e, em seguida, usam esses nomes de marcas personalizadas como usariam qualquer marca padrão.

Por exemplo, depois de registrar um tipo especial de botão chamado super botão, use o botão super da seguinte maneira:

Elementos personalizados ainda são elementos. Podemos criar, usar, manipular e compor com a mesma facilidade que qualquer padrão ou hoje.

Parece uma biblioteca muito boa de usar, mas notei que ela não passava no status de compilação do Windows. Isso também está em um pré-alfa, eu acredito, então eu ficaria de olho nisso enquanto ele se desenvolve.

Por que ele não quer que você os use? Eles não são comuns nem fazem parte do padrão HTML5. Tecnicamente, eles não são permitidos. Eles são um hack.

Eu também gosto deles. Você pode estar interessado em XHTML5. Permite definir suas próprias tags e usá-las como parte do padrão.

Além disso, como outros salientaram, eles são inválidos e, portanto, não são portáteis.

Por que ele não sabia que eles existem? Eu não sei, exceto que eles não são comuns. Possivelmente ele não estava ciente de que você poderia.

As tags criadas quase nunca são usadas, porque é improvável que funcionem de maneira confiável em todos os navegadores atuais e futuros.

Um navegador precisa analisar o código HTML em elementos que ele conhece; as tags criadas serão convertidas em outra coisa para caber no modelo de objeto de documento (DOM). Como os padrões da web não cobrem como lidar com tudo que está fora dos padrões, os navegadores da web tendem a manipular código não-padrão de maneiras diferentes.

O desenvolvimento da Web é bastante complicado com vários navegadores diferentes que têm suas próprias peculiaridades, sem adicionar outro elemento de incerteza. A melhor aposta é manter o que realmente está nos padrões, é o que os fornecedores de navegadores tentam seguir, para que tenha a melhor chance de realmente funcionar.

Eu acho que as tags inventadas são potencialmente mais confusas ou pouco claras do que os ps com IDs (geralmente algum bloco de texto). Todos nós sabemos que um ID com um ID é um parágrafo, mas quem sabe para que tags inventadas se destinam? Pelo menos esse é o meu pensamento. :) Portanto, esse é mais um problema de estilo / clareza do que de funcionalidade.

Outros fizeram pontos excelentes, mas vale a pena notar que, se você observar uma estrutura como o AngularJS , há um caso muito válido para elementos e atributos personalizados. Eles transmitem não apenas um melhor significado semântico para o xml, mas também podem fornecer comportamento, aparência e aparência para a página da web.

CSS é uma linguagem de folha de estilos que pode ser usada para apresentar documentos XML, não apenas documentos X (X) HTML. Seu snippet com as tags criadas pode fazer parte de um documento XML legal; seria um se você o incluir em um único elemento raiz. Provavelmente você já tem um<html> ...</html> problema? Qualquer navegador atual pode exibir documentos XML.

É claro que não é um documento XML muito bom, falta uma gramática e uma declaração XML. Se você usar um cabeçalho de declaração HTML (e provavelmente uma configuração de servidor que envie o tipo MIME correto), seria HTML ilegal.

(X) HTML tem vantagens sobre XML simples, pois os elementos têm um significado semântico que é útil no contexto de uma apresentação da página da web. As ferramentas podem trabalhar com essa semântica, outros desenvolvedores sabem o significado, é menos propenso a erros e melhor para ler.

Mas em outros contextos, é melhor usar CSS com XML e / ou XSLT para fazer a apresentação. Foi isso que você fez. Como essa não era sua tarefa, você não sabia o que estava fazendo, e HTML / CSS é a melhor maneira de percorrer a maior parte do tempo em que você deve cumpri-lo em seu cenário.

Você deve adicionar um cabeçalho HTML (X) ao seu documento para que as ferramentas possam fornecer mensagens de erro significativas.

... Simplesmente altero todas as minhas tags inventadas para parágrafos com IDs.

Na verdade, discordo de sua sugestão de como fazê-lo corretamente.

1. Uma <p>tag é para parágrafos. Vejo pessoas usando o tempo todo em vez de uma div - simplesmente para fins de espaçamento ou porque parece mais suave. Se não for um parágrafo, não o use.

2. Você não precisa ou deseja colar IDs em tudo, a menos que precise direcioná-lo especificamente (por exemplo, com Javascript). Use classes ou apenas uma divisão direta.

Desde o início, o CSS foi projetado para ser independente de marcação, para que possa ser usado com qualquer linguagem de marcação que produza estruturas DOM semelhantes a árvores (SVG, por exemplo). Qualquer tag que name tokenesteja em conformidade com a produção é perfeitamente válida em CSS. Portanto, sua pergunta é mais sobre HTML do que sobre o próprio CSS.

Elementos com tags personalizadas são suportados pela especificação HTML5. O HTML5 padroniza a maneira como os elementos desconhecidos devem ser analisados ​​no DOM. Portanto, o HTML5 é a primeira especificação HTML que permite elementos personalizados estritamente. Você só precisa usar o doctype HTML5 <!DOCTYPE html>no seu documento.

A partir dos próprios nomes de tags personalizados ...

Este documento http://www.w3.org/TR/custom-elements/ recomenda tags personalizadas que você escolhe conter pelo menos um símbolo '-' (traço). Dessa forma, eles não entrarão em conflito com futuros elementos HTML. Portanto, é melhor alterar seu documento para algo assim:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 

^{Aparentemente, ninguém mencionou, então eu vou.}

Este é um subproduto das guerras entre navegadores .

Nos anos 90, quando a Internet estava começando a se popularizar, a concorrência aumentou no mercado de navegadores. Para manter a competitividade e atrair usuários, alguns navegadores (principalmente o Internet Explorer) tentaram ser úteis e "amigáveis", tentando descobrir o que os designers de página queriam dizer e, portanto, permitiram a marcação incorreta (por exemplo,<b><i>foobar</b></i> seria corretamente exibida em negrito). itálico).

Isso fazia sentido até certo ponto, porque se um navegador continuasse reclamando de erros de sintaxe, enquanto outro comesse qualquer coisa que você jogasse nele e cuspisse um resultado (mais ou menos) correto, as pessoas naturalmente se concentrariam no último.

Enquanto muitos pensavam que as guerras dos navegadores haviam terminado, uma nova guerra entre os fornecedores de navegadores reacendeu nos últimos anos desde o lançamento do Chrome, a Apple começou a crescer novamente e pressionou o Safari, e o IE perdeu seu domínio. (Você pode chamar isso de "guerra fria" devido à cooperação e suporte percebidos pelos padrões pelos fornecedores de navegadores.) Portanto, não é de surpreender que mesmo os navegadores contemporâneos que supostamente estejam em conformidade com os padrões da Web realmente tentem ser "inteligentes" e permita um comportamento de quebra de padrão como esse para tentar obter uma vantagem como antes.

Infelizmente, esse comportamento permissivo levou a um crescimento maciço ( alguns podem até dizer cancerígeno) de páginas da web mal marcadas. Como o IE era o navegador mais branda e popular, e devido à contínua violação dos padrões da Microsoft, o IE tornou-se famoso por incentivar e promover um design ruim e propagar e perpetuar páginas quebradas.

Você pode se safar do uso de peculiaridades e explorações como essa em alguns navegadores por enquanto, mas, além do quebra-cabeça ou jogo ocasional ou algo assim, você deve sempre seguir os padrões da web ao criar páginas e sites para garantir que sejam exibidos corretamente e evite que fiquem quebrados (possivelmente completamente ignorados) com uma atualização do navegador.

Embora os navegadores geralmente relacionem CSS às tags HTML, independentemente de serem válidas ou não, você ABSOLUTAMENTE NÃO deve fazer isso.

Tecnicamente, não há nada errado com isso da perspectiva do CSS. No entanto, o uso de tags inventadas é algo que você NUNCA deve fazer em HTML.

HTML é uma linguagem de marcação, o que significa que cada tag corresponde a um tipo específico de informação.

Suas tags inventadas não correspondem a nenhum tipo de informação. Isso criará problemas de rastreadores da Web, como o Google.

Leia mais informações sobre a importância da marcação correta .

Editar

Divs referem-se a grupos de vários elementos relacionados, destinados a serem exibidos em forma de bloco e podem ser manipulados como tal.

Os spans se referem a elementos que devem ser estilizados diferentemente do contexto em que estão atualmente e devem ser exibidos em linha, não como um bloco. Um exemplo é se algumas palavras em uma frase precisam ser maiúsculas.

Tags personalizadas não se correlacionam com nenhum padrão e, portanto, span / div deve ser usado com propriedades de classe / ID.

Existem isenções muito específicas, como Angular JS

Embora o CSS tenha algo chamado "seletor de tags", ele não sabe realmente o que é uma tag. Isso resta para o idioma do documento definir. O CSS foi projetado para ser usado não apenas com HTML, mas também com XML, onde (supondo que você não esteja usando um DTD ou outro esquema de validação) as tags podem ser praticamente qualquer coisa. Você também pode usá-lo com outros idiomas, embora precise criar sua própria semântica para exatamente o que coisas como "tags" e "atributos" correspondem.

Os navegadores geralmente aplicam CSS a tags desconhecidas em HTML, porque isso é considerado melhor do que quebrar completamente: pelo menos eles podem exibir alguma coisa. Mas é uma prática muito ruim usar tags "falsas" deliberadamente. Uma razão para isso é que novas tags são definidas de tempos em tempos e, se uma é definida, parece com sua tag falsa, mas não funciona da mesma maneira, isso pode causar problemas com o site em novos navegadores.

Por que o CSS funciona com elementos falsos? Porque não machuca ninguém, porque você não deve usá-los de qualquer maneira.

Por que meu professor não quer que eu use elementos inventados? Porque se esse elemento for definido por uma especificação no futuro, seu elemento terá um comportamento imprevisível.

Além disso, por que ele não sabia que os elementos inventados existem e funcionam com CSS. Eles são incomuns? Porque ele, como a maioria dos outros desenvolvedores da web, entende que não devemos usar coisas que possam quebrar aleatoriamente no futuro.