Les interactions entre propriétés CSS
Vous êtes ici : Accueil / Articles / Formations en XHTML / CSS
Apprendre le CSS
Les propriétés CSS n’ont pas une action en absolu : elles interagissent les unes avec les autres, et les développeurs ont trop tendance à sous-estimer ces interactions, de telle sorte que les résultats sont parfois inattendus et donnent lieu à des bricolages rendant les feuilles de style illisibles et surtout incompatibles.
Les Document Type Definition
Que viennent donc faire les DTD dans un cours de CSS ? Au fait, il faut savoir que les navigateurs en tiennent compte pour considérer que la page est à interpréter de manière stricte en respectant les standards en vigueur, ou considérer que la page est à codée à l’ancienne et utiliser des rendus dépendant du navigateur.
Prenons un exemple concret : Le code suivant :
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
div {
width: 50px;
padding: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
Voici les résultats obtenus avec et sans DTD :
- IE avec DTD
- IE sans DTD
Et ceci n’est qu’un exemple parmi les nombreuses modifications d’affichage qu’entraîne la présence d’une DTD. Il est fortement conseillé de mettre une DTD pour avoir le même affichage de Mozilla Firefox. Une fois la DTD ajoutée, la plupart des différences d’affichage entre IE et Firefox proviendront les valeurs par défaut. La compatibilité entre ces navigateurs fait déjà l’objet d’un article :
Rendre son CSS compatible
Découvrez comment créer facilement des feuilles de style compatibles avec les principaux navigateurs.
Pour les parties suivantes, nous aurons recours au code xhtml suivant :
<div class="enfant"></div>
</div>
Le positionnement des blocs
Nous allons maintenant voir comment interagissent les propriétés suivantes :
margin
left / right / bottom / left
position
Jusqu’ici, vous avez appris que left était la distance par rapport à la gauche, right par rapport à la droite, margin-left était la marge à gauche...
Commençons tout d’abord avec le code suivant :
margin-left: 100px;
width: 300px;
height: 100px;
border: 1px solid blue;
}
.enfant {
width: 40px;
height: 20px;
border: 1px solid red;
left: 20px;
}
Voici les différents résultats de réaction de left en fonction de la propriété position
Lorsqu’aucune propriété position n’est spécifiée, ou que la position est définie à static dans la balise enfant ( rouge ), le résultat est le suivant :
Lorsque la propriété position est mise à relative dans la balise enfant, le résultat est le suivant :
Lorsque la propriété position est mise à absolute dans la balise enfant et que la balise parent n’est pas en position absolute, le résultat est le suivant :
Enfin, lorsque la propriété position est mise à absolute et pour la balise parente et la balise enfant, le résultat est :
Voici donc quelques règles d’interaction entre la propriété position et la propriété left :
Règle 1 : Le positionnement est toujours relatif à son parent si le bloc enfant n’est pas en absolu.
Règle 2 : Le positionnement est relatif au plus proche parent absolu si un enfant est en absolu et si une propriété left est définie.
Règle 3 : La propriété left n’agit qu’en position relative ou absolue.
Règle 4 : Si aucune propriété left n’est définie, le positionnement est toujours relatif au bloc parent. Cette dernière règle signifie donc que si l’on utilise un margin alors que l’on est en position absolute, il sera toujours par rapport au parent, même si le parent n’est pas en position : absolute
Remarque : Nous avons eu recours à la propriété left pour nos exemples, mais les résultats sont aussi valables pour top, right et bottom.
Retenez donc bien : L’action de left dépend de la valeur de position. Si left n’est pas précisé, l’action de margin ne dépend pas de la valeur de position.
La superposition de blocs
Pour superposer 2 blocs, il est courant d’avoir recours à la propriété z-index pour savoir quel bloc devra se mettre au-dessus d’un autre. Cependant, cette notion de priorité est relative à la valeur de la propriété position.
Règle 5 : z-index ne régit les superpositions qu’entre blocs ayant la même valeur dans la propriété position
Ainsi, si un bloc est en position relative et un autre en position absolue, la valeur du z-index sur le second bloc agira sur les blocs de position absolue, donc par rapport au premier bloc parent absolu du bloc relatif. Le bloc parent absolu à la racine du document est body.
Les dimensions des blocs
Quelle est la taille par défaut d’un bloc lorsqu’on ne précise pas sa propriété width ? On vous répondra qu’elle prends la taille de son parent par défaut. Prendre la taille de son parent est une chose bien pratique quand on ne veut pas avoir une dimension fixe. Cependant, par défaut, un bloc ne prends pas toujours la taille de son parent : cela dépend de s’il est en position : absolute ou non.
Règle 6 : Si un bloc est en position : absolute, alors il est par défaut de dimensions (0,0). sinon, il prends par défaut la longueur de son parent et la hauteur 0.
Prenons un exemple : Pour le bloc parent, nous allons définir le bloc css suivant :
width: 300px;
height: 100px;
border: 1px solid blue;
position: absolute;
}
Pour le bloc enfant, nous allons essayer successivement les blocs
border: 1px solid red;
position: absolute;
}
Et
border: 1px solid red;
position: relative;
}
Voici les résultats :
- En position absolute
- En position relative
Remarque : Si l’on teste le code sous Internet Explorer, le bloc enfant aura une hauteur par défaut de 20px. Il suffit alors de changer la valeur par défaut pour obtenir le même résultat que sous Firefox.
Mais alors comment faire en sorte qu’un bloc en position absolue prenne la taille de son bloc parent ?
Il suffit simplement que le bloc parent soit également en position absolue, et que l’on définisse les propriétés left :0px et right :0px pour que l’affichage soit le même qu’en position relative.