Normalmente, os arquivos css são colocados dentro <head></head>, e se eu o colocar dentro <body></body>, que diferença fará?
155
Apenas para adicionar o que o jdelStrother mencionou sobre as especificações do w3 e o ARTstudio sobre a renderização do navegador.
É recomendado porque quando você tiver o CSS declarado antes <body> início, seus estilos já foram carregados. Muito rapidamente, os usuários veem algo aparecer na tela (por exemplo, cores de fundo). Caso contrário, os usuários verão a tela em branco por algum tempo antes que o CSS chegue ao usuário.
Além disso, se você deixar os estilos em algum lugar no <body>, o navegador precisará renderizar novamente a página (nova e antiga ao carregar) quando os estilos declarados tiverem sido analisados.
linkestylenão devem aparecer no corpo, a menos que tenham escopo (estilo) ou tenham o atributoitemprop(link) declarado.styleé um elemento de fluxo em html5 e html4.1 (mesmo que não esteja no escopo) e pode ser colocado no corpo.scopedatributo foi obsoleto.As versões mais recentes da especificação HTML agora permitem a
<style>marca nos elementos do corpo. https://www.w3.org/TR/html5/dom.html#flow-content Além disso, oscopedatributo que costumava ser um pré-requisito para ter umastyletag nobodyagora está obsoleto.Isso significa que, como você pode usar a
styletag em qualquer lugar que desejar, as únicas implicações são a diminuição do desempenho da página devido a possíveis refluxos / alterações quando o navegador atinge os estilos mais abaixo na árvore de páginas.Resposta obsoleta:
A
<style>tag não é permitida de<body>acordo com as especificações do w3. (É claro que você pode aplicar estilos embutidos via,<div style="color:red">se necessário, mas geralmente é considerado uma separação inadequada entre estilo e conteúdo)fonte
<style>é um elemento de fluxo nos html 5 e 4.1 e pode ser colocado no corpo (como todos os outros elementos de fluxo).Colocar CSS no corpo significa que ele é carregado mais tarde. É uma técnica que alguns usam para permitir que o navegador comece a desenhar a interface mais rapidamente (isto é, remove uma etapa de bloqueio). Isso é importante para a experiência do usuário em SmartPhones.
Eu faço o meu melhor para manter um css pequeno no
<head>e movo o resto na parte inferior. Por exemplo, se uma página usa CSS da interface do usuário do JQuery, eu sempre a movo na parte inferior da página<body>, imediatamente antes dos links para o javascript do JQuery. Pelo menos, todo o item que não é Jquery já pode ser desenhado.fonte
A cabeça foi projetada para (Citar o W3C):
Veja a estrutura global de um documento HTML . Como o CSS não é um conteúdo de documento, ele deve estar na cabeça.
Além disso, todos os outros desenvolvedores da Web esperam vê-lo lá; portanto, não confunda as coisas colocando-o no corpo, mesmo que funcione!
O único CSS que você deve colocar no corpo é CSS embutido , embora eu geralmente evite estilos embutidos.
fonte
Os padrões ( HTML 4.01: o elemento style ) especificam claramente que a tag style é permitida apenas dentro da tag head. Se você colocar tags de estilo na tag body, os navegadores tentarão tirar o melhor proveito de qualquer maneira, se possível.
É possível que um navegador ignore uma marca de estilo no corpo se você especificar um tipo de documento estrito. Não sei se algum navegador atual faz isso, mas não contaria com todas as versões futuras tão relaxadas sobre onde você coloca o elemento de estilo.
fonte
styletags são permitidas no corpo se tiverem umscopedatributo.Embora a
styletag não seja permitida no corpo, elalinké, desde que você esteja fazendo referência a uma folha de estilo externa, todos os navegadores devem renderizar e usar o CSS corretamente quando usados nobody.Fonte: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
fonte
Além das respostas anteriores, embora colocar um bloco de código de estilo dentro do elemento possa funcionar em navegadores modernos (embora isso ainda não o conserte), sempre há um perigo, principalmente nos navegadores mais antigos, de que o navegador renderize o código como texto a menos que a seção de estilo esteja incluída em uma seção CDATA.
É claro que a outra coisa ao colocá-lo dentro do elemento, além dos estilos embutidos, é que, como não atende às especificações HTML / XHTML do W3C, qualquer página com ele dentro do corpo falhará no validador do W3C. É sempre mais fácil caçar problemas de exibição inesperados se todo o seu código for válido, facilitando a detecção de erros. Um elemento HTML inválido pode afetar adversamente a renderização de todo e qualquer elemento além do local em que ocorre no código, para que você possa obter efeitos inesperados tendo elementos em locais onde não deveriam estar, porque quando um navegador encontra um elemento inválido, ele apenas faz com que seja melhor adivinhar como deve exibi-lo e navegadores diferentes podem tomar decisões diferentes na maneira como o renderizam.
Se você usa um tipo de documento de transição ou estrito, ele ainda é inválido de acordo com as especificações (X) HTML.
fonte
Você realmente derrotaria o propósito de usar CSS colocando os estilos no corpo. O objetivo seria separar o conteúdo da apresentação (e função). Dessa forma, qualquer alteração no estilo pode ser feita na folha de estilo, não no conteúdo. Depois de usar o método de estilo embutido, todas as páginas com estilo embutido precisam ser alteradas uma a uma. Tedioso e arriscado, pois você pode perder uma página ou três ou dez.
Usando uma folha de estilo, você só precisa alterar a folha de estilo; as alterações se propagam automaticamente para todas as páginas HTML vinculadas à folha de estilo.
o argumento de neonble também é outro grande motivo; se você estragar o HTML adicionando CSS embutido, a renderização se tornará um problema. O HTML não gera exceções ao seu código. Em vez disso, ele sai e o processa da melhor maneira possível, e segue em frente.
A adesão aos padrões da web usando uma folha de estilo cria um site melhor. E quando você precisar de ajuda, porque as coisas na sua página não são exatamente da maneira que você deseja, colocar o CSS na cabeça, em vez do corpo, cria uma solução de problemas muito melhor para você e para qualquer pessoa de quem você pedir ajuda.
fonte
Duas respostas conflitantes:
Da página MDN na tag do link:
Do CSS The Definitive Guide (4a Edição / 2017) página 10
fonte
A diferença é O carregamento da página é assíncrono; portanto, se você tiver uma folha de estilo externa, ela carregará o arquivo css imediatamente quando atingir a tag do link, por isso é bom ter a parte superior na cabeça.
fonte
Que diferença isso fará?
Prós: Às vezes, é mais fácil aplicar certos atributos em determinados lugares, especialmente se o código está sendo gerado em tempo real (como construir via php e cada uma de uma lista de tamanho dinâmico precisar de sua própria classe ... como para temporizações de itens para transformações).
Contras: um pouco mais lento, pode não funcionar um dia em um futuro distante.
Minha opinião geral sobre o assunto: não faça isso, você não precisa, mas se precisar, não perca o sono por causa disso.
fonte
Colocar o
<style>no corpo funciona bem com todos os navegadores modernos.Eu estava usando isso no eBay.
Se funcionar, não chute.
fonte