Déclarer de style CSS à l'extérieur de la “TÊTE” d'un “HTML” à la page?
mon cas d'utilisation est le suivant :
Je suis de la rédaction d'un page HTML en utilisant des pièces valide des fragments de HTML mais pas des pages valides,
comme Divs; ces éléments sont à l'aide de CSS à gérer leur style.
J'aimerais permettre à chaque fragment à être responsable de ses propres exigences de style et de ne pas s'appuyer sur les déclarations des feuilles de style dans le principal fragment (celle avec le "HTML" de la balise).
Voici donc venir la question : est-il (standard) pour ajouter un peu de style CSS à l'extérieur de l'élément de TÊTE (à l'exclusion de la ligne de style via l'attribut "style") ?
Je suppose que je pourrais utiliser des images, mais je préfère éviter cette solution.
Merci d'avance pour votre aide.
FINAL EDIT :
Merci pour les propositions de zzzzBov, JMC Créatif et moontear, et après quelques tests, voici la réponse :
- utilisation JavaScript pour charger dynamiquement un peu de CSS les feuilles de style : HTML4/XHTML et HTML5 compatible,
- embed "style" éléments directement à l'intérieur de l'fragments : non conforme avec HTML4/XHTML mais semble être largement pris en charge, et est HTML5 compatible.
Que je doit 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.
- pourriez-vous utiliser javascript pour ajouter des
<style>
éléments de la tête, après le fait? - Créatif : merci, ce doit être la meilleure solution en effet, mais je suis à l'envoi de messages électroniques, donc je ne peut pas compter sur JS.
Vous devez vous connecter pour publier un commentaire.
tl;dr:
Si vous n'êtes pas à l'aise d'utiliser les fonctionnalités HTML qui n'ont pas atteint un niveau de maturité de Recommandation du W3C, il n'y a pas un moyen standard de l'ajout de
<style>
à la<body>
d'une page.Si vous êtes à l'aise en utilisant moins matures fonctionnalités HTML5.2 semble être la standardisation
<style>
éléments autorisés de flux de contenu est prévu (c'est à dire la<body>
et la plupart de ses éléments).Si vous utilisez déjà l'
[scoped]
attribut, arrêtez d'utiliser le[scoped]
attribut, car il n'a jamais été normalisée et est en train de perdre prise en charge du navigateur.Histoire:
HTML 4.01
En HTML4.01 l'élément de style a été admis dans le
<head>
seulement. Les navigateurs, être assidu à tenter de rendre compte de ce que l'auteur veut plutôt que ce que l'auteur a écrit ont respecté<style>
éléments dans le<body>
malgré ces pages sont techniquement pas valide.HTML 5
La
<style>
élément continue à être valide dans la<body>
HTML 5.1
Dans certains les projets de travail de l'HTML5.1 spec la
<style>
élément, c'était pour permettre une[scoped]
attribut, ce qui permettrait à la<style>
élément à être utilisé dans flux de contenu (c'est à dire dans le<body>
).Comme un exemple de la façon qui pourrait avoir été utilisée serait:
Soutien à la portée de la fonctionnalité a été ajouté à Firefox en version 21 et ajouté à Chrome derrière un drapeau dans la version 20. La fonctionnalité n'a pas reçu assez de soutien, de sorte qu'il a été retiré de la HTML5.1 projet de travail.
Chrome a été la première à supprimer cette fonctionnalité dans la version 36. Firefox a créé depuis la caractéristique d'être derrière un drapeau dans la version 55.
HTML 5.2
Dans le Juillet 2017 projet de travail de l'HTML5.2 spec, un soutien a été ajouté pour la
<style>
élément pour être admis dans le flux de contenu:l'Accent mine
Au moment de la rédaction de cet ajout est resté dans le HTML5.2 spec, qui est actuellement à la Candidat Recommandation niveau de maturité.
Tout cela rend l'utilisation de
<style>
éléments dans le<body>
encore un peu de risque, ce changement est la standardisation de quelque chose que les navigateurs ont soutenu pendant de nombreuses années.Il n'y a pas de standard moyen (EDIT: de HTML5, il est apparemment!) de l'ajout d'un
<style>
élément en dehors de la<head>
tag - il est seulement permis de là et non PAS dans le<body>
tag (Voir la DTD ici).Si vous voulez style sur des fragments de HTML individuellement, et non pas utiliser des styles CSS dans votre tête, vous aurez besoin de recourir à des inline style. Cependant: la Plupart des navigateurs comprendre
<style>
tags à l'intérieur du corps, de sorte que vous pourriez aussi bien utiliser, mais votre page ne sera pas conforme aux normes.En quelque sorte:
De ce que je comprends vous utilisez une sorte de template, où vous insérez des différents extraits de code HTML dans la page avec les différents modèles. Est-il 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 des scripts côté serveur), lorsque votre HTML fragment est inséré dans la page (ce qui serait la meilleure méthode)?
<style>@import url('path/to/file.css')</style>
dans le corps de la balise fonctionne dans la plupart des navigateurs modernes. Je sais que désobéir aux exigences strictes de la saint W3C, c'est mal vu, mais allez, le web est en pleine évolution, et leurs normes ne sont pas. Exemple utilisé par un tiers populaires de service avec succès: ZenDesk.com bouton code ... avec succès service d'une inconnue-haute-nombre de demandes par jour.style
des balises dans lesbody
d'une page HTML.J'ai trouvé deux hacks de le faire. Tous deux doivent être parfaitement valide en html.
Le SVG façon
Envelopper votre
<style />
élément à l'intérieur d'un<svg />
élément.HTML:
Le Data-Uri Link
Format de votre css en tant que données d'uri et de l'utiliser dans un
<link />
élément.HTML: