Imbriquer une balise style dans une balise div et validation W3C

**ClarusAD** · 22/06/2016, 14h51

Bonjour,
J'arrive pas à valider un code tout simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="fr">
<head>
<title>TEST</title>
</head>
<body>
<div id="monContainer">
    <div id="maDiv">
        <style type="text/css" scoped>
            div#maDiv {display:block;}
        </style>
    </div>
</div>
</body>
</html>

Comment faire lorsque, par exemple, on veut insérer un bout de code dans une page ?
Merci bien

**Muchos** · 22/06/2016, 16h51

Bien noté!
L'attribut SCOPED semble avoir été supprimé de l'actuelle spécification HTML5. En effet, à part Firefox, et éventuellement Chrome en bidouillant, il n'était pas supporté.

Cela dit, j'aurais codé comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="monContainer">
  <style scoped>
    div#maDiv {display:block;} /* Règle absurde: DIV est déjà block ;) */
  </style>
   <div id="maDiv"></div>
</div>

**NoSmoking** · 22/06/2016, 18h56

Bonjour,
pourquoi ne pas faire un simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="fr">
<head>
<title>TEST</title>
<style>
#maDiv {
  display:block;
}
</style>
</head>
<body>
<div id="monContainer">
    <div id="maDiv">
    </div>
</div>
</body>
</html>

traditionnel ?

• Au passage une ID étant unique, inutile de mettre div#maDiv{}, #maDiv{} suffit.
• Autre chose, une <div> est par défaut en display:block, mais je pense que c'était pour l'exemple .

**ClarusAD** · 29/06/2016, 10h06

@Muchos : merci pour l'information

@NoSmoking : le but est de pouvoir insérer TOUT le code concernant un module à un seul et unique endroit ; ne pas être obligé de fragmenté (une partie dans le head, l'autre dans le body...) le code dudit module.

Est-ce que ça veut dire que ça n'est plus possible de faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html><html lang="fr"><head><title>TEST</title></head><body>

	<div id="monContainer">
		<style>
			div#maDiv {display:block;}
		</style>
		<div id="maDiv">
			<p>hello punk !</p>
		</div>
	</div>

</body></html>

**NoSmoking** · 05/07/2016, 22h40

Est-ce que ça veut dire que ça n'est plus possible de faire ceci :

tout est possible ou presque, le tout et de savoir ce que l'on veut, disperser les codes, séparer les couches HTML/CSS/JS pour une meilleure maintenabilité, à toi de voir.

**ClarusAD** · 06/07/2016, 08h44

tout est possible ou presque

Moi je veux bien, mais c'est alors contradictoire avec ce que dis Muchos : le fait que l'attribut scoped est devenu obsolète >.<

**NoSmoking** · 07/07/2016, 18h51

Tu n'as pas besoin d'un attribut scoped pour rendre ton code « acceptable »

Si tu souhaites n'affecter qu'une partie de ton document avec un style particulier rien ne t'empêche de le cibler dans ta partie <style>.

**ClarusAD** · 08/07/2016, 08h20

rien ne t'empêche de le cibler dans ta partie <style>

Donc si je comprends bien : cette façon de procéder est plus ou moins « acceptable », mais non valide.

**NoSmoking** · 11/07/2016, 19h17

Là je ne te suis plus....

**ClarusAD** · 11/07/2016, 20h08

Ici, tu dis :

Si tu souhaites n'affecter qu'une partie de ton document avec un style particulier rien ne t'empêche de le cibler dans ta partie <style>

C'est bien ce que j'ai fait ; sauf que ça valide pas, d'où mon interrogation

**NoSmoking** · 11/07/2016, 21h54

Je parlais bien sûr de la partie <style> contenue dans <head></head>.

**ClarusAD** · 12/07/2016, 11h13

ok donc si j'enferme une balise <style> dans une <div> de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="madiv">
    <style>
        div#madiv {display:block;}
    </style>
</div>

cette façon de procéder est plus ou moins « acceptable », mais non valide.

Du coup, c'est à éviter. C'est dommage, car c'était parfois bien pratique.

**NoSmoking** · 12/07/2016, 18h53

Pratique en quoi, je ne vois pas.
Dans ce cas autant mettre le style inline si cela ne devient pas trop illisible.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div style="display:block;">
  <!-- le contenu -->
</div>

**ClarusAD** · 14/07/2016, 10h46

J'ai mis display:block pour l'exemple.
Le côté pratique, c'est dans le cas ou il y a un nombre conséquent de propriétés dans "le module" à insérer ; et lo code inline ne convient dans pas pour une question de lisibilité.

**NoSmoking** · 15/07/2016, 15h29

Tu peux créer un fichier CSS à part pour ton « module » et le linker, ou encore l'intégrer uniquement si tu insères ton « module », cela restera à mon sens plus propre.
...sinon la validation n'étant bien souvent qu'une cerise sur le gâteau et si tu t'y retrouves plus facilement en mettant la partie style dans le corps de la page rien ne t'en empêche, cela fonctionnera de la même façon.

**ClarusAD** · 18/07/2016, 19h39

Merci NoSmoking : ta solution de linker le fichier fonctionne parfaitement. Dire que c'était aussi simple, comment j'ai pu ne pas y penser

Imbriquer une balise style dans une balise div et validation W3C

Conception Web

Discussions similaires

Partager

Partager