Por que funciona CSS com falsos elementos?

Question 1

Por que funciona CSS com falsos elementos?

(Mais) navegadores são projetados para ser (em algum grau) encaminhar compatível com futuras adições para HTML.Não reconhecido elementos são analisadas para o DOM, mas não tem semântica ou especializadas de renderização padrão associados a eles.

Quando um novo elemento é adicionado à especificação, por vezes, CSS, JavaScript e ARIA pode ser usado para fornecer a mesma funcionalidade em navegadores mais antigos (e os elementos aparecem no DOM para as línguas para ser capaz de manipulá-los para adicionar essa funcionalidade).

(Há uma especificação para elementos personalizados, mas eles têm a nomenclatura específica de requisitos e necessitam de registar a utilização de JavaScript.)

Porque não meu professor quer que eu use fez-se elementos?

Eles não são permitidas pela especificação HTML
Eles podem entrar em conflito com os futuros elementos padrão com o mesmo nome
Provavelmente há um elemento HTML existente que é mais adequado para a tarefa

Também;por que ele não sabe que fez-se elementos existia e trabalhado com CSS.São eles incomum?

Sim.As pessoas não usá-los porque eles têm os problemas acima.

Question 2

Tl; dr

As tags personalizadas são inválidas no 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

Há Alguns argumentos Esse código com tags personalizadas é mais utilizável.

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

O ponto de CSS/HTML válido | Stackoverflow

O Google o prefere para que seja bom para o SEO.

É mais provável que sua página da web funcione em navegadores que você não testou.

Isso faz você parecer mais profissional (pelo menos para alguns desenvolvedores)

