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

136

A rigor, as styletags precisam estar dentro headde 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 estilos no cabeçalho do documento. O HTML permite qualquer número de elementos STYLE na seção HEAD de um documento.

Digo "estritamente" 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. Só estou me perguntando se isso é realmente legal.

html coding-style html-head eaolson
fonte
1
Se você estiver em dúvida, a marcação validador do W3C sempre ajuda :) http://validator.w3.org/
Lazlo
Uma exceção à regra 'colocar <estilo> em <head>' é o email html, pois muitos serviços de webmail simplesmente eliminam qualquer elemento principal, o que significa que seus estilos desapareceram.
precisa saber é o seguinte
1
As especificações exigem navegadores para apoio stylena body, de modo que é bom o suficiente para mim, independentemente do que está implícito nas seções autor das diretrizes.
WraithKenny

Respostas:

104

styledeve ser incluído apenas no headdocumento.

Além do ponto de validação, uma ressalva que pode lhe interessar ao usar style o bodyé o lampejo de conteúdo sem estilo . O navegador obteria elementos que seriam estilizados após serem exibidos, alterando o tamanho / forma / fonte e / ou tremulação. Geralmente é um sinal de artesanato ruim. Geralmente você pode se safar de colocar styleonde quiser, mas tente evitá-lo sempre que possível.

O HTML 5 introduziu um scopedatributo que permitiastyle a inclusão de tags em todo o corpo, mas depois o removeram novamente.

Esteban Küber
fonte
6
Até a data em que parece que apenas o Firefox suporta o scopedatributo, consulte caniuse.com/#feat=style-scoped .
Jaime Hablutzel
2
O artigo vinculado desapareceu na lista de links, então aqui está a última versão arquivada disponível: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/…
Zachary Murray
@ZacharyMurray obrigado pelo aviso! Atualizei o link no corpo para o arquivo da web.
Esteban Küber
1
A especificação requer que os navegadores em conformidade suportem as styletags body, portanto, apesar da parte de autor da especificação, considero os estilos de corpo válidos. github.com/whatwg/html/issues/1605#issuecomment-235961103
WraithKenny
19

Resposta curta

  • De acordo com a especificação atual, sim, os styleelementos devem sempre estar no head. Não há exceções (exceto um styleelemento dentro de um templateelemento , se você quiser contar isso).

  • Esse nem sempre foi o caso historicamente. Se você se preocupa com os detalhes das especificações e seu histórico, continue lendo.

  • Não importa o que a especificação diz, usando styleelementos no body faz mais ou menos trabalho em todos os principais navegadores. No entanto, é considerada uma má prática, tanto por violar especificações quanto por causar conseqüências indesejáveis, como pior desempenho de renderização ou um "flash de conteúdo não estilizado".

Histórico de especificações

styleelementos não existiam no HTML 2 . Eles foram introduzidos no HTML 3.0, onde foram incluídos na lista de elementos que poderiam ser incluídos no The Head Element , mas não incluídos na lista de elementos que poderiam estar presentes no The Body Element . Assim, no momento em que o elemento foi especificado pela primeira vez, ele só pôde ser incluído no head.

Este permaneceu o caso (embora expresso usando palavras diferentes) até o HTML 5, que introduziu o scopedatributo (desde que removido) para os styleelementos. Esse atributo, quando presente, tinha como objetivo permitir que um styleelemento fosse colocado dentro de um elemento no corpo para estilizar apenas os descendentes desse elemento. No entanto, esse recurso nunca chegou a nenhum navegador real (pelo menos não sem a necessidade de ser ativado por um sinalizador de desenvolvedor) e foi removido das especificações do W3C e do WhatWG "devido à falta de interesse do implementador" . Depois disso,style elementos foram permitidos apenas em contextos que permitem conteúdo de metadados, que é apenas o cabeçalho. Assim, voltamos às mesmas regras de antes do HTML 5.

No entanto, devido a um erro cometido pelas duas organizações de especificações, um índice não normativo de elementos incluídos como apêndice nas duas especificações não foi atualizado adequadamente para refletir a remoção de scoped, tornando-o inconsistente com a especificação normativa. Eu apontei isso para o WhatWG e para o W3C e, ao fazê-lo, involuntariamente desencadeou eventos que fizeram com que as duas especificações divergissem.

A solução da WhatWG para a inconsistência entre a especificação normativa e o índice não normativo foi aceitar meu patch corrigindo o índice não normativo.

