Utilisation de balises <style> dans le <body> avec d'autres HTML

195 
<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

Comment un navigateur est-il censé rendre des CSS qui ne sont pas contigus? Est-il censé générer une structure de données en utilisant tous les styles CSS sur une page et l'utiliser pour le rendu?

Ou rend-il en utilisant les informations de style dans l'ordre qu'il voit?

html css Gagan
la source
2
Je dirais que c'est un comportement indéfini car ce n'est pas du HTML valide. Pour plus d'informations sur les éléments valides et ceux qui ne le sont pas: en.wikipedia.org/wiki/HTML_element
Felix Kling
2
Mis à part ce problème, c'est une mauvaise pratique de mélanger CSSet HTML.
0x2D9A3
1
@ 0x2D9A3 Pas nécessairement vrai. Il faut plus de temps pour demander une page CSS externe que CSS qui est défini dans la <head>balise
Kolob Canyon
@KolobCanyon D'accord, mais en règle générale, CSS devrait être dans un fichier séparé. Si vous avez des tonnes de CSS, il est à la fois plus facile à gérer (maintenance, (post-) traitement, minification, regroupement) et à servir de fichier séparé, et votre contenu (HTML) pourrait charger plus rapidement, ce qui conduit à une meilleure UX. Cependant, comme toujours avec le développement, tout est spécifique au contexte, donc YMMW :)
0x2D9A3
3
@KolobCanyon, ce n'est pas une question de savoir si CSS doit être dans un fichier séparé. Dans ce cas, la question porte sur CSS dans le <body>plutôt que dans le <head>.
Ray Butterworth

Réponses:

312

Comme d'autres l'ont déjà mentionné, HTML 4 nécessite que la <style>balise soit placée dans la <head>section (même si la plupart des navigateurs autorisent les <style>balises dans la body).

Cependant, HTML 5 inclut le scoped attribut (voir la mise à jour ci-dessous), qui vous permet de créer des feuilles de style qui sont limitées à l'élément parent de la<style>balise. Cela vous permet également de placer des<style>balises dans l'<body>élément:

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="scoped-content">
    <style type="text/css" scoped>
        h1 { color: red; } 
    </style>

    <h1>Hello</h1>
</div>

    <h1>
      World
    </h1>

</body>
</html>

Si vous restituez le code ci-dessus dans un navigateur compatible HTML-5 qui prend en charge scoped, vous verrez la portée limitée de la feuille de style.

Il y a juste une mise en garde majeure ...

Au moment où j'écris cette réponse (mai 2013), presque aucun navigateur traditionnel ne prend actuellement en charge l' scopedattribut. (Bien que les versions développeur de Chromium le supportent apparemment .)

TOUTEFOIS, il y a une implication intéressante de l' scopedattribut qui se rapporte à cette question. Cela signifie que les futurs navigateurs sont mandatés via la norme pour permettre<style> éléments dans le <body>(tant que les <style>éléments sont limités.)

Donc, étant donné que:

  • Presque tous les navigateurs existants ignorent actuellement scoped attribut
  • Presque tous les navigateurs existants permettent actuellement <style> balises dans le<body>
  • Les futures implémentations seront nécessaires pour permettre (portée) <style> balises dans le<body>

... alors il n'y a littéralement aucun mal * à placer des <style>étiquettes dans le corps, tant que vous les testez avec un scopedattribut. Le seul problème est que les navigateurs actuels ne limiteront pas réellement la portée de la feuille de style - ils l'appliqueront à l'ensemble du document. Mais le fait est que, à toutes fins pratiques, vous pouvez inclure des <style>balises dans la <body>condition que vous:

  • Assurez la pérennité de votre code HTML en incluant l' scopedattribut
  • Sachez qu'à partir de maintenant, la feuille de style dans le <body>ne sera pas réellement étendue (car il n'existe pas encore de prise en charge du navigateur)


* sauf bien sûr, pour faire chier les validateurs HTML ...