Navegadores compatíveis podem renderizar [HTML válido mais rápido

Ele aponta um monte de bugs obscuros que você provavelmente perdeu que afetam as coisas que você provavelmente não testou, por exemplo, o conjunto de códigos 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

A validação facilita a manutenção

A validação ajuda a ensinar boas práticas

A validação é um sinal de profissionalismo

Question 3

Yada (mais uma resposta (diferente))

EDIT: Por favor, consulte o comentário de BoltClock abaixo sobre o tipo Tipo vs Tag vs Element. Normalmente não me preocupo com a semântica, mas seu comentário é muito apropriado e informativo.

Embora já existam um monte de boas respostas, você indicou que seu professor levou você a postar esta pergunta, então parece que você é (formalmente) na escola. Eu pensei que iria expor um pouco mais em profundidade não apenas sobre CSS, mas também o mecânica de navegadores da web. De acordo com Wikipedia, "CSS é uma linguagem de chapas de estilo usada para descrever ... um documento escrito em uma Idioma 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 usada em html, xhtml, xml, sgml, xaml, etc. . Claro, você precisa de algo que renderizar Cada um desses tipos de documentos que também aplicará estilo. Por definição, CSS não conhecer / entender / se preocupar com Tags específicas de linguagem de marcação. Portanto, as tags podem ser "inválidas" no que diz respeito ao HTML, mas não há conceito de tag/elemento/tipo "válido" no CSS.

Moderno Navegadores visuais não são programas monolíticos. Eles são um amálgama de diferentes "motores" que têm empregos específicos a serem feitos. Em um mínimo Posso pensar em três motores, o mecanismo de renderização, o mecanismo CSS e o mecanismo/VM JavaScript. Não tenho certeza se o analisador faz parte do mecanismo de renderização (ou vice -versa) ou se é um mecanismo separado, mas você obtém a ideia.

Seja ou não um visual navegador (~~outros já abordaram o fato de que a tela leitores Pode ter outros desafios lidando com tags inválidas~~) Aplica a formatação depende se o analisador deixa a tag "inválida" no documento e depois se o mecanismo de renderização aplica estilos a essa tag. Como tornaria mais difícil desenvolver/manter, os motores CSS não são escritos para Compreendo que "este é um documento HTML, então aqui está a lista de tags / elementos / tipos válidos". Os motores CSS simplesmente encontram Tags / elementos / tipos E então diga ao mecanismo de renderização: "Aqui estão os estilos que você deve aplicar". Se o mecanismo de renderização decide ou não aplicar os estilos.

Aqui está uma maneira fácil de pensar no básico Fluxo de motor para motor: analisador -> css -> renderização. Na realidade, é muito mais complicado, mas isso é bom o suficiente para iniciantes.

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

Question 4

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

Nos navegadores mais antigos (acho que o IE7-) você pode aplicar um JavaScript-Trick, após o qual eles funcionarão também.

Aqui está um Pergunta relacionada Encontrei ao procurar um exemplo.

Aqui está um Pergunta sobre a correção JavaScript. Acontece que é realmente o IE7 que não suporta esses elementos fora da caixa.

Também; Por que ele não sabia que as tags inventadas existiam e trabalhavam com o CSS. Eles são incomuns?

Sim. Mas especialmente: eles não servem a propósitos adicionais. E eles são novos no HTML5. Nas versões anteriores do HTML, uma etiqueta 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 realmente não vale a pena conhecer todos os meandros e estar realmente atualizado. Uma vez fui detenção porque um professor pensou que eu programava um vírus, só porque eu poderia fazer um computador tocar música usando o play comando em 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 custom é um som.

Question 5

Na verdade, você pode usar elementos personalizados. Aqui está a especificação 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: esta é uma especificação de rascunho nos primeiros dias de desenvolvimento e que impõe restrições ao que os nomes de elementos podem ser.

Question 6

Existem algumas coisas sobre as outras respostas que são mal formadas ou talvez um pouco incorretas.

FALSO (ISH): Elementos HTML não padrão são "não permitidos", "ilegais" ou "inválidos".

Não necessariamente. Eles estão "Não conforme". Qual é a diferença? Algo pode "não se conformar" e ainda ser "permitido". O W3C não vai enviar a polícia HTML para sua casa e levá -lo para longe.

O W3C deixou as coisas dessa maneira por um motivo. A conformidade e as especificações são definidas por uma comunidade. Se você tem uma comunidade menor que consome HTML para fins mais específicos e todos concordam com alguns novos elementos necessários para facilitar as coisas, eles podem ter o que o W3C se refere como como "Outras especificações aplicáveis". (Esta é uma simplificação grosseira, obviamente, mas você entendeu)

Dito isto, os validadores rigorosos declararão que seus elementos fora do padrão são "inválidos". Mas isso ocorre porque o trabalho do validador é garantir a conformidade com qualquer especificação que seja validada, para não garantir a "legalidade" para o navegador ou para usar.

FALSO (ISH): Elementos HTML não padrão vai resultar em problemas de renderização

Possivelmente, mas improvável. (Substitua "Will" com "Might") A única maneira de resultar em uma questão 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 homenageada no mesmo sistema (como como SVG, matemática ou algo personalizado).

Na verdade, A razão pela qual o CSS pode estilizar tags fora do padrão é porque a especificação HTML afirma claramente este:

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

Observação: Se você deseja usar uma tag personalizada, lembre -se de uma alteração na especificação HTML posteriormente pode explodir seu estilo, por isso esteja preparado. É realmente improvável que o W3C implemente o <imsocool> tag, no entanto.

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

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

A interface htmlunknowelement deve ser usada para elementos HTML que não são definidos por essa 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, menos por um validador, cujo único objetivo é fazer cumprir a conformidade, mas cujo uso é opcional.

Por exemplo:

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

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

Question 7

De acordo com as especificações:

CSS

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

Eu pensei que isso era chamado de elemento seletor, mas aparentemente é realmente o modelo Seletor. A especificação continua falando sobre CSS qualified names o que não tem restrições sobre quais são os nomes. Ou seja, enquanto o seletor de tipo corresponde à sintaxe de nome qualificada do CSS, ele é tecnicamente correto CSS e corresponderá ao elemento no documento. Não existe restrição específica de CSS nos elementos que não existem em uma especificação específica-html ou não.

Html

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

Os autores não devem usar elementos, atributos ou valores de atributo para outros propósitos além de seu objetivo semântico pretendido apropriado, 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 atributo que não são permitidos por esta especificação ou outras especificações aplicáveis, pois isso torna significativamente mais difícil para que o idioma seja estendido no futuro.

Não tenho certeza especificamente onde ou se a especificação diz que os elementos não utidos são permitido, mas fala sobre o Htmlunknowelement interface para elementos não reconhecidos. Alguns navegadores podem nem reconhecer elementos que estão nas especificações atuais (o IE8 vem à mente).

Existe um rascunho para elementos personalizados, porém, mas duvido que seja implementado em qualquer lugar ainda.

Question 8

Isso é possível com o HTML5, mas você precisa 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 é, para que um comentário possa economizar muito tempo.

Algo assim,

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

Quando você faz sua própria tag/elementos personalizados, os navegadores mais antigos não terão idéia do que isso é exatamente como elementos HTML5 como nav/section.

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

Começando

Os elementos personalizados permitem aos desenvolvedores da Web definir novos tipos de elementos HTML. A especificação é uma das várias novas primitivas de API que aterrissam no guarda -chuva dos componentes da web, mas é possivelmente o mais importante. Os componentes da Web não existem sem os recursos desbloqueados por elementos personalizados:

Definir novos elementos HTML/DOM criam elementos que se estendem de outros elementos agrupam logicamente funcionalidade personalizada em uma única tag estendida a API dos elementos DOM existentes

Há muita coisa que você pode fazer com isso e torna seu script bonito, pois 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 no código

Contras

O suporte mais antigo do navegador é uma coisa forte 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 levar em consideração, mas não tenho certeza, é os elementos bloqueados e embutidos. Ao usar tags personalizadas, você acabará escrevendo mais CSS por causa da tag personalizada não terá um lado padrão.

A escolha depende inteiramente de você e você deve baseá -la no que o projeto está pedindo.

Atualização 1/2/2014

Aqui está um artigo muito útil que encontrei e imaginei que compartilharia, Elementos personalizados.

Aprenda a tecnologia Por que elementos personalizados? Elementos personalizados permitem que os autores definem seus próprios elementos. Os autores associam o código JavaScript a nomes de tags personalizados e, em seguida, use esses nomes de tags personalizados, como faria qualquer tag padrão.

Por exemplo, depois de registrar um tipo especial de botão chamado Super-Button, use o Super Button assim:

Elementos personalizados ainda são elementos. Podemos criar, usar, manipular e compor -os tão facilmente quanto qualquer padrão ou hoje.

Parece uma biblioteca muito boa para usar, mas eu notei que não passou pelo status de construção da Window. Isso também está em um pré-alfa, acredito, para ficar de olho nisso enquanto se desenvolve.

Question 9

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 eu mesmo gosto deles, no entanto. Você pode estar interessado no XHTML5. Ele permite definir suas próprias tags e usá -las como parte do padrão.

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

Por que ele não sabia que eles existem? Não sei, exceto que eles não são comuns. Possivelmente ele simplesmente não sabia que você poderia.

Question 10

Tags inventadas quase nunca são usadas, porque é improvável que elas funcionem de maneira confiável em todos os navegadores atuais e em todos os futuros navegador.

Um navegador deve analisar o código HTML em elementos que sabe, para tags inventadas serão convertidas em outra coisa para se encaixar no Modelo de Objeto do Documento (DOM). Como os padrões da Web não cobrem como lidar com tudo o que está fora dos padrões, os navegadores da Web tendem a lidar com o código não-estanking de maneiras diferentes.

O desenvolvimento da Web é complicado o suficiente com um monte de navegadores diferentes que têm suas próprias peculiaridades, sem adicionar outro elemento de incerteza. A melhor aposta para manter as coisas que estão realmente nos padrões, é isso que os vendedores do navegador tentam seguir, de modo que tem a melhor chance de realmente funcionar.

Question 11

Eu acho que as tags inventadas são potencialmente mais confusas ou pouco claras do que os P com IDs (algum bloco de texto em geral). Todos sabemos que a AP com um ID é um parágrafo, mas quem sabe o que as tags inventadas são destinadas? Pelo menos esse é o meu pensamento. :) Portanto, isso é mais um problema de estilo / clareza do que um da funcionalidade.

