<STYLE> doit-il être dans la <HEAD> d'un document HTML?

136

À proprement parler, les stylebalises doivent-elles se trouver à l'intérieur headd'un document HTML? La norme 4.01 implique cela, mais ce n'est pas explicitement indiqué:

L'élément STYLE permet aux auteurs de mettre des règles de feuille de style dans l'en-tête du document. HTML autorise n'importe quel nombre d'éléments STYLE dans la section HEAD d'un document.

Je dis «à proprement parler» parce que j'ai une application qui met des éléments de style dans le corps, et tous les navigateurs avec lesquels j'ai testé semblent utiliser les éléments de style. Je me demande simplement si c'est vraiment légal.

html coding-style html-head eaolson
la source
1
En cas de doute, le validateur de balisage du W3C aide toujours :) http://validator.w3.org/
Lazlo
Une exception à la règle «mettre <style> dans <head>» est le courrier électronique html, car de nombreux services de messagerie Web supprimeront simplement tous les éléments d'en-tête, ce qui signifie que vos styles ont disparu.
user132837
1
Les spécifications nécessitent que les navigateurs soient pris en charge styledans le body, donc c'est assez bon pour moi, indépendamment de ce qu'impliquent les sections des lignes directrices de l'auteur.
WraithKenny

Réponses:

104

styleest censé être inclus uniquement sur le headdu document.

Outre le point de validation, une mise en garde qui pourrait vous intéresser lors de l'utilisation stylesur le bodyest le flash du contenu sans style . Le navigateur obtiendrait des éléments qui seraient stylisés après leur affichage, les faisant changer de taille / forme / police et / ou scintillement. C'est généralement un signe de mauvais savoir-faire. En général, vous pouvez vous en sortir en rangeant styleoù vous le souhaitez, mais essayez de l'éviter chaque fois que cela est possible.

HTML 5 a introduit un scopedattribut qui permettait styled'inclure des balises partout dans le corps, mais ils l'ont à nouveau supprimé.

Esteban Küber
la source
6
À la date, il semble que seul Firefox prend en charge l' scopedattribut, voir caniuse.com/#feat=style-scoped .
Jaime Hablutzel
2
L'article lié a disparu dans le lien rot æther, voici donc la dernière version archivée disponible: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/…
Zachary Murray
@ZacharyMurray merci pour la tête! J'ai mis à jour le lien dans le corps vers l'archive Web.
Esteban Küber
1
La spécification exige que les navigateurs conformes prennent en charge les stylebalises dans le. bodyAinsi, malgré la partie auteur de la spécification, je considère que les styles de corps sont valides. github.com/whatwg/html/issues/1605#issuecomment-235961103
WraithKenny
19

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

Catégories :

Contenu des métadonnées .

Contextes dans lesquels cet élément peut être utilisé :

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.

Mark Amery
la source
18

Bien que les autres réponses soient correctes, je suis surpris que personne n'ait expliqué où les normes interdisent les styles en dehors de head.

C'est en fait dans la section sur The headElement (et dans la 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 -->

Oui je sais. Les DTD sont difficiles à lire.

C'est le seul endroit où l' STYLEélément se produit, donc implicitement, il est invalide ailleurs.

user123444555621
la source
6
Je suis tellement confus.
dav_i
1
Devrait utiliser HTML5 maintenant, dont l'IIRC n'a pas de DTD. Ce que la spécification HTML5 dit seule est ce qui est ou n'est pas.
Jan Kyu Peblik
14

Ils ne sont pas censés sortir de la tête, mais ils fonctionnent quand même; bien que vous remarquiez peut-être un scintillement rapide. Le site ne devrait pas valider avec la balise de style en dehors de la tête, mais est-ce vraiment important? De plus, les balises de lien fonctionnent également en dehors de la tête, même si elles ne sont pas censées le faire.

geowa4
la source
5
Dire «ils fonctionnent» est un peu délicat. Au mieux, vous pouvez dire que la plupart des navigateurs actuels afficheront toujours les styles, mais il n'y a rien dans cette erreur qui "fonctionne" par nature. Cela ne pourrait fonctionner dans aucune version future d'aucun navigateur et ils ne feraient rien de mal.
Chuck
6
imo, styles rendus = fonctionne; rien de compliqué. cette dernière phrase doit être réécrite; cela n'a aucun sens. J'ai mentionné comment ce n'était pas «juste» quand j'ai dit que cela ne validerait pas, donc je ne dois pas comprendre ce que vous vouliez dire par cette phrase.
geowa4
Le problème est que même s'ils sont stylés, vous aurez un peu de scintillement sur le contenu lorsque ceux-ci style
entrent
2
sauf si la balise de style est la première dans le corps
geowa4
N'essayez pas ca a la maison.
TechNyquist
3

Comme les autres réponses l'ont indiqué, il n'a pas besoin d'être là. Cependant, il ne validera pas. Cela peut ou non avoir une importance dans ce cas, mais gardez à l'esprit que le rendu du HTML dépend entièrement des navigateurs. D'après ce que je sais, tous les navigateurs utilisés d'aujourd'hui prendront en charge le mettre en dehors de la tête, mais vous ne pouvez pas le garantir pour les futurs navigateurs et les futures versions de navigateur.

Restez fidèle à la norme et vous êtes plus en sécurité. Combien plus sûr est à débattre.

Louis
la source
3

La recommandation HTML5.2 W3C du 14 décembre 2017 (et non le projet précédent mentionné ci-dessus) indique désormais que vous pouvez inclure <style>.

"Dans le corps, là où le contenu du flux est attendu." (section 4.2.6)

Anahata
la source
Bien que maintenant, le W3C d'Etat officiellement que les spécifications WhatWG Obsolètes tous les spécifications précédentes, et la spécification WhatWG ne permet pas stylela body, donc nous sommes de retour à celle - ci étant clairement interdit. Voir ma réponse si vous êtes intéressé par le chemin sinueux par lequel nous sommes arrivés ici.
Mark Amery
2

Une balise de style n'importe où sauf à l'intérieur du <head>ne sera pas validée avec les règles du W3C.

womp
la source
-1

Vous pouvez utiliser la balise de style à l'intérieur de la section head ou body ou également à l'extérieur de la balise html (le html à l'extérieur n'est pas recommandé). Dans les projets en temps réel, vous pouvez voir à plusieurs reprises qu'ils utilisent la balise de style à côté de la balise html

Adarsh ​​Joshi
la source