Enfin, en ce qui concerne l'affirmation courante (mais subjective) selon laquelle l'incorporation de CSS dans HTML est une mauvaise pratique, il convient de noter que l' intérêt de l' scopedattribut est de s'adapter aux cadres de développement modernes typiques qui permettent aux développeurs d'importer des morceaux de HTML en tant que modules ou contenu syndiqué. . Il est très pratique d'avoir un CSS intégré qui ne s'applique qu'à un morceau particulier de HTML, afin de développer des composants modulaires encapsulés avec des styles spécifiques.

Mise à jour à partir de février 2019, selon la documentation de Mozilla , l' scopedattribut est obsolète. Chrome a cessé de le prendre en charge dans la version 36 (2014) et Firefox dans la version 62 (2018). Dans les deux cas, la fonctionnalité devait être explicitement activée par l'utilisateur dans les paramètres des navigateurs. Aucun autre navigateur majeur ne l'a jamais supporté.

Charles Salvia
la source
3
@RobertMcKee: avez-vous réellement testé cela? Je m'attends à ce que généralement la page HTML entière (y compris tout le style en ligne) soit analysée avant le rendu, car généralement ce n'est pas énorme et les navigateurs attendent un (très court) avant de rendre précisément pour éviter le contenu flash-ofstyled qui pourrait se produire en raison de css lié dans le head. Si c'est votre seul CSS, et si la page est grande et si la connexion réseau n'est pas très rapide, alors vous verrez peut-être un flash de contenu sans style, mais cela me surprendrait dans la plupart des situations pratiques.
Eamon Nerbonne
4
À ce jour, seul Firefox prend en charge l'élément de style délimité (selon caniuse.com/#feat=style-scoped ). Et comme les navigateurs courants ne prennent en charge que l'élément STYLE dans BODY, je l'utiliserais simplement si nécessaire. Si le CSS doit être appliqué dans une étendue, vous pouvez simplement préfixer chaque sélecteur de la source CSS avec l'ID / classe d'un wrapper. J'ai fait cela dans une application Web qui a chargé les rapports HTML côté serveur et les a rendus via AJAX. Le CSS peut ensuite être préfixé avec une expression régulière simple en JavaScript: cssString.replace (/ (^ | \}) ([^ {] +) (\ {) / g, '$ 1' + prefix + '$ 2 $ 3')
Adam Hošek
5
Prise en charge @scopedou scopedsemble s'éteindre: ici et ici
Kiran Subbaraman
51
Soutenir @KiranSubbaraman: Je viens de lire (juillet 2016) sur mozilla dev: "L' attribut scoped a été supprimé de la spécification après une adoption limitée et expérimentale par Chrome et Firefox. Vous devez éviter de l'utiliser , car il le sera presque certainement bientôt supprimé de ces navigateurs. " >> developer.mozilla.org/en-US/docs/Web/HTML/Element/…
jave.web
9
L' scopedattribut a été supprimé des spécifications HTML5 actuelles.
Albert Wiersch
61

MAUVAISES NOUVELLES pour les amateurs de "style dans le corps": le W3C a récemment perdu la guerre HTML contre WHATWG, dont le HTML sans version "Living Standard" est devenu officiel, ce qui, hélas, ne le permet pas STYLE dans le BODY. Les jours heureux de courte durée sont terminés. ;) Le validateur W3C fonctionne également selon les spécifications WHATWG maintenant. (Merci @FrankConijn pour l'avertissement!)

(Remarque: c'est le cas "à partir d'aujourd'hui", mais comme il n'y a pas de versioning, les liens peuvent devenir invalides à tout moment sans préavis ni contrôle. À moins que vous ne souhaitiez créer un lien vers ses sources individuelles s'engage sur GitHub, vous ne pouvez pas faire plus longtemps des références stables au nouveau standard HTML officiel , AFAIK. Veuillez me corriger s'il existe une manière canonique de le faire correctement.)

BONNES NOUVELLES OBSOLÈTES:

Oui, STYLEest enfin valide dans BODY, à partir de HTML5.2! (Et scopedest parti aussi.)

D'après les spécifications du W3C ( savourez la dernière ligne! ):

4.2.6. L'élément style

...

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

Où le contenu des métadonnées est attendu.

Dans un élément noscript qui est un enfant d'un élément head.

Dans le corps, où le contenu du flux est attendu.

NOTE MÉTALLIQUE:

Le simple fait que, malgré les dégâts de la «guerre des navigateurs», nous devions continuer à nous développer contre deux normes «officielles» HTML « concurrentes ridiculement » (citations pour 1 standard + 1 standard < 1 standard) signifie que l'approche «de retour au bon sens dans les tranchées» le développement web n'a jamais vraiment cessé de s'appliquer.

Cela peut enfin changer maintenant, mais en citant la sagesse conventionnelle: les auteurs / développeurs Web et donc, à leur tour, les navigateurs devraient finalement décider ce qui devrait (et ne devrait pas) être dans les spécifications, quand il n'y a aucune bonne raison contre ce qui a déjà été fait dans réalité. Et la plupart des navigateurs ont longtemps pris STYLEen charge BODY(d'une manière ou d'une autre; voir par exemple l' scopedattr.), Malgré ses performances inhérentes (et éventuellement d'autres) pénalités (que nous devrions décider de payer ou non, pas les spécifications). Donc, pour commencer, je continuerai à parier sur eux, et je ne perdrai pas espoir. ;) Si le WHATWG a le même respect pour la réalité / les auteurs qu'ils le prétendent, ils peuvent finir par faire ici ce que le W3C a fait.

Sz.
la source
3
J'ai lu les spécifications, mais je ne comprends pas. Pouvez-vous donner un exemple de code d'un stylebloc dans le bodyqui valide?
Frank Conijn
3
@FrankConijn: Bon point, les choses ont changé, mis à jour la réponse! C'est vraiment déroutant. Les spécifications 5.2 et 5.3 du W3C traitent toutes les deux STYLEcomme des métadonnées et du contenu de flux, mais la dernière spécification WHATWG "vivante" raconte la vieille et ennuyeuse histoire "métadonnées uniquement" (ne l'autorisant que dans HEAD). Et, pour ajouter l'insulte à la blessure, le validateur W3C semble suivre la saveur WHATWG. Je n'ai pas encore décidé de rire ou de pleurer, mais j'ai décidé, personnellement, de "se tromper" avec le cas "navigateurs + W3C - validateur", et d'autoriser STYLE dans le CORPS. (BTW, n'oubliez pas: nous devrions être la source ultime de la norme , en fait.)
Sz.
Je pense vraiment qu'ils ont sauté le requin avec cette merde, ils ne laissent fondamentalement pas d'autre choix que d'utiliser dans les styles de ligne si vous souhaitez définir une propriété d'image d'arrière-plan dynamiquement dans un système basé sur des modèles. Il était tellement moins invasif de déposer un bloc de style généré par programmation juste au-dessus de votre sortie html.
GovCoder
32

Quand je vois que les systèmes de gestion de contenu pour grands sites mettent régulièrement certains éléments <style> (certains, pas tous) près du contenu qui repose sur ces classes, je conclus que le cheval est sorti de la grange.

Allez voir les sources de pages de cnn.com, nytimes.com, huffingtonpost.com, le journal de votre grande ville le plus proche, etc. Tous le font.

S'il y a une bonne raison de mettre une section <style> supplémentaire quelque part dans le corps - par exemple si vous incluez () des éléments de page divers et indépendants en temps réel et que chacun a son propre <style> intégré, et l'organisation sera plus propre, plus modulaire, plus compréhensible et plus maintenable - je dis juste mordre la balle. Bien sûr, ce serait mieux si nous pouvions avoir un style "local" avec une portée restreinte, comme les variables locales, mais vous allez travailler avec le HTML que vous avez, pas avec le HTML que vous voudrez ou voudrez avoir plus tard.

Bien sûr, il y a des inconvénients potentiels et de bonnes raisons (sinon toujours convaincantes) de suivre l'orthodoxie, comme d'autres l'ont expliqué. Mais pour moi, cela ressemble de plus en plus à une utilisation réfléchie de <style> dans <body>.

Timberline
la source
1
Pragmatisme FTW!
Waruyama
1
Oui tu as raison. Par exemple, j'utilise la balise <style> dans <body> à l'intérieur de mon plugin. Pourquoi, car c'est le moyen le plus simple de créer un contenu de plugin élégant. Mais un instant, toutes les classes css sont uniques pour mes données de plugin.
Avirtum
7

HTML non valide, de toute façon, presque tous les navigateurs semblent considérer uniquement la deuxième instance.

Testé sous les dernières versions de FF et Google Chrome sous Fedora, et FF, Opera, IE et Chrome sous XP.

Nico
la source
6

Je suppose que cela variera d'un navigateur à l'autre: les règles d'affichage globales seront probablement mises à jour au fur et à mesure que le navigateur parcourt le code.

Vous pouvez parfois voir ces modifications dans les règles d'affichage globales lorsqu'une feuille de style externe est chargée avec un retard. Quelque chose de similaire pourrait se produire ici, mais dans une succession si courte qu'elle ne sera pas réellement rendue.

Ce n'est pas du HTML valide de toute façon, donc je dirais que c'est une chose futile à penser. <style>les balises appartiennent à la headsection de la page.

Pekka
la source
5

Comme d'autres l'ont dit, ce n'est pas du HTML valide car les balises de style appartiennent à la tête.

Cependant, la plupart des navigateurs n'appliquent pas vraiment cette validation. Au lieu de cela, une fois le document chargé, les styles sont fusionnés et appliqués. Dans ce cas, le deuxième ensemble de styles remplacera toujours le premier car ce sont les dernières définitions rencontrées.

Pas moi
la source
5

La <style>balise appartient au<head> section, séparée de tout le contenu.

Références: Spécifications W3C et W3Schools

Josh Stodola
la source
52
Ne répond pas à la question. Et ces directives strictes sont dépassées par la réalité. Il y a BEAUCOUP de cas où il n'est pas possible pour les auteurs de définir / inclure leur style dans la tête html.
Javier
3
Cela a peut-être été vrai en 2010, mais c'est loin d'être une réponse acceptable aujourd'hui.
Isaac Lubow
3

Dans votre exemple, un navigateur n'est "censé" rien faire. Le HTML n'est pas valide. Soit la récupération d'erreur est déclenchée, soit l'analyseur en fait comme il le fera.

Dans une instance valide, plusieurs feuilles de style sont simplement traitées comme apparaissant les unes après les autres, la cascade est calculée comme normale.

Quentin
la source
2

Je suppose que cela peut être un problème concernant des contextes limités, par exemple les éditeurs WYIWYG sur un système Web utilisé par des utilisateurs non programmeurs , ce qui limite les possibilités de suivre les normes. Parfois (comme TinyMCE), c'est une bibliothèque qui place votre contenu / code dans une textareabalise, qui est rendue par l'éditeur comme une grande divbalise. Et parfois, il peut s'agir d'une ancienne version de ces éditeurs.

Je suppose que:

  1. ces utilisateurs non programmeurs n'ont pas de canal ouvert avec les administrateurs système (ou les webdev de l'institution), pour demander l'inclusion de certaines règles CSS au niveau du système stylesheets. En fait, il serait peu pratique pour les administrateurs (ou webdevs), compte tenu du nombre de demandes en ce sens qu'ils auraient.
  2. ce système est hérité et ne prend toujours pas en charge les nouvelles versions de HTML.

