Réponses:
Juste pour ajouter à ce que jdelStrother a mentionné à propos des spécifications w3 et ARTstudio sur le rendu du navigateur.
Il est recommandé car lorsque vous avez déclaré le CSS avant le <body>démarrage, vos styles sont déjà chargés. Les utilisateurs voient donc très rapidement quelque chose apparaître sur leur écran (par exemple les couleurs de fond). Sinon, les utilisateurs voient un écran vide pendant un certain temps avant que le CSS n'atteigne l'utilisateur.
De plus, si vous laissez les styles quelque part dans le <body>, le navigateur doit rendre à nouveau la page (nouvelle et ancienne lors du chargement) lorsque les styles déclarés ont été analysés.
linket stylene doivent pas apparaître dans le corps à moins qu'ils ne soient définis (style) ou que l'attribut itemprop(lien) ne soit déclaré.
styleest un élément de flux en html5 et html4.1 (même s'il n'est pas cadré) et peut être mis dans le corps.
scopedattribut est devenu obsolète.
Les versions les plus récentes de la spécification HTML autorisent désormais la <style>balise dans les éléments du corps. https://www.w3.org/TR/html5/dom.html#flow-content
De plus, l' scopedattribut qui était autrefois prérequis pour avoir une stylebalise dans le bodyest maintenant obsolète.
Cela signifie que vous pouvez utiliser la stylebalise partout où vous le souhaitez, les seules implications sont une diminution des performances de la page en raison de possibles reflux / repeints une fois que le navigateur atteint les styles plus bas dans l'arborescence de la page.
Réponse obsolète:
La <style>balise n'est pas autorisée <body>selon les spécifications w3. (Vous pouvez, bien sûr, appliquer des styles en ligne via <div style="color:red">si nécessaire, mais il est généralement considéré comme une mauvaise séparation du style et du contenu)
<style>c'est un élément de flux dans html 5 et 4.1 et peut être mis dans le corps (comme tous les autres éléments de flux).
Mettre CSS dans le corps signifie qu'il est chargé plus tard. C'est une technique que l'on utilise pour permettre au navigateur de commencer à dessiner l'interface plus rapidement (c'est-à-dire qu'elle supprime une étape de blocage). Ceci est important pour l'expérience utilisateur sur les SmartPhones.
Je fais de mon mieux pour garder un petit css sur le <head>et je déplace le reste en bas. Par exemple, si une page utilise JQuery UI CSS, je la déplace toujours en bas de <body>, juste avant les liens vers JQuery javascript. Au moins, tous les éléments non Jquery peuvent déjà être dessinés.
Head est conçu pour (citant le W3C):
"des informations sur le document actuel, telles que son titre, des mots clés pouvant être utiles aux moteurs de recherche et d'autres données qui ne sont pas considérées comme du contenu du document "
Voir la structure globale d'un document HTML . Comme CSS n'est pas un contenu de document, il devrait être dans la tête.
De plus, tous les autres développeurs Web s'attendront à le voir là-bas, alors ne confondez pas les choses en le mettant dans le corps, même si cela fonctionne!
Le seul CSS que vous devriez mettre dans le corps est le CSS en ligne , bien que j'évite généralement les styles en ligne.
Les standards ( HTML 4.01: l'élément style ) spécifient clairement que la balise style n'est autorisée qu'à l'intérieur de la balise head. Si vous mettez des balises de style dans la balise body, les navigateurs essaieront d'en tirer le meilleur parti de toute façon, si possible.
Il est possible qu'un navigateur ignore une balise de style dans le corps si vous spécifiez un type de document strict. Je ne sais pas si un navigateur actuel fait cela, mais je ne compterais pas sur toutes les versions futures pour être aussi détendues sur l'endroit où vous placez l'élément de style.
stylebalises sont autorisées dans le corps si elles ont un scopedattribut.
Bien que la stylebalise ne soit pas autorisée dans le corps, la linkbalise l'est, donc tant que vous faites référence à une feuille de style externe, tous les navigateurs doivent afficher et utiliser correctement le CSS lorsqu'il est utilisé dans le body.
Source: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
En plus des réponses précédentes, bien que mettre un bloc de code de style à l'intérieur de l'élément puisse fonctionner dans les navigateurs modernes (bien que cela ne règle toujours pas les choses), il y a toujours un danger, en particulier avec les navigateurs plus anciens, que le navigateur rende le code sous forme de texte sauf si la section de style est incluse dans une section CDATA.
Bien sûr, l'autre chose en le plaçant à l'intérieur de l'élément, autre que les styles en ligne, est que, comme il ne répond pas aux spécifications HTML / XHTML du W3C, toute page qui le contient dans le corps échouera sur le validateur W3C. Il est toujours plus facile de rechercher des problèmes d'affichage inattendus si tout votre code est valide, ce qui facilite la détection des erreurs. Un élément HTML non valide peut nuire au rendu de tout élément au-delà de l'endroit où il se produit dans le code, vous pouvez donc obtenir des effets inattendus ayant des éléments à des endroits où ils ne devraient pas être, car lorsqu'un navigateur trouve un élément non valide, il permet de deviner au mieux comment il doit l'afficher, et différents navigateurs peuvent prendre des décisions différentes quant à la façon dont ils le rendent.
Que vous utilisiez un doctype transitoire ou strict, il serait toujours invalide selon les spécifications (X) HTML.
Vous iriez en fait à l'encontre de l'objectif de l'utilisation de CSS en plaçant les styles dans le corps. Le but serait de séparer le contenu de la présentation (et de la fonction). De cette façon, toutes les modifications de style peuvent être effectuées dans la feuille de style, pas dans le contenu. Une fois que vous utilisez la méthode de style en ligne, chaque page qui a un style en ligne doit être modifiée une par une. Fastidieux et risqué car vous pourriez manquer une page ou trois ou dix.
En utilisant une feuille de style, il vous suffit de changer la feuille de style; les modifications se propagent automatiquement à chaque page HTML qui renvoie à la feuille de style.
Le point de neonble est également une autre grande raison; si vous gâchez le HTML en ajoutant du CSS en ligne, le rendu devient un problème. Le HTML ne lève pas d'exceptions à votre code. Au lieu de cela, il sort et le rend de la meilleure façon possible, et passe à autre chose.
Adhérer aux normes Web en utilisant une feuille de style permet un meilleur site Web. Et lorsque vous avez besoin d'aide parce que les éléments de votre page ne sont pas exactement comme vous le souhaitez, placer votre CSS dans la tête plutôt que dans le corps permet un meilleur dépannage par vous-même et pour toute personne à qui vous demandez de l'aide.
Deux réponses contradictoires:
De la page MDN sur la balise de lien:
Un
<link>élément peut apparaître dans l' élément<head>ou<body>, selon qu'il a un type de lien body-ok. Par exemple, le type de lien de feuille de style est body-ok, et par conséquent a<link rel="stylesheet">est autorisé dans le corps. Ce n'est cependant pas la meilleure pratique; il est plus logique de séparer vos<link>éléments du contenu de votre corps, en les mettant dans votre tête.
Tiré de CSS The Definitive Guide (4e édition / 2017) page 10
Pour charger correctement une feuille de style externe, le lien doit être placé à l'intérieur de l'élément head mais ne peut être placé dans aucun autre élément.
Quelle différence cela fera-t-il?
Avantages: Parfois, il est plus facile d'appliquer certains attributs à certains endroits, en particulier si le code est généré à la volée (comme la construction via php et chaque liste de taille dynamique a besoin de sa propre classe ... comme pour les horaires des éléments pour les transformations).
Inconvénients: légèrement plus lent, peut ne pas fonctionner un jour dans un avenir lointain.
Mon opinion générale à ce sujet: ne le faites pas, vous n'êtes pas obligé, mais si vous le devez, ne perdez pas le sommeil.
Mettre le <style>dans le corps fonctionne bien avec tous les navigateurs modernes.
J'avais utilisé ceci sur eBay.
Si cela fonctionne, ne le frappez pas.