Réponse courte
Selon la spécification actuelle, oui, les styleéléments doivent toujours être dans le head. Il n'y a pas d'exceptions (sauf un styleélément à l'intérieur d'un templateélément , si vous voulez le compter).
Cela n'a pas toujours été le cas dans le passé. Si vous vous souciez des détails de la spécification et de son historique, continuez à lire.
Peu importe ce que dit la spécification, l'utilisation d' styleéléments dans le body fonctionne plus ou moins dans tous les principaux navigateurs. Cependant, elle est considérée comme une mauvaise pratique à la fois parce qu'elle enfreint les spécifications et parce qu'elle peut entraîner des conséquences indésirables telles que des performances de rendu moins bonnes ou un «flash de contenu non stylisé».
Historique des spécifications
styleles éléments n'existaient pas dans HTML 2 . Ils ont été introduits dans HTML 3.0, où ils ont été inclus dans la liste des éléments pouvant être inclus dans The Head Element , mais pas inclus dans la liste des éléments qui pourraient être présents dans The Body Element . Ainsi, au moment où l'élément a été spécifié pour la première fois, il ne pouvait être inclus que dans le fichier head.
Cela est resté le cas (bien qu'exprimé en utilisant un libellé différent) jusqu'à HTML 5, qui a introduit l' scopedattribut (supprimé depuis) pour les styleéléments. Cet attribut, lorsqu'il était présent, était destiné à permettre à un styleélément d'être placé dans un élément du corps pour styliser uniquement les descendants de cet élément. Cependant, cette fonctionnalité n'a jamais été intégrée à un navigateur réel (du moins pas sans avoir besoin d'être activée via un indicateur de développeur) et a été supprimée à la fois des spécifications du W3C et de WhatWG "en raison du manque d'intérêt de l'implémenteur" . Par la suite, les styleéléments n'étaient autorisés que dans des contextes qui autorisent le contenu de métadonnées, qui n'est que la tête. Nous sommes donc revenus aux mêmes règles qu'avant HTML 5.
Cependant, en raison d'une erreur commise par les deux organisations de spécification, un index non normatif des éléments inclus en annexe dans les deux spécifications n'a pas été correctement mis à jour pour refléter la suppression de scoped, le rendant incompatible avec la spécification normative. Je l'ai signalé à la fois au WhatWG et au W3C , et ce faisant, j'ai involontairement déclenché des événements qui ont provoqué une divergence entre les deux spécifications.
La solution de WhatWG à l'incohérence entre la spécification normative et l'index non normatif a été d' accepter mon patch corrigeant l'index non normatif.
Le W3C, d'un autre côté, a rejeté mon correctif équivalent en faveur de la mise à jour de la spécification normative pour permettre l'utilisation d' styleéléments dans le body, tout en mettant en garde cela avec une note que cela peut causer des problèmes et doit être fait "avec précaution". Le raisonnement derrière ce changement était d'aligner la spécification sur le comportement réel du navigateur.
Ainsi, à partir de mars 2017, il était vrai que la réponse officielle à cette question dépendait de l'organisme de normalisation que vous avez choisi d'écouter. Si vous avez répertorié la spécification WhatWG (généralement plus respectée), un styleélément n'était pas autorisé dans le body. Si vous avez répertorié les spécifications du W3C, cela était autorisé, mais pas recommandé.
Cet état de choses stupide a pris fin (peut-être comme beaucoup d'autres incohérences de ce genre) avec le traité de paix d'avril 2019 entre le W3C et WhatWG , qui a convenu que la spécification WhatWG deviendrait le seul véritable standard HTML vivant, le W3C ne faisant que publier des instantanés numérotés. Spécifications HTML au lieu de développer une spécification concurrente en parallèle. Ainsi, le changement de 2017 au fork du W3C qui permettait des styleéléments dans le bodyne fait plus partie d'aucune spécification actuelle; ce n'est qu'une curiosité de l'histoire.
Donc, aujourd'hui, il suffit de regarder les spécifications WhatWG pour déterminer ce qui est officiellement autorisé. Il a ceci à dire:
4.2.6. L' styleélément
Contenu des métadonnées .
Où le contenu des métadonnées est attendu.
Dans un <noscript>élément qui est un enfant d'un <head>élément.
CTRL-Fing à travers la spécification d'une seule page révèle que le seul élément dont le modèle de contenu inclut le contenu des métadonnées est l' headélément.
L' index non normatif des éléments dont j'ai parlé plus tôt confirme également que les seuls parents autorisés pour un styleélément sont un élément headou noscript.