#CSS

Ce que vous avez toujours voulu savoir

Vincent De Oliveira · @iamvdo

CSS, c'est simple!

• Hum...
• Pourtant, on est tous passé par là:

.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! */
}

Les bases CSS

La cascade CSS

• CSS: Feuilles de styles en cascade
• Différentes origines:
  • Author (les devs CSS)
  • User (les gens)
  • UA (les navigateurs) + réglages navigateur du user
• La cascade CSS applique un poids à chaque déclaration

La cascade CSS (ordre)

• 4 étapes pour les styles:
  1. Récupére toutes les déclarations CSS (pour le média cible)
  2. Tri suivant cet ordre:
     • UA ▸ User ▸ Author ▸ Author !important ▸ User !important
  3. Tri par spécificité des sélecteurs CSS
  4. Enfin, tri par position dans le CSS (ordre du code)

Spécificité des sélecteurs

• 3 valeurs:
  • A ▸ Nombre d'id
  • B ▸ Nombre de class, pseudo-classes, d'attributs
  • C ▸ Nombre d'éléments, pseudo-éléments
• Exemples:
  • #toto 1,0,0
  • .inner ul li 0,1,2
  • a:hover 0,1,1
• Styles inline, !important
• Cas particulier :not()

Les valeurs CSS*

• Une valeur passe par 4 étapes:
  • Specified value
    • Valeur spécifiée en CSS
    • OU valeur héritée de son parent
    • OU valeur initiale de la propriété
  • Computed value
    • Valeur calculée (avant rendu)
    • + quelques approximations
    • ex: URL relative ▸ URL absolue, red ▸ rgb(255,0,0), 1.5px ▸ 1px

* De toute façon, ce qui compte c'est les valeurs (Perceval, Kaamelott)

Les valeurs CSS*

• Une valeur passe par 4 étapes:
  • Used value
    • Valeur calculée + dépendances (pendant le rendu)
    • ex: em/rem ▸ px, width: 50% (en fonction de son parent)
    • Récupéree en JS avec window.getComputedStyle(e)
  • Actual value
    • Valeur réellement utilisée, approximation de l’UA
    • ex: bordure de 1.5px, rgb(255,0,0) sur écran noir&blanc, etc.

* De toute façon, ce qui compte c'est les valeurs (Perceval, Kaamelott)

Le box model CSS

Le modèle de boite

• Le box model en CSS2.1
  • width est la largeur du contenu
  • largeur totale = width + padding + border
  

Le modèle de boite, en mieux!

• box-sizing modifie le calcul du modèle de boite
  • box-sizing: content-box: modèle CSS2.1
  • box-sizing: border-box: modèle CSS3
• width devient la largeur totale

Calcul de la largeur d'un élément

• La valeur initiale de width est auto (pas 100%)
• Attention donc aux padding et bordures!

Le containing block

• La largeur dépend de la largeur de son containing block!
• C'est quoi?
  • Éléments en position: static (tous) ou position: relative: c'est le parent
  • Éléments en position: fixed: c'est le viewport (ou la page)
  • Éléments en position: absolute: c'est le premier parent en relative, absolute ou fixed (sinon le viewport)

Le containing block en CSS3

• De nouvelles règles:
  • transform != none
  • transform-style: preserve-3d
  • perspective
  • mask, mais ne devrait pas
  • will-change dans certains cas

Le containing block

.parent {
  /* créer un containing block */
  
}
.enfant {
  /* mettre en absolute et fixez la largeur à 100% */
  
}

Positionnement

En CSS 2.1...

Les valeurs de display

• block, inline, list-item
• inline-block
• table, table-row, table-cell

• Le contenu d'une cellule (table-cell) peut être aligné verticalement avec vertical-align: top ou middle ou bottom

display: table & Co.

• 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)
• Très utiles pour réorganiser ses blocs (surtout en responsive) ▸ Alsacreations.fr

Les valeurs de display

.enfant{
  display: table-row;
}
.menu{
  
}

display, float, position

• Interactions:
  1. Si display est none
     • position et float sans effets
  2. Si position est absolute ou fixed
     • float est none, display ▸ tableau
  3. Si float est left ou right
     • display ▸ tableau
  4. Si élément racine (html)
     • display ▸ tableau
  5. Sinon, valeur de display

display, float, position

.parent {
  display: table-cell;
  vertical-align: middle;
}

Le BFC

Toute ressemblance avec une marque existante est purement fortuite.

Le Block Formatting Context