Question 12

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

Question 13

CSS é uma linguagem de chapas de estilo que pode ser usada para apresentar documentos XML, não apenas (x) documentos HTML. Seu snippet com as tags inventadas pode fazer parte de um documento XML legal; Seria um se você o incluísse em um único elemento raiz. Provavelmente você já tem um <html> ...</html> Em torno disso? Qualquer navegador atual pode exibir documentos XML.

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

(X) O HTML tem vantagens sobre o 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 funcionar com essa semântica, outros desenvolvedores sabem o significado, é menos propenso a erros e melhor ler.

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

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

Question 14

... Eu simplesmente troco todas as minhas tags inventadas para parágrafos com o ID.

Na verdade, eu discordo da sugestão dele de como fazê -lo corretamente.

UMA  A tag é para parágrafos. Eu vejo pessoas usando isso o tempo todo, em vez de uma div - simplesmente para fins de espaçamento ou porque parece mais gentil. Se não for um parágrafo, não o use.
Você não precisa ou deseja colocar o IDs em tudo, a menos que precise segmentar especificamente (por exemplo, com JavaScript). Use aulas ou apenas uma div.

Question 15

Desde seus primeiros dias CSS foi projetado para ser de marcação de agnóstico, então ele pode ser usado com qualquer linguagem de marcação de produção de árvore iguais DOM estruturas SVG (por exemplo).Qualquer marca que cumprir a name token a produção é perfeitamente válida em CSS.Assim que a sua pergunta é um pouco sobre HTML que o CSS em si.