Dans certains cas, sans stylerègles d' utilisation , il peut s'agir d'une expérience de conception très médiocre. Donc, oui, ces utilisateurs ont besoin de personnalisation. D'accord, mais quelles seraient les solutions, dans ce scénario? Compte tenu des différentes façons d'insérer CSS dans une htmlpage, je suppose que ces solutions:

1ère option: demandez à votre administrateur système

Demandez à votre administrateur système d'inclure certaines règles CSS au niveau du système stylesheets. Ce sera une solution CSS externe ou interne . Comme déjà dit, cela pourrait ne pas être possible.

2ème option: <link>sur<body>

Utilisez une feuille de style externe sur la bodybalise, c'est-à-dire l'utilisation de la linkbalise à l' intérieur de la zone à laquelle vous avez accès (qui sera, sur le site, à l'intérieur de la bodybalise et non dans la headbalise). Certaines sources disent que c'est correct, mais "pas une bonne pratique", comme MDN :

Un <link>élément peut apparaître dans l' élément <head>ou <body>, selon qu'il a un type de lien qui est body-ok . Par exemple, le stylesheettype de lien est body-ok et <link rel="stylesheet">est donc autorisé dans le corps. Cependant, ce n'est pas une bonne pratique à suivre; il est plus logique de séparer vos <link>éléments de votre contenu corporel, en les mettant dans le <head>.