O W3C, por outro lado, rejeitou meu patch equivalente em vez de atualizar a especificação normativa para permitir o uso de styleelementos no body, enquanto ressalta isso com uma nota de que ele pode causar problemas e deve ser feito "com cuidado". O raciocínio por trás dessa mudança foi alinhar as especificações com o comportamento do navegador da vida real.

Portanto, a partir de março de 2017, a resposta oficial a essa pergunta dependia de qual organização de padrões você escolheu ouvir. Se você listou as especificações WhatWG (geralmente mais respeitadas), um styleelemento não era permitido na body. Se você listou as especificações do W3C, isso foi permitido, mas não recomendado.

Esse estado de coisas tolo foi encerrado (talvez como muitas outras inconsistências) com o tratado de paz de abril de 2019 entre o W3C e o WhatWG , que concordou que as especificações do WhatWG se tornariam o único verdadeiro padrão HTML vivo, com o W3C apenas liberando instantâneos como numerados Especificações HTML em vez de desenvolver uma especificação concorrente em paralelo. Assim, a mudança de 2017 para o fork do W3C que permitiu styleelementos nobody não faz mais parte de nenhuma especificação atual; é apenas uma curiosidade da história.

Então, hoje, precisamos apenas olhar para a especificação WhatWG para determinar o que é oficialmente permitido. Tem o seguinte a dizer:

4.2.6 O styleelemento

Categorias :

Conteúdo de metadados .

Contextos em que esse elemento pode ser usado :

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

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 headelemento.

O índice não normativo dos elementos que mencionei anteriormente, também confirma que os únicos pais permitidos para um styleelemento são a headou noscriptelemento.

Mark Amery
fonte
18

Enquanto as outras respostas estão corretas, estou surpreso que ninguém tenha explicado onde os padrões não permitem estilos fora dohead .

Na verdade, está na seção The headElement (e na 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 em que o STYLEelemento ocorre, então, implicitamente, é inválido em outro lugar.

user123444555621
fonte
6
Estou tão confuso.
Dav_i 20/05
1
Agora deve estar usando HTML5, que o IIRC não possui DTD. O que a especificação HTML5 diz é o que é ou não.
Jan Kyu Peblik
14

Eles não deveriam sair da cabeça, mas funcionam de qualquer maneira; embora você possa notar um piscar rápido. O site não deve validar com a tag de estilo fora da cabeça, mas isso realmente importa? Além disso, as tags de link também funcionam fora da cabeça, mesmo que não devam.

geowa4
fonte
5
Dizer "eles trabalham" é um pouco complicado. Na melhor das hipóteses, você pode dizer que a maioria dos navegadores atuais ainda renderiza os estilos, mas não há nada nesse erro que simplesmente "funcione". Não poderia funcionar em nenhuma versão futura de nenhum navegador e eles não estariam fazendo nada de errado.
213 Chuck
6
imo, estilos renderizados = obras; nada complicado. essa última frase precisa ser reescrita; Isso não faz sentido. Eu mencionei como não estava "certo" quando disse que não seria validado, então não devo entender o que você quis dizer com essa frase.
precisa saber é o seguinte
O problema é que, mesmo se eles são de estilo, você vai ter algum lampejo sobre o conteúdo quando essas styles chutar.
Esteban Kuber
2
a menos que o tag estilo é primeiro no corpo
geowa4
Não tente isto em casa.
TechNyquist
3

Como as outras respostas declararam, ele realmente não precisa estar lá. No entanto, não será validado. Isso pode ou não ter importância nesse caso, mas lembre-se de que a renderização de html depende inteiramente dos navegadores. Pelo que sei, todos os navegadores usados ​​hoje suportam colocá-lo fora da cabeça, mas você não pode garantir isso para os navegadores futuros e versões futuras do navegador.

Ficar com o padrão e você está mais seguro. Quão mais seguro é o debate.

Louis
fonte
3

A Recomendação W5C do HTML5.2, 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 do fluxo é esperado." (seção 4.2.6)

Anahata
fonte
Embora agora, W3C oficialmente estado que os WhatWG especificação obsoletes todas as especificações anteriores, eo WhatWG especificação não permite styleno body, por isso estamos de volta a esta sendo inequivocamente proibida. Veja minha resposta se você estiver interessado no caminho sinuoso que chegamos até aqui.
Mark Amery
2

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

womp
fonte
-1

Você pode usar a etiqueta de estilo dentro da seção da cabeça ou do corpo ou também fora da tag html (o HTML externo não é recomendado). Em projetos em tempo real, muitas vezes você pode ver que eles usam tags de estilo fora da tag html

Adarsh ​​Joshi
fonte