Elementos com tags personalizadas são suportados pela especificação do HTML5.HTML5 padronizar a maneira como desconhecido elementos devem ser analisados no DOM.Portanto, o HTML5 é o primeiro a especificação de HTML que permite personalizado elementos estritamente falando.Você só precisa usar o doctype do HTML5 <!DOCTYPE html> em seu documento.

Como de costume nomes de marca em si...

Este documento http://www.w3.org/TR/custom-elements/ recomenda marcas personalizadas que você escolher para se conter, no mínimo, um '-' (traço) símbolo.Dessa forma, eles não entram em conflito com os futuros elementos HTML.Portanto, é melhor você mudar a sua doc algo como isto:

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

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

Question 16

Surpreendentemente, ninguém (incluindo meu eu passado) mencionou acessibilidade. Outro motivo pelo qual o uso de tags válidas em vez de personalizadas é a compatibilidade com a maior quantidade de software, incluindo leitores de tela e outras ferramentas que as pessoas precisam de fins de acessibilidade. Além disso, leis de acessibilidade como Wai exigir Fazer sites acessíveis, o que geralmente significa exigir que eles usem marcação válida.

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

Este é um subproduto de Guerras do navegador.

Nos anos 90, quando a Internet estava começando a se tornar popular, a concorrência aumenta no mercado do navegador. Para se manter competitivo e atrair usuários, alguns navegadores (principalmente o Internet Explorer) tentaram ser úteis e "amigáveis" tentando descobrir quais designers de página designers significou e assim permitiu a marcação que estão incorretos (por exemplo, foobar renderizaria corretamente como ousado italia).

Isso fazia sentido até certo ponto, porque se um navegador continuasse reclamando de erros de sintaxe, enquanto outro comeu qualquer coisa que você jogou e cuspiu um resultado (mais ou menos), então as pessoas naturalmente se reuniriam com o último.

Enquanto muitos pensaram que as guerras do navegador haviam terminado, uma nova guerra entre os vendedores do navegador reacendeu nos últimos anos desde que o Chrome foi lançado, a Apple começou a crescer novamente e empurrar o Safari, e o IE perdeu seu domínio. (Você pode chamá -lo de "Guerra Fria" devido à cooperação e apoio percebidos dos padrões dos fornecedores do navegador.) Portanto, não é uma surpresa que mesmo os navegadores contemporâneos que supostamente Em conformidade, os padrões da Web realmente tentam ser "inteligentes" e permitir comportamentos de quebra de padrão como esse para tentar obter uma vantagem como antes.

Infelizmente, esse comportamento permissivo levou a um enorme (algum pode até dizer canceroso) crescimento de páginas da web mal marcadas. Como o IE era o navegador mais branda e popular e, devido ao contínuo flutuamento dos padrões da Microsoft, o IE se tornou famoso por incentivar e promover um design ruim e propagação e perpetuação de páginas quebradas.

Você pode se safar usando 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 se manter Padrões da Web Ao criar páginas e sites da Web para garantir que eles sejam exibidos corretamente e evite que sejam quebrados (possivelmente completamente ignorados) com uma atualização do navegador.

Question 17

Embora os navegadores geralmente relacionem o CSS com tags HTML, independentemente de serem válidas ou não, você deve absolutamente não fazer isso.

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

HTML é um idioma 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 a partir de rastreadores da web, como o Google.

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

Editar

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

Os vãos se referem a elementos que devem ser denominados diferentes do que o contexto em que estão atualmente e devem ser exibidos embutidos, não como um bloco. Um exemplo é se algumas palavras em uma frase precisam ser todas as capas.

As tags personalizadas não se correlacionam com nenhum padrão e, portanto, o span/div deve ser usado com as propriedades de classe/id.

Há muito isenções específicas para isso, como JS angular

Question 18

Embora o CSS tenha uma coisa chamada "Seletor de tags", ele realmente não sabe 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 como as coisas como "tags" e "atributos" correspondem.

Os navegadores geralmente aplicam CSS a tags desconhecidas no HTML, porque isso é considerado melhor do que quebrar completamente: pelo menos eles podem exibir algo. Mas isso é muito Más práticas para usar tags "falsas" deliberadamente. Um dos motivos para isso é que as novas tags são definidas de tempos em tempos e, se for definida, parece com a sua tag falsa, mas não funciona da mesma maneira, isso pode causar problemas com seu site em novos navegadores.

Question 19

Por que o CSS funciona com elementos falsos? Porque isso não machuca ninguém, porque você não deveria usá -lo 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 trabalham com o 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.