Risposte:
Solo per aggiungere ciò che jdelStrother ha menzionato sulle specifiche di w3 e ARTstudio sul rendering del browser.
Si consiglia perché quando hai dichiarato il CSS prima dell'inizio <body>, i tuoi stili sono già stati caricati. Molto rapidamente gli utenti vedono apparire qualcosa sul loro schermo (ad esempio i colori di sfondo). In caso contrario, gli utenti visualizzano lo schermo vuoto per qualche tempo prima che il CSS raggiunga l'utente.
Inoltre, se si lasciano gli stili da qualche parte in <body>, il browser deve eseguire nuovamente il rendering della pagina (nuova e vecchia durante il caricamento) quando gli stili dichiarati sono stati analizzati.
linke stylenon devono apparire nel corpo a meno che non siano o con ambito (stile) o senza l'attributo itemprop(collegamento) dichiarato.
styleè un elemento di flusso in html5 e html4.1 (anche se non è mirato) e può essere inserito nel corpo.
scopedattributo è stato obsoleto.
Le versioni più recenti delle specifiche HTML ora consentono il <style>tag all'interno degli elementi del corpo. https://www.w3.org/TR/html5/dom.html#flow-content
Anche l' scopedattributo che era un prerequisito per avere un styletag nelbody è ora obsoleto.
Questo significa che puoi usare il style tag ovunque si desideri, le uniche implicazioni sono la riduzione delle prestazioni della pagina a causa di possibili ridisposizioni / ridisegni una volta che il browser ha colpito gli stili più in basso nella struttura della pagina.
Risposta obsoleta:
Il <style>tag non è consentito all'interno <body>secondo le specifiche di w3. (Ovviamente puoi applicare gli stili in linea tramite <div style="color:red">se necessario, ma è generalmente considerata una scarsa separazione di stile e contenuto)
<style>è un elemento di flusso in HTML 5 e 4.1 e può essere inserito nel corpo (come tutti gli altri elementi di flusso).
Mettere CSS nel corpo significa che verrà caricato in seguito. È una tecnica che alcuni usano per consentire al browser di iniziare a disegnare l'interfaccia più velocemente (ad esempio, rimuove una fase di blocco). Questo è importante per l'esperienza dell'utente su SmartPhones.
Faccio del mio meglio per tenere un piccolo css sul <head>e muovo il resto in fondo. Ad esempio, se una pagina utilizza CSS dell'interfaccia utente di JQuery, la sposto sempre nella parte inferiore di <body>, appena prima dei collegamenti a jQuascript di JQuery. Almeno, tutti gli oggetti non Jquery possono già essere disegnati.
Head è progettato per (Citando il W3C):
"informazioni sul documento corrente, come titolo, parole chiave che possono essere utili ai motori di ricerca e altri dati che non sono considerati contenuto del documento "
Vedi la struttura globale di un documento HTML . Poiché il CSS non è contenuto del documento, dovrebbe essere nella testa.
Inoltre, ogni altro sviluppatore Web si aspetterà di vederlo lì, quindi non confondere le cose mettendolo nel corpo, anche se funziona!
L'unico CSS che dovresti inserire nel corpo è il CSS incorporato , sebbene di solito evito gli stili incorporati.
Gli standard ( HTML 4.01: l'elemento style ) specificano chiaramente che il tag style è consentito solo all'interno del tag head. Se inserisci tag di stile nel tag body, i browser cercheranno comunque di sfruttarlo al meglio, se possibile.
È possibile che un browser ignori un tag di stile nel corpo se si specifica un tipo di documento rigoroso. Non so se un browser attuale lo faccia, ma non farei affidamento su tutte le versioni future per essere così rilassato su dove collochi l'elemento di stile.
styletag sono consentiti nel corpo se hanno un scopedattributo.
Sebbene il styletag non sia consentito nel corpo, il linktag è, quindi finché fai riferimento a un foglio di stile esterno, tutti i browser dovrebbero rendering e utilizzare correttamente il CSS quando vengono utilizzati in body.
Fonte: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
Oltre alle risposte precedenti, anche se mettere un blocco di codice di stile all'interno dell'elemento può funzionare nei browser moderni (anche se ciò non lo rende ancora corretto), c'è sempre un pericolo, in particolare con i browser più vecchi che il browser renderà il codice come testo a meno che la sezione di stile non sia inclusa in una sezione CDATA.
Naturalmente l'altra cosa nel metterlo all'interno dell'elemento, oltre agli stili inline, è che poiché non soddisfa le specifiche HTML / XHTML del W3C è che qualsiasi pagina con esso all'interno del corpo fallirà sul validatore del W3C. È sempre più facile cercare bug inaspettati problemi di visualizzazione se tutto il codice è valido, rendendo più facile individuare errori. Un elemento HTML non valido può influire negativamente sul rendering di qualsiasi elemento oltre a quello in cui si trova nel codice, quindi puoi ottenere effetti inaspettati con elementi in punti in cui non dovrebbero essere, perché quando un browser trova un elemento non valido, semplicemente fa la migliore ipotesi su come dovrebbe visualizzarlo e diversi browser possono prendere decisioni diverse su come renderlo.
Se si utilizza un doctype di transizione o rigoroso, sarebbe comunque non valido in base alle specifiche (X) HTML.
In realtà, potresti sconfiggere lo scopo dell'uso dei CSS inserendo gli stili nel corpo. Il punto sarebbe quello di separare il contenuto dalla presentazione (e dalla funzione). In questo modo, è possibile apportare qualsiasi modifica allo stile nel foglio di stile, non nel contenuto. Dopo aver utilizzato il metodo di stile in linea, ogni pagina che ha uno stile in linea deve essere cambiata una alla volta. Noioso e rischioso poiché potresti perdere una pagina o tre o dieci.
Usando un foglio di stile, devi solo cambiare il foglio di stile; le modifiche si propagano automagicamente a ogni pagina HTML collegata al foglio di stile.
il punto di neonble è anche un'altra grande ragione; se sbagli l'HTML aggiungendo CSS inline, il rendering diventa un problema. HTML non genera eccezioni al tuo codice. Invece si spegne e lo rende nel miglior modo possibile, e va avanti.
L'adesione agli standard Web mediante l'utilizzo di un foglio di stile consente di creare un sito Web migliore. E quando hai bisogno di aiuto perché le cose sulla tua pagina non sono esattamente come le desideri, posizionare il tuo CSS in testa rispetto al corpo consente una risoluzione dei problemi molto migliore da solo e per chiunque tu chieda aiuto.
Due risposte contrastanti:
Dalla pagina MDN sul tag link:
Un
<link>elemento può essere presente nell'elemento<head>o<body>, a seconda che abbia un tipo di collegamento che sia body-ok. Ad esempio, il tipo di collegamento al foglio di stile è body-ok, e quindi a<link rel="stylesheet">è consentito nel corpo. Questa non è tuttavia la migliore pratica; ha più senso separare i tuoi<link>elementi dal contenuto del tuo corpo, mettendoli in testa.
Da CSS The Definitive Guide (4th Edition / 2017) pagina 10
Per caricare correttamente un foglio di stile esterno, il collegamento deve essere posizionato all'interno dell'elemento head ma non può essere inserito in nessun altro elemento.
Che differenza farà?
Pro: A volte è più facile applicare determinati attributi in determinati luoghi, specialmente se il codice viene generato al volo (come la costruzione tramite php e ognuno di un elenco di dimensioni dinamiche necessita della propria classe ... come per i tempi degli oggetti per le trasformazioni).
Contro: leggermente più lento, potrebbe non funzionare un giorno in un lontano futuro.
La mia opinione generale su di esso: non farlo se non è necessario, ma se è necessario, non perdere alcun sonno su di esso.
Mettere il <style>nel corpo funziona bene con tutti i browser moderni.
Lo stavo usando su eBay.
Se funziona, non calciarlo.