28172 sujets

CSS et mise en forme, CSS3

[résulu] "border-style: dashed" et priorités des déclaration

Bonjour,

J'ai actuellement un problème qui me laisse plutôt perplexe...

J'essaie d'appliquer une bordure dashed (ou dotted, ça revient au même) sur un fieldset qui est imbriqué dans plusieurs éléments, comme suit :

div .contenu .events > div #search_conteneur > form > fieldset #configure_search > fieldset #search_ID > fieldset .infos


Le but du style que j'aimerais aplliquer, c'est que sur TOUTES les fieldset qui possèdent la class infos, la bordure soit dotted ou dashed. Mais si je mets simplement le style à la classe

fieldset.infos {
border: 1px dotted #000000;
}


ou si je rajoute un niveau

.events fieldset.infos {
border: 1px dotted #000000;
}


Ca ne fonctionne pas pour le fieldset imbriqué tel que décrit plus haut.
Par contre, ça va fonctionner avec

.events #search_conteneur fieldset.infos {
border: 1px dotted #000000;
}


Je précise encore que ce style est le tout dernier de la feuille de style, elle-même la dernière de toutes les feuilles de styles linkées à ma page.

Quelqu'un a-t-il une idée du pourquoi ? Il me semble pourtant que le selecteur de descendance (un espace) n'impliquait pas une limite Smiley ohwell
Modifié par superjun (30 Sep 2008 - 19:09)
Le DOM Insptector de Firefox met mets une rêgle s'appliquant à tous les fieldsets, définie plus tôt dans ma CSS après celle s'appliquant aux fieldsets, donc elle lui fait prendre le dessus Smiley eek

Par contre si j'indique bien
.events #search_conteneur fieldset.infos

Alors il met cette deuxième rêgle après la première, et tout fonctionne.

J'ai pu résoudre mon problème en utilisant le "hack" !important sur la deuxième rêgle.

Mais je mettrai le sujet [résolu] quand on m'aura donné l'explication Smiley murf

PS : Ce problème était le même pour Opera, Firefox et IE7 Smiley ohwell
Modifié par superjun (28 Sep 2008 - 20:00)
superjun a écrit :
J'ai pu résoudre mon problème en utilisant le "hack" !important sur la deuxième règle.


Le !important n'est pas un "hack" mais utilisé souvent à mauvais escient dans des trucs horribles (qu'on appelle en effet des hacks). Smiley ravi

En ce qui concerne ton problème, il doit y avoir en effet la priorité des sélecteurs qui rentre en compte. Par contre, je ne vois pas ce qui laisserait penser qu'une règle définie par défaut puisse être prise comme prioritaire. Smiley murf Un petit exemple en ligne est-ce possible ?
J'avais utilisé le mot "hack" (entre guillemets, d'ailleurs Smiley murf ) car justement il me semble bien que je n'aurais pas à l'utiliser dans un cas normal, mais que là je fais quelque chose d'horrible pour corriger un comportement que je ne comprends pas Smiley sweatdrop

Je n'ai malheureusement pas de test en ligne, mais j'ai pu extraire une partie de mon code et enlever des éléments inutiles afin de reproduire l'erreur (ou ce que j'appelle comme telle).

Voici le code permettant de reproduire l'erreur chez soi, avec un simple navigateur (copier-coller les deux codes respectivement dans un fichier *.html et test.css) :

test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<link rel="stylesheet" type="text/css" href="test.css" />

</head>

<body>
	<div class="conteneur_general">
		<div class="contenu events">

			<div id="search_conteneur">																	<!-- Début du conteneur fautif -->
				<form method="post" action="">
				
					<fieldset id="configure_search">
						<legend>Recherche...</legend>
						
						<fieldset id="search_ID">
							<legend>... par ID</legend>
							
							<fieldset class="infos">
								<legend>Informations</legend>
								
							</fieldset>
						</fieldset>
						
						<fieldset id="search_label">
							<legend>... dans les labels</legend>
							
							<fieldset class="infos">
								<legend>Informations</legend>
								
							</fieldset>
						</fieldset>
					</fieldset>
				
					<fieldset id="configure_action">
						<legend>Que voulez-vous faire ?</legend>
						
						<fieldset class="infos">
							<legend>Un niveau en-dessous</legend>
						
						</fieldset>
					</fieldset>
					
					<fieldset class="infos">
						<legend>Encore un niveau plus bas</legend>
					
					</fieldset>
				</form>
				
				<fieldset class="infos">
					<legend>Rase-mottes</legend>

				</fieldset>
			</div>																									<!-- Fin du conteneur fautif -->

			<fieldset class="infos">
				<legend>Plus bas c'est le crash</legend>							<!-- Ca marche comme par miracle [ohwell] -->

			</fieldset>

		</div>
	</div>
</body>
</html>


test.css
.events #search_conteneur {
background-color: #EAD896;
padding: 10px;
width: 570px;
}

.events #search_conteneur fieldset {
padding: 5px;
border: 1px solid #000000;
margin: 14px 0px;
padding: 10px;
}

.events #search_conteneur #configure_search {
border: 1px solid #ffc;
}

.events #search_conteneur legend {
padding: 0px 6px;

font-family: Arial;
font-weight: bold;
color: #a05b18;
font-size: 12px;
}

.events fieldset.infos {
border: 1px dotted #000000 !important;
}


Avec ce CSS, tout baigne... mais en remplaçant la dernière déclaration par
.events fieldset.infos {
border: 1px dotted #000000;
}

(donc j'ai juste enlevé !important), ça ne marche plus, c'est la première déclaration de style pour les fieldset qui prend le pas.
Avec ce test, on remarque que lorsque ça ne marche pas, c'est uniquement à partir du niveau dont le style des fieldset a été défini en tenant compte, dans le chemin DOM de la déclaration, de ce niveau (en l'occurence, #search_conteneur, avec le chemin déclaré .events #search_conteneur fieldset)

D'où la question suivante : Est-ce qu'un style appliqué plus précisément (càd dont un chemin plus précis pour atteindre cet élément à partir du DOM a été déclaré) est appliqué en priorité ? Il me semble pourtant que ça ne devrait pas être le cas : un élément déclaré après un autre, peu importe le chemin, a la priorité.
Bon eh bien, grâce à ce test, j'ai pu trouver la solution. En effet, ce n'est pas l'ordre d'apparition qui compte (enfin si, mais sous certaines conditions). Il y a en effet un système de calcul de priorité fort simple mais néanmoins troublant quand on ne le connais pas.

Je me permets de citer un article de l'excellent Openweb :
a écrit :
Les styles restant en concurrence ont un degré de priorité variable, dépendant du sélecteur CSS utilisé et de sa syntaxe. Ce degré de priorité est calculé sous forme d'un nombre à 4 chiffres ABCD :
A : A=1 s'il ne s'agit pas d'un sélecteur CSS mais d'un attribut style. Sinon, A=0. De cette manière, un style placé dans l'attribut style d'un élément HTML aura systématiquement un poids plus élevé qu'un style auteur placé dans une feuille de style (ABCD = 1000, la plus haute valeur possible) ;
B : si A vaut 0, B est le nombre d'ids présents dans le sélecteur. Par exemple, B=2 pour le style #conteneur p#special {...} ;
C : si A vaut 0, C est le nombre de classes (du type .ma_classe) et de pseudo-classes (du type [hreflang=en]) dans le sélecteur. Par exemple, C=2 pour le style .article p a[hreflang=en] {...} ;
D : si A vaut 0, D est le nombre d'éléments HTML et de pseudo-éléments (du type :before et :after, :first-line, etc) dans le sélecteur. Par exemple, : D=2 pour le style a:after {...}.

Adresse de l'article : http://openweb.eu.org/articles/cascade_css/, sur lequel il y a beaucoup plus d'infos, notemment sur les étapes précédentes et suivantes du calcul de priorité (avec plein de jolies couleurs Smiley lol )

Donc, sujet résolu Smiley rofl
(J'ai modifié le titre du sujet afin de le faire afficher complètement Smiley murf )
Modifié par superjun (29 Sep 2008 - 19:57)
superjun a écrit :
En ce qui concerne ton problème, il doit y avoir en effet la priorité des sélecteurs qui rentre en compte. Par contre, je ne vois pas ce qui laisserait penser qu'une règle définie par défaut puisse être prise comme prioritaire. murf


C'est ce dont je parlais (et d'où l'utilité du !important dans certains cas) mais cela me laisse perplexe sur le fait qu'une règle du navigateur prenne le pas sur une règle "perso". Smiley murf
En fait, ce n'est pas le cas. J'avais défini une rêgle pour les éléments fieldset qui avait plus de poids que celle qui apparaissait plus tard dans le CSS. Du coup, ça chamboulait tout Smiley eek 


.events #search_conteneur fieldset {
padding: 5px;
border: 1px solid #000000;
margin: 14px 0px;
padding: 10px;
}


et

.events fieldset.infos {
border: 1px dotted #000000;
}

Modifié par superjun (29 Sep 2008 - 20:19)
Sujet clos
Aller à