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 une page HTML en utilisant des parties qui sont des fragments HTML valides, mais pas des pages valides, comme les 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’append un style CSS en dehors de l’élément HEAD (en excluant le style en ligne via l’atsortingbut “style”)?

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

Merci d’avance pour votre aide.

EDIT FINAL:

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

  • utiliser JavaScript pour charger dynamicment des feuilles de style CSS : HTML4 / XHTML et HTML5 ,
  • intégrer des éléments de “style” directement à l’intérieur des fragments: non conforme à HTML4 / XHTML mais semble être largement pris en charge , et compatible avec HTML5 .

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

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

tl; dr:

Si vous ne souhaitez pas utiliser les fonctionnalités HTML qui n’ont pas atteint le niveau de maturité recommandé par le W3C , il n’y a pas de méthode standard pour append

au d'une page.

Si vous êtes à l'aise avec l'utilisation de fonctionnalités moins matures, HTML5.2 semble standardiser les éléments

à autoriser partout où le contenu de stream est attendu (à savoir le et la plupart de ses éléments).

Si vous utilisez déjà l'atsortingbut [scoped] , arrêtez d'utiliser l'atsortingbut [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 de style n'était autorisé que dans . Les navigateurs, essayant de rendre ce que l'auteur veut plutôt que ce que l'auteur a écrit, ont respecté les éléments

du si ces pages sont techniquement invalides.

HTML 5

L'élément

continue d'être invalide dans le

HTML 5.1

Dans certaines versions de la spécification HTML5.1, l'élément

devait permettre un atsortingbut [scoped] , ce qui permettrait d'utiliser l'élément

dans le contenu du stream (c'est-à-dire dans le ).

À titre d’exemple, on pourrait utiliser:

  Example of using the scoped atsortingbute 

this text would be dark red

this text would be black

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

Chrome a été le premier à supprimer la fonctionnalité dans la version 36 . Firefox a depuis défini la fonctionnalité pour être derrière un drapeau dans la version 55.

HTML 5.2

Dans l' ébauche de travail de juillet 2017 de la spécification HTML5.2 , un support a été ajouté pour que l'élément

soit autorisé dans le contenu du stream:

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

  • Où le contenu des métadonnées est attendu.
  • Dans un élément qui est un enfant d'un élément .
  • Dans le corps, où le contenu de l'écoulement est attendu.

Accent mis à moi

Au moment de la rédaction de cet article, 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 rende l'utilisation d'éléments

dans le toujours un risque, cette modification particulière standardise quelque chose que les navigateurs prennent en charge depuis de nombreuses années.

Il n’y a pas de méthode standard ( EDIT: à partir de HTML5 apparemment!) D’append un élément

dehors de la - il n'est autorisé que dans la ( voir la DTD ici ) .

Si vous voulez styliser vos fragments HTML individuellement et ne pas utiliser de styles CSS dans votre tête, vous devrez recourir à un style en ligne. Cependant: la plupart des navigateurs comprennent des balises

dans le corps, vous pouvez donc les utiliser, mais votre page ne sera pas conforme aux normes.

De quelque manière que:

  • Vous ne devez pas utiliser de style en ligne
  • Vous devez adhérer aux normes
  • Vous devriez mettre le CSS dans la tête où il appartient

D'après ce que j'ai compris, vous utilisez une sorte de modélisation, dans laquelle vous insérez différents extraits HTML dans la page avec des conceptions différentes. Est-ce si grave si vous mettez tous les styles dans un gros fichier CSS?

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

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

La voie SVG

Enveloppez votre élément

dans un élément .

 
Red text