Vincent De Oliveira · KiwiParty juin 2013
.element{
padding: 15px;
width: 98.32%; /* pas compris, mais ça déborde à 98.33% */
position: relative; /* faut pas enlever */
overflow: hidden; /* ça non plus, tout foire sinon */
z-index: 9875687; /* p***, ça veut pas passer au-dessus! */
}<td>CSS sucks</td>
NOPE
Les feuilles de styles proviennent d'une source unique: nous!
FAUX
idclass, pseudo-classes, d'attributs#toto 1,0,0.inner ul li 0,1,2a:hover 0,1,1!important:not()::first-line, ::first-letter surclassent !importantPour cibler un identifiant sans donner plus de spécificité, utilisez le sélecteur d'attribut.
[id=toto] est identique à #toto, mais avec la même spécificité qu'une class.
La valeur définie pour une propriété CSS est celle utilisée pour le rendu de la page
FAUX
* De toute façon, ce qui compte c'est les valeurs (Perceval, Kaamelott)
window.getComputedStyle(e)rgb(255,0,0) sur écran noir&blanc, etc.* De toute façon, ce qui compte c'est les valeurs (Perceval, Kaamelott)
La valeur calculée du mot-clé
transparent pour les couleurs est rgba(0,0,0,0), soit du noir transparent.
width définit la largeur totale d'un élément
FAUX
width est la largeur du contenuwidth + padding + border
box-sizing modifie le calcul du modèle de boite
box-sizing: content-box: modèle CSS2.1box-sizing: border-box: modèle CSS3width devient la largeur totale
La largeur d'un block est égale à 100% de la largeur de son parent
FAUX
width est auto (pas 100%)padding et bordures!left et right
auto les deux: la largeur est shrink-to-fitleft et rightLa largeur en % d’un élément block est toujours calculée par rapport à celle de son parent
FAUX
position: static (tous) ou position: relative: le parentposition: fixed: le viewport (ou la page)position: absolute: le premier parent en relative, absolute ou fixed (sinon le viewport)ul{
}
ul li > span{
}
ul li > span span{
position: absolute;
}vertical-align: middle permet de centrer verticalement du contenu en CSS
VRAI
block, inline, list-iteminline-blocktable, table-row, table-celltable-cell) peut être aligné verticalement avec vertical-align: top ou middle ou bottomPour centrer verticalement un block dans un block, les marges
auto fonctionnent. Mais, seulement sur des éléments dimensionnés, en
position: absolute ou fixed et avec top, left, right et bottom différents de auto.
L’ordre d’affichage des éléments (code source) peut être modifié, sans positionnement relatif, absolu ou fixe.
VRAI
table-row-group (groupe de lignes)table-header-group (groupe de lignes d'entête)table-footer-group (groupe de lignes de pied de page).enfant{
display: table-row;
}
.menu{
}
Un élément flottant peut devenir une cellule (ou une ligne) de tableau
FAUX
display:none
position et float sans effetsposition:absolute ou fixed
float est none, display ▸ tableaufloat:left ou right
display ▸ tableauhtml)
display ▸ tableaudisplay
.parent{
display: table-cell;
vertical-align: middle;
}Un élément dont tous ses enfants sont flottants a une hauteur de 0
FAUX
Toute ressemblance avec une marque existante est purement fortuite.
floatposition: absolute ou fixeddisplay: inline-block ou table-cell ou table-captionoverflow != visible.enfant-left{
float: left;
}
.enfant-right{
/* Creer un BFC */
}
.parent{
}.parent img{
float: left;
}
.parent{
/* Creer un BFC */
}
Oh les biens beaux kiwis!
clear empêche un élément d'être adjacent à un float (mais dans le même BFC).contenu h2{
}
.menu{
float: left;
width: 200px;
}
.contenu{
margin-left: 200px;
/* Creer un BFC */
}Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, dolore similique harum asperiores possimus officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, dolorum, alias, officia consequuntur delectus omnis dolorem ratione animi maiores accusantium ut harum blanditiis debitis quasi adipisci quod porro maxime corrupti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, delectus, eum, commodi blanditiis illo maxime fuga incidunt consequuntur vel nemo inventore quisquam architecto temporibus nobis deserunt totam perspiciatis quo natus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis rerum deserunt perferendis. Molestias, laudantium, doloremque voluptates dolores sequi hic facilis nobis sint eligendi ipsa architecto deleniti. Aperiam, soluta accusantium voluptas.
float, position: absolute
display: inline-block
display: table-cell
table, table-row)overflow: hidden
display: table
table-cell anonyme (donc BFC)table-layout: autotable-layout: fixedcolumn-count: 1 ou column-width: ...<troll>Ça serait plus simple d'avoir context: block | inline | flex </troll>Deux éléments qui se suivent ayants des marges de 10px sont séparés de 20px
FAUX
height: auto)padding ou border sur le parent.enfant{
background: tomato;
}
.parent{
/*background: yellow;*/
}
/*
big-parent
background: deepskyblue;
border: 1px solid black;
*/
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, consequatur, deleniti exercitationem quis fuga laboriosam explicabo fugiat unde veritatis dolorem temporibus magnam aliquid at id doloremque. Vitae unde maiores totam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, consequatur, deleniti exercitationem quis fuga laboriosam explicabo fugiat unde veritatis dolorem temporibus magnam aliquid at id doloremque. Vitae unde maiores totam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, consequatur, deleniti exercitationem quis fuga laboriosam explicabo fugiat unde veritatis dolorem temporibus magnam aliquid at id doloremque. Vitae unde maiores totam!
Une marge droite ou gauche en % se réfère à la largeur de l'élément qui le contient.
Une marge haute ou basse en % se réfère à la largeur (!) de l'élément qui le contient.
L’élément avec le
z-index maximal de la page sera toujours au dessus de tous les autres éléments
FAUX
html)position: absolute, relative ou fixed et z-index différent de autoz-index est relatif à son contexte!.enfant{
position: absolute;
}
.enfant--red{
z-index: 1;
}
.enfant--green{
}
.parent:nth-child(2){
}Il est possible de modifier l’ordre d’empilement sans
z-index
VRAI
background de l’élément racinez-index négatifsz-index autoz-index positifsz-index.frere--un{ /* tomato */
}
.frere--deux{ /* green */
}
.frere span{
}
.frere--un span{ /* yellow */
}
.frere--deux span{ /* blue */
}L’opacité modifie l’ordre d’affichage des éléments
VRAI
transform != nonetransform-style: preserve-3dfilter != noneclip-path, mask.parent{
}
.enfant{
position: absolute;
z-index: -1;
}
Vincent De Oliveira · @iamvdo
Les slides: iamvdo.me/conf/2013/kiwiparty/