Certains autres, limitez-le à la <head>section, comme w3schools :

Remarque: Cet élément ne va que dans la section head, mais il peut apparaître un certain nombre de fois.

Essai

Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier foo.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <link href="bar.css" type="text/css" rel="stylesheet">
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
</body>
</html>

Et puis un fichier CSS, dans le même répertoire, appelé bar.css:

.test1 { 
    color: green;
};

Eh bien, cela semble possible si vous savez comment télécharger un fichier CSS quelque part dans le système de l'institution. Ce serait peut-être le cas.

Option 3: <style>sur<body>

Utilisez une feuille de style Internet sur la bodybalise, c'est-à-dire l'utilisation de la stylebalise à l'intérieur de la zone à laquelle vous avez accès (ce sera, sur le site, à l'intérieur de la bodybalise et non dans la headbalise). C'est à cela que répondent les réponses de Charles Salvia et Sz . En choisissant cette option, tenez compte de leurs préoccupations.

4e, 5e et 6e options: voies JS

Alerte Ceux-ci sont liés à la modification de l' <head>élément de la page. Peut-être que cela ne sera pas autorisé par les administrateurs système de l'institution. Il est donc recommandé de leur demander d'abord la permission.

D'accord, en supposant l'autorisation accordée, la stratégie est d'accéder à la <head> . Comment? Méthodes JavaScript.

