example - O<STYLE> precisa estar no<HEAD> de um documento HTML?




html text example (7)

Estritamente falando, as tags de style precisam estar dentro da head de um documento HTML? O padrão 4.01 implica isso, mas não é explicitamente declarado:

O elemento STYLE permite que os autores coloquem regras de folha de estilo no cabeçalho do documento. O HTML permite qualquer número de elementos STYLE na seção HEAD de um documento.

Digo "estritamente falando" porque tenho um aplicativo que coloca elementos de estilo dentro do corpo e todos os navegadores com os quais testei parecem usar os elementos de estilo. Eu só estou querendo saber se isso é legal.


A recomendação HTML5.2 W3C, de 14 de dezembro de 2017 (não o rascunho anterior mencionado acima) agora diz que você pode incluir <style> .

"No corpo, onde o conteúdo de fluxo é esperado." (seção 4.2.6)


Como as outras respostas, eles não precisam estar lá. No entanto, não será validado. Isso pode ou não importar neste caso, mas lembre-se de que a renderização de html é inteiramente feita pelos navegadores. Pelo que sei, todos os navegadores usados ​​de hoje suportarão colocá-lo fora da cabeça, mas você não pode garantir que, para os futuros navegadores e futuras versões do navegador.

Fique com o padrão e você está mais seguro. Quanto mais seguro é para muito debate.


De acordo com as mais recentes especificações WhatWG e W3C, sim, os elementos de style devem estar sempre na head . Por um tempo, as especificações incluíram um atributo com scoped para elementos de style que, quando presentes, permitiam que eles fossem colocados dentro de um elemento no corpo para estilizar apenas os descendentes desse elemento ... mas esse recurso nunca chegou a nenhum navegador real menos não sem precisar ser habilitado por meio de um sinalizador de desenvolvedor) e foi removido de ambas as especificações "devido à falta de interesse do implementador" . Consequentemente, os elementos de style agora só são permitidos em contextos que permitem conteúdo de metadados, que é apenas o cabeçalho.

(Ok, isso não é bem verdade - você pode colocar legalmente conteúdo de metadados, incluindo elementos de style , dentro de um elemento de template dentro do body , mas não terá efeito se você estiver em um navegador que suporte modelos. Isso é realmente apenas um tecnicidade boba.)

A especificação WhatWG tem isto para dizer:

4.2.6. O elemento de style

Categories :

Conteúdo de metadados .

Contextos nos quais este elemento pode ser usado :

Onde o conteúdo de metadados é esperado.
Em um elemento <noscript> que é filho de um elemento <head> .

CTRL-Fing através da especificação de página única revela que o único elemento cujo modelo de conteúdo inclui conteúdo de metadados é o elemento head .

Enquanto isso, a última especificação de rascunho do W3C contém palavras exatamente idênticas, exceto que elas também listam conteúdo de metadados no modelo de conteúdo de elementos de template . (O WhatWG conceitualiza os template diferente e lista seu modelo de conteúdo como nothing .)

O índice não normativo de elementos na especificação WhatWG confirma que os únicos pais permissíveis para um elemento de style são um elemento head ou noscript . (A versão W3 do mesmo índice afirma incorretamente que o conteúdo de fluxo pode conter elementos <style> , mas este é um erro introduzido pelo W3C na hora de remover o atributo com scoped . Eu tenho um pedido pull aberto para corrigi-lo.)


De acordo com este site, o HTML5.1 (em rascunho) e o WHATWG permitem que a tag <style> seja colocada no corpo:

http://www.html.am/tags/html-style-tag.cfm

Também parece ter sido suportado pelos navegadores por um bom tempo. De acordo com esta resposta do , o Firefox 3+, IE6 +, Safari 2+ e o Chrome 12+ suportam:

https://.com/a/10989663/297793


Enquanto as outras respostas estão corretas, fico surpreso que ninguém tenha explicado onde os padrões proíbem estilos fora da head .

Na verdade, está na seção The head Element (e no DTD ):

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

Sim eu conheço. DTDs são difíceis de ler.

Este é o único lugar onde o elemento STYLE ocorre, então implicitamente é inválido em outro lugar.


Uma tag de estilo em qualquer lugar, mas dentro do <head> , não será validada com as regras do W3C.


style deve ser incluído apenas no head do documento.

Além do ponto de validação, uma advertência que pode interessá-lo ao usar o style no body é o flash do conteúdo não-estilizado . O navegador obteria elementos que seriam estilizados após serem exibidos, fazendo com que eles mudassem de tamanho / forma / fonte e / ou piscar. Geralmente é um sinal de mau artesanato. Geralmente você pode se safar colocando o style onde quiser, mas tente evitá-lo sempre que for possível.

O HTML 5 introduziu um atributo com scoped que permitia que as tags de style fossem incluídas em todos os lugares do corpo, mas elas foram removidas novamente.





html-head