web-dev-qa-db-fra.com

balises de style et de script dans le corps HTML ... pourquoi pas?

[Ceci est lié à cette question , mais pas puisqu'il ne s'agit pas de courrier électronique.]

Dans de nombreux cas, en particulier lorsque vous travaillez avec un CMS ou le framework de quelqu'un d'autre, il est beaucoup plus facile d'incorporer <style> balises et <script> balises dans le <body> que dans le <head>. Cela semble fonctionner dans IE6, IE7 (Windows), Firefox 3.x et Safari (OS X).

Strictement parlant, est-ce faux? Et si c'est le cas, quelles conséquences négatives cela pourrait-il causer ... à part d'être complètement ignoré par certains clients?

Remarque: Content que tout le monde veuille parler de DRY et des styles centralisés. Imaginez une seconde que je veux utiliser le style balises dans un document car elles NE SONT PAS MONDIALES et que JE N'AI PAS ACCÈS À LA HEAD SUR UNE BASE PAR PAGE. Pour une raison quelconque, que le site diffère sur une page par -page base, ou par paragraphe ou quoi que ce soit. Je ne suis pas intéressé par le fait qu'il soit difficile de retrouver et de changer. Je m'inquiète des conséquences possibles de l'utilisation du style dans le corps.

Vous centralisez les choses qui sont centrales. Tout le reste est gonflé dans les feuilles de style centrales.

htmlsyntax
45
Dan Rosenstark

Bien que les spécifications indiquent explicitement que les balises de style ne sont pas autorisées dans la balise body, les spécifications ne sont pas tout ce qui compte. Les balises de style sont prises en charge dans le corps par tous les principaux navigateurs, et c'est finalement la façon dont les utilisateurs voient votre site. * Bien qu'il existe depuis longtemps une volonté d'améliorer les normes et la prise en charge des normes dans l'industrie des navigateurs, il existe également depuis longtemps une poussée générale pour le rendu cassé. documents aussi bien que possible.

Google, qui dirige l'effort de spécification HTML5, gère simultanément google.com qui viole les spécifications pour économiser des octets, en laissant les guillemets hors de ses valeurs d'attribut, en utilisant des sélections de piratage par rapport à la spécification CSS, y compris des balises de script sans type ni langue, et un lien balises sans type. Un puriste pourrait affirmer que l'un des sites les plus utilisés sur Internet viole les spécifications et risque sérieusement d'être horriblement mal rendu. Ou, nous pouvons penser qu'aucun navigateur n'entrera dans une utilisation populaire qui ne peut pas rendre des hacks aussi largement utilisés sur la spécification.

Donc, la question est de savoir dans quelle direction va l'industrie du navigateur - qui est encore une fois l'une des deux meilleures spécifications, mais qui fait également de son mieux pour respecter l'intention des pages qui violent ces spécifications. Je parie que les balises de style continueront de fonctionner dans le corps pendant longtemps.

* À ce jour, les balises de style dans le corps sont prises en charge avec un doctype HTML5 dans Firefox 3+, IE6 +, Safari 2+, Chrome 12+. La prise en charge remonte probablement plus loin, mais ces navigateurs sont rarement vu sur les interwebs.

27
Chris Moschini

Les contextes dans lesquels le <script> et <style> les balises pouvant être utilisées dépendent du doctype que vous utilisez. Par exemple, je suppose que vous utilisez le doctype HTML5:

<!DOCTYPE html>

balise de script a trois contextes sous le doctype HTML5:

  1. Où contenu de métadonnées est attendu.
  2. Où contenu phrasé est attendu.
  3. Où éléments supportant le script sont attendus.

Le style tag a une structure de contexte légèrement plus compliquée sous le doctype HTML5:

  1. Si attribut de portée est absent: où contenu de métadonnées est attendu.
  2. Si attribut de portée est absent: dans un élément noscript qui est un enfant d'un élément head .
  3. Si attribut de portée est présent: où contenu de flux est attendu, mais avant tout autre contenu de flux autre que les espaces blancs et les éléments de style inter-éléments, et non en tant qu'enfant d'un élément dont le modèle de contenu est transparent.

Essentiellement, cela indique que vous pouvez placer la balise de style et la balise de script dans le corps, car le corps est l'endroit où nous plaçons le contenu de flux et le contenu de phrasé.

Comme toujours, consultez les spécifications du doctype que vous utilisez.

16
Sampson

La réponse courte:

La réponse détaillée:

STYLE est défini comme étant head.misc :

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

Et les éléments de head.misc ne peuvent être que des enfants de l'élément HEAD. Ainsi, STYLE ne peut être enfant que de l'élément HEAD.

SCRIPT est défini pour être dans head.misc et dans spécial :

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

Et spécial est défini comme étant en ligne :

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

De plus, SCRIPT peut également être enfant de l'élément BODY. Donc SCRIPT est autorisé dans l'élément HEAD nad partout où en ligne est autorisé.

10
Gumbo

Deux réponses possibles pour le style dans le corps:

  1. Utilisez un style en ligne. Certes, vous perdrez les avantages du style interne et externe, mais si vous n'avez pas accès à l'en-tête, vous n'avez pas accès à l'en-tête.

  2. Utilisez l'attribut délimité dans l'élément de style. C'est nouveau pour HTML5, mais l'idée est de limiter la portée du CSS à une partie d'une page, par exemple à une seule div. La mauvaise nouvelle est qu'il n'est pas encore pris en charge (en juillet 2011), ni rétrocompatible. Mais il y a (prétendument) un plugin JQuery qui peut vous aider. Pour plus d'informations:

3
james.garriss

Eh bien, vous avez le problème d'incorporer directement des styles et des scripts dans votre contenu. Le mantra principal ici est le principe DRY (Don't Repeat Yourself). Vous pouvez utiliser un script ou un style particulier à plusieurs endroits. Lorsque ce style ou script doit être modifié, vous pouvez maintenant y aller sur une chasse au trésor pour tous les endroits où ce code existe. Garder vos styles et scripts dans un endroit commun est idéal.

D'un autre côté, s'il s'agit d'un problème de style mineur (poussée de pixels ou quelque chose lié à cette seule vue), c'est probablement correct.

2
Doctor Blue

Mais pourquoi auriez-vous style- balises dans le corps? Les styles sont de toute façon globaux, donc je ne trouve aucune raison logique de le faire.

Pour simplifier et séparer encore plus les choses, vous devez également utiliser des feuilles de style externes.

Les scripts sont autorisés et sont là pour une raison: ils peuvent donner une sortie, ils doivent être exécutés à des moments spécifiques et pour d'autres raisons.

1
Arve Systad

Le plus gros problème, à mon avis, est la commodité. Si vous souhaitez modifier le style d'une page, il est beaucoup plus facile de le faire si toutes les informations de style et de script se trouvent dans une seule zone. Il est possible que les informations de style/script soient dans un <style> nœud, dans l'attribut style d'un nœud (c'est-à-dire <body style='...'>) ou dans un fichier externe (c'est-à-dire <link rel='stylesheet' type='text/css' href='style.css' />). Il est beaucoup plus facile d'utiliser un emplacement cohérent que d'essayer de traquer tous les endroits où un style pourrait se produire.

Il convient également de noter que dire "en plus d'être complètement ignoré par certains clients" revient à dire "à part exploser lorsque vous le frappez par derrière" ou "à part voler hors de la trajectoire et atterrir dans un quartier civil". C'est un problème suffisamment grave en soi pour justifier l'utilisation de la pratique standard.

0
Imagist