• BFC: contexte d’affichage block
• Propriétés d'un BFC:
  • Les enfants s'affichent les uns en dessous des autres
  • Ne «s'écoule» pas autour des flottants
  • Contient les flottants
• Comment créer un BFC:
  • float
  • position: absolute ou fixed
  • display: inline-block ou table-cell ou table-caption
  • overflow != visible

BFC, flottants et frères

• Un BFC ne chevauche pas les flottants externes
• Ses marges sont implicites

.enfant-left{
  float: left;
}
.enfant-right{
  /* Creer un BFC */
  
}
.parent{
  
}

BFC, flottants et parent

• Un BFC contient ses enfants flottants: ils ne débordent pas!

.parent img {
  float: left;
}
.parent {
  /* Creer un BFC */
  
}

BFC et clear

• La propriété 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 */
  
}
.contenu img {
  float: left;
}

MENU

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, dolore similique harum asperiores possimus officiis.

Les Kiwis? Partis!

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.

BFC: effets colatéraux

• float, position: absolute
  • modifie le flux de la page
• display: inline-block
  • Ne crée pas de boite de niveau block
  • La taille est shrink-to-fit
• display: table-cell
  • Ne crée pas de boite de niveau block
  • Participe à un contexte de parents anonymes (table, table-row)
  • Les marges externes n'existent pas!
• overflow: hidden
  • Le plus utilisé
  • Mais empêche les débordements éventuels

BFC: one more thing!

• Possibilité en plus: display: table
  • Création d'un table-cell anonyme (donc BFC)
  • Création d'une boite de niveau block
  • Mais attention au calcul de taille du tableau
    • table-layout: auto
    • table-layout: fixed
  • Et donc aux débordements
• <troll>Ça serait plus simple d'avoir context: block | inline | flex </troll>

Positionnement

En CSS3...

Flexbox FTW

• Flex formatting context
• Comme un BFC, en plus mieux
• Centrage horizontal et vertical
• Réorganisation des éléments
• Flexibilité des boites
• Marges externes, et même automatiques
• Débordements

• LA solution à tous vos problèmes ?
• Support très large, seuls IE<9 ont besoin d'un polyfill
• Automatiser les préfixes

La fusion des marges

• Mécanisme qui fusionne certaines marges entres-elles
• La fusion est uniquement verticale
• À quel moment?
  • marge haute d’un bloc et marge haute de son premier enfant
  • marge basse d’un bloc et marge basse de son dernier enfant (si height: auto)
  • marge basse d’un bloc et marge haute de son suivant
  • marge haute et basse d’un élément sans contenu

La fusion des marges

• Contraintes entre suivants:
  • Éléments dans le même BFC
• Contraintes entre parents et enfants:
  • Pas de fusion si le parent est un BFC
  • Pas de fusion si padding ou border sur le parent
• Lors de la fusion: la marge maximum est utilisée

La fusion des marges

.enfant {
  background: yellow;
  
}
.parent {
  
}

Empilements CSS

Contexte d'empilement

• Tout dépend de son contexte d’empilement
• Création:
  • Élément racine (html)
  • Élément en position: absolute, relative ou fixed et z-index différent de auto
• Les contextes d'empilement sont «hermétiques» aux autres contextes
• Le z-index est relatif à son contexte!

Contexte d'empilement

.enfant {
  position: absolute;
}
.enfant--un {
  z-index: 1;
}
.enfant--deux {
  
}
.parent {
  position: absolute;
}
.parent:nth-child(2) {
  
}

Ordre d'affichage

• Pour chaque contexte d'empilement, l'ordre est:
  • Bordures et background de l’élément racine
  • Éléments positionnés et z-index négatifs
  • Éléments block non-positionnés
  • Floats
  • Éléments inline non-positionnés
  • Éléments positionnés et z-index auto
  • Éléments positionnés et z-index positifs
• Il est donc possible:
  • d'afficher un enfant derrière son parent
  • d’intercaler des éléments
  • de modifier l’ordre d’empilement sans z-index

Ordre d'affichage

.enfant--un {
  
}
.enfant--deux {
  
}
.enfant span {
  
}
.enfant--un span {
  
}
.enfant--deux span {
  
}

Contexte d'empilement: opacité!

• L’opacité <1 crée un contexte d’empilement!
• Et en CSS3:
• transform != none
• transform-style: preserve-3d
• perspective
• filter != none
• clip-path, mask
• will-change dans certains cas

Contexte d'empilement: opacité!

.parent {
  
}
.enfant {
  position: absolute;
  z-index: -1;
}