web-dev-qa-db-fra.com

Déclarez le style CSS en dehors de l'élément "HEAD" d'une page "HTML"?

mon cas d'utilisation est le suivant:

Je compose un page HTML en utilisant des parties qui sont fragments HTML valides mais pas des pages valides, comme Divs; ces éléments utilisent CSS pour gérer leur style.

Je voudrais permettre à chaque fragment d'être responsable de ses propres exigences de style et de ne pas s'appuyer sur les déclarations de feuilles de style dans le fragment principal (celui avec la balise "HTML").

Voici donc la question: existe-t-il un moyen (standard) d'ajouter du style CSS en dehors de l'élément HEAD (à l'exclusion du style en ligne via l'attribut "style") ?

Je suppose que je pourrais utiliser des cadres mais je préférerais éviter cette solution.

Merci d'avance pour votre aide.

MODIFICATION FINALE:

Merci aux propositions de zzzzBov , JMC Creative et moontear , et après quelques tests, voici la réponse:

  • utilisez JavaScript pour charger dynamiquement certaines feuilles de style CSS: HTML4/XHTML et compatible HTML5,
  • incorporer des éléments "style" directement à l'intérieur des fragments: non conforme avec HTML4/XHTML mais semble être largement supporté =, et est compatible HTML5.

Comme je dois prendre en charge les clients de messagerie, j'ai utilisé la deuxième solution qui est d'ailleurs plus simple.

Merci à tous pour votre intérêt et votre participation.

htmlcsstemplatestemplate-engine
57
Pragmateek

tl; dr:

Si vous n'êtes pas à l'aise avec les fonctionnalités HTML qui n'ont pas atteint un niveau de maturité de recommandation W3C , il n'y a pas de moyen standard d'ajouter <style> au <body> d'une page.

Si vous êtes à l'aise avec des fonctionnalités moins matures, HTML5.2 semble standardiser <style> éléments à autoriser partout où un contenu de flux est attendu (c'est-à-dire <body> et la plupart de ses éléments).

Si vous utilisez déjà le [scoped] attribut, arrêtez d'utiliser le [scoped], car il n'a jamais été normalisé et perd la prise en charge du navigateur.

Histoire:

HTML 4.01

Dans HTML4.01, l'élément style était autorisé dans le <head> seulement. Navigateurs, diligents à essayer de rendre ce que l'auteur veut plutôt que ce que l'auteur a écrit ont respecté <style> éléments dans le <body> malgré le fait que ces pages soient techniquement invalides.

HTML 5

Le <style> l'élément n'est toujours pas valide dans le <body>

HTML 5.1

Dans certains brouillons de travail de la spécification HTML5.1 le <style> l'élément devait permettre un [scoped], qui permettrait à <style> élément à utiliser dans contenu du flux (c'est-à-dire dans le <body>).

À titre d'exemple de la façon dont cela aurait pu être utilisé serait:

<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
  <style scoped>
    p {
      color: darkred;
    }
  </style>
  <p>this text would be dark red</p>
</div>
<p>this text would be black</p>

La prise en charge de la fonctionnalité étendue a été ajoutée à Firefox dans la version 21 et ajoutée dans Chrome derrière un indicateur dans la version 2 . La fonctionnalité n'a pas reçu suffisamment de support, donc elle a ensuite été supprimé du brouillon de travail HTML5.1 .

Chrome a été le premier à supprimer la fonctionnalité dans la version 36 . Depuis, Firefox a placé la fonctionnalité derrière un drapeau dans la version 55.

HTML 5.2

Dans la version de travail de juillet 2017 de la spécification HTML5.2 , la prise en charge de <style> élément à autoriser dans le contenu du flux:

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.
  • Dans le corps, où le contenu du flux est attendu.

Emphase mine

Au moment d'écrire ces lignes, cet ajout est resté dans la spécification HTML5.2, qui est actuellement au niveau de maturité de la recommandation du candidat .

Bien que cela rend l'utilisation de <style> éléments dans le <body> toujours un peu risqué, ce changement particulier normalise quelque chose que les navigateurs prennent en charge depuis de nombreuses années.

62
zzzzBov

Il n'y a pas standard moyen ( EDIT: en HTML5 il y a apparemment !) d'ajout d'un <style> élément en dehors du <head> tag - il n'est autorisé que là-bas et NON dans le <body> tag ( Voir la DTD ici ).

Si vous souhaitez styliser vos fragments HTML individuellement et ne pas utiliser de styles CSS dans votre tête, vous devrez recourir au style en ligne. Cependant: la plupart des navigateurs comprennent <style> tags dans le corps, vous pouvez donc aussi les utiliser, mais votre page ne sera pas conforme aux normes.

De quelque manière que:

  • Vous ne devez pas utiliser le style en ligne
  • Vous devez respecter les normes
  • Vous devez mettre le CSS dans la tête où il appartient

D'après ce que je comprends, vous utilisez une sorte de modèle, où vous insérez différents extraits HTML dans la page avec des conceptions différentes. Est-ce si mauvais si vous mettez tous les styles dans un seul gros fichier CSS?

Serait-il impossible pour vous de charger dynamiquement un autre fichier CSS (via JS ou script côté serveur), lorsque votre fragment HTML est inséré dans la page (ce serait la méthode préférée)?

13
Dennis G

J'ai trouvé deux hacks pour le faire. Les deux devraient être parfaitement html valides.

La manière SVG

Enveloppez votre <style /> élément à l'intérieur d'un <svg /> élément.

<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>

Le lien Data-Uri

Formatez votre css comme un uri de données et utilisez-le dans un <link /> élément.

<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />
10
loominade