4ème option: nouveau <link>sur<head>

Ceci est une autre version de la 2e option. Utilisez une feuille de style externe sur la <head>balise, c'est-à-dire l'utilisation de l' <link>élément en dehors de la zone à laquelle vous avez accès (ce sera, sur le site, pas à l'intérieur de la bodybalise et oui à l'intérieur de la headbalise). Cette solution est conforme aux recommandations de MDN et w3schools , telles que citées ci-dessus, sur la solution de 2ème option. Un nouvel Linkobjet sera créé.

Pour résoudre le problème via JS, il existe de nombreuses façons, mais dans les lignes de code suivantes, je démontre une solution simple.

Essai

Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier f.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
        // JS code here
    </script>
</body>
</html>

À l'intérieur du scripttag:

var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);

Et puis dans le fichier CSS, dans le même répertoire, appelé bar.css(comme à la 2ème option):

.test1 { 
    color: green;
};

Comme je l'ai déjà dit: cela semblera possible si vous savez comment télécharger un fichier CSS quelque part dans le système de l'institution.

5ème option: nouveau <style>sur<head>

Utilisez une nouvelle feuille de style interne sur la <head>balise, c'est-à-dire l'utilisation d'un nouvel <style>élément en dehors de la zone à laquelle vous avez accès (ce sera, sur le site, pas à l'intérieur de la bodybalise et oui à l'intérieur de la headbalise). Un nouvel Styleobjet sera créé.

Ceci est résolu via JS. Une manière simple est illustrée ci-dessous.

Essai

Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier foobar.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
        // JS code here
    </script>
</body>
</html>

À l'intérieur du scripttag:

var newStyle = document.createElement("style");
newStyle.innerHTML = 
    "h1.test1 {"+
        "color: green;"+
    "}";
document.getElementsByTagName("head")[0].appendChild(newStyle);

6ème option: utiliser un existant <style> sur<head>

Utilisez une feuille de style interne existante sur la <head>balise, c'est-à-dire l'utilisation d'un <style>élément en dehors de la zone à laquelle vous avez accès (qui sera, sur le site, pas à l'intérieur de la bodybalise et oui à l'intérieur de la headbalise), s'il en existe. Un nouvel Styleobjet sera créé ou un CSSStyleSheetobjet sera utilisé (dans le code de la solution adoptée ici).

C'est à un certain point de vue risqué. Tout d'abord , car il peut ne pas exister un <style> objet. Selon la façon dont vous implémentez cette solution, vous pouvez obtenir un undefinedretour (le système peut utiliser une feuille de style externe ). Deuxièmement , parce que vous éditez le travail de l'auteur de la conception du système (problèmes de paternité). Troisièmement , parce que cela peut ne pas être autorisé dans la politique de sécurité informatique de votre établissement. Alors, demandez l'autorisation de le faire (comme dans les autres solutions JS) .

En supposant, encore une fois, l'autorisation a été accordée:

Vous devrez considérer certaines restrictions de la méthode à la disposition de la façon suivante : insertRule(). La solution proposée utilise le scénario par défaut, et une opération au premier stylesheet, s'il en existe.

Essai

Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier foo_bar.html:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
      // JS code here
    </script>
  </body>
</html>

À l'intérieur du scripttag:

function demoLoop(){ // remove this line
    var elmnt = document.getElementsByTagName("style");
    if (elmnt.length === 0) {
        // there isn't style objects, so it's more interesting create one
        var newStyle = document.createElement("style");
        newStyle.innerHTML =
            "h1.test1 {" +
                "color: green;" +
            "}";
        document.getElementsByTagName("head")[0].appendChild(newStyle);
    } else {
        // Using CSSStyleSheet interface
        var firstCSS = document.styleSheets[0];
        firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
    }
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too

Une autre approche de cette solution consiste à utiliser un CSSStyleDeclarationobjet (documentation sur w3schools et MDN ). Mais cela peut ne pas être intéressant, compte tenu du risque de remplacer les règles existantes sur le CSS du système.

7ème option: CSS en ligne

Utiliser le CSS en ligne . Cela résout le problème, bien qu'en fonction de la taille de la page (en lignes de code), la maintenance (par l'auteur lui-même ou une autre personne affectée) du code puisse être très difficile.

Mais selon le contexte de votre rôle au sein de l'institution, ou ses politiques de sécurité du système Web, cela pourrait être la solution unique disponible pour vous.

Essai

Créez un fichier _foobar.html:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 style="color: green;">Hello</h1>
    <h1 style="color: blue;">World</h1>    
  </body>
</html>

Répondre strictement à la question posée par Gagan

Comment un navigateur est-il censé afficher des CSS non contigus?

  1. Est-il censé générer une structure de données en utilisant tous les styles CSS sur une page et l'utiliser pour le rendu?
  2. Ou rend-il en utilisant les informations de style dans l'ordre qu'il voit?

(devis adapté)

Pour une réponse plus précise, je suggère à Google ces articles:

  • Fonctionnement des navigateurs: dans les coulisses des navigateurs Web modernes
  • Construction, disposition et peinture de l'arbre de rendu
  • Que signifie «rendre» une page Web?
  • Fonctionnement du rendu du navigateur - dans les coulisses
  • Rendu - HTML Standard
  • 10 Rendu - HTML5
Igor Santos
la source
+1 Bonne idée, y compris les balises de script et utiliser javascript pour ajouter des css, HTML parfaitement légal pour les éditeurs de CMS WYSIWYG stupides
djolf
1

Parce que c'est HTML n'est pas valide n'a pas d'effet sur le résultat ... cela signifie simplement que le HTML adhère à la norme (simplement à des fins d'organisation). Pour être valide, il aurait pu être écrit de cette façon:

<html>
<head>
<style type="text/css">
  p.first {color:blue}
  p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>

Je suppose que le navigateur applique le dernier style qu'il rencontre.

G. Bickham
la source