Mardi 11 février, j’ai assisté à la session “ CSS, c’est pas si facile ” des TechDays 2014. Je dois avouer que cela fait parfois du bien de (re)voir les points importants sur le fonctionnement de CSS. Je vais essayer ici de vous partager ces quelques informations pour que vous n’ayez plus à vous poser des questions du genre “ Mais pourquoi mon block dépasse ? ! ”.
Calcul de la largeur – utilisation de width
Si vous vous êtes déjà posé la question, vous avez surement essayé de jouer avec la propriété width. Ce qu’il faut rappeler que par défaut, et en CSS 2.1, la largeur définie avec width n’est pas la largeur totale de l’élément visé, elle désigne la largeur du contenu. Pour avoir la largeur totale, il faut ajouter le padding et les bordures.
Avec le css suivant :
.mesElements {
width : 500px;
border : 10px;
padding : 20px;
}La largeur totale des divs sera de 500 + 2×10 + 2×20 = 560px. Il faut penser à compter la bordure et le padding de gauche et de droite. Même si les calculs ne sont pas forcément très compliqués, c’est juste des additions, il faut toujours penser à la largeur totale. CSS3 introduit une nouvelle propriété pour nous éviter cela. La propriété box-sizing. Cette propriété a pour valeur par défaut box-sizing :content-box, le fonctionnement est le même qu’avant, à savoir width défini la largeur du contenu. En revanche, si vous indiquez la valeur box-sizing :border-box; alors la largeur est la largeur totale, comprenant le padding et les bordures.
Containing block
Vous pensiez que la largeur en % d’un élément block était toujours calculée par rapport à celle de son parent ? Alors vous avez dû vous poser la question du début. En réalité, la largeur dépend du containing block de l’élément, qui n’est pas toujours le parent.
Comment connaitre le containing block de votre élément me direz-vous ? Selon sa propriété position.
- position :static (valeur par défaut) ou position :relative, il s’agit du parent,
- position :fixed, c’est le viewport (ou la page),
- position :absolute, c’est le premier parent en position relative, absolute ou fixed sinon c’est le viewport
Avec CSS3, on rajoute quelques règles, notamment avec les transformations. Un élément transformé crée un containing block même pour ses descendants qui ont position :fixed.
Block formatting context
Le BFC, ou contexte d’affichage block, est un élément qui va définir la manière dont vont s’afficher ses enfants, en l’occurrence, ils s’afficheront comme des blocks, les uns en dessous des autres.
Que faut-il donc pour devenir un BFC ? L’élément doit avoir une des propriétés suivantes :
- avoir une propriété float (float :left, float :right),
- avoir position :absolute ou position :fixed,
- avoir display :inline-block, display :table-cell ou display :table-caption,
- avoir overflow ! = visible
En devenant BFC, un élément acquiert certaines propriétés. Il peut contenir des flottants sans qu’ils débordent, ils ne s’écoulent pas autour des flottants et ils ne subissent pas la fusion des marges (voir plus bas).
Ici, l’enfant flottant déborde de son parent :
.parent {
background-color: #eb6a6a;
}
.enfant {
float: left;
width: 200px;
background-color: #6677de;
}
Le parent, en devenant BFC, contient l’ensemble de son enfant :
.parent {
background-color: #eb6a6a;
overflow:hidden;
}
.enfant {
float: left;
width: 200px;
background-color: #6677de;
}
Fusion des marges
Vous vous êtes souvent demandé pourquoi en ayant des éléments avec des marges de 10px, ils n’étaient pas toujours séparés par 20px ? Et bien c’est à cause de la fusion des marges !
C’est un mécanisme qui fusionne les marges entre elles dans certaines conditions. Tout d’abord, la fusion ne se fait que verticalement. Elle est possible dans les cas suivants :
- fusion entre la marge haute d’un block et la marge haute de son premier enfant,
- fusion entre la marge basse d’un block et la marge basse de son dernier enfant (si height :auto),
- fusion entre la marge basse d’un block et la marge haute de son suivant,
- fusion entre la marge haute et la marge basse d’un élément sans contenu
Lors de la fusion, c’est la marge maximum entre les 2 éléments qui est utilisée. A noter que dans les cas entre parents et enfants, il n’y a pas de fusion si le parent définit un padding ou une bordure.
Conclusion
Le but de cet article était de vous donner (ou vous remettre en mémoire) certains points de CSS, j’espère donc que cela vous aura intéressé suffisamment. Pour en savoir plus, je vous invite à continuer vos lectures sur CSS3 en consultant l’excellent site alsacréations.
