#CSS

Des bases de CSS2.1 aux fonctionnalités avancées de CSS3

Vincent De Oliveira · @iamvdo

Vincent De Oliveira

Bref historique

CSS1

  • Recommandation en 1996
  • Sélecteurs simples, positionnements basiques, tailles, marges, couleurs, polices, etc.

CSS2 et CSS2.1

  • Abandonnée en 1998
  • Trop de choses, trop complexes ou sous-spécifiées
  • Pseudo-classes dynamiques, pseudo-éléments, polices personnalisées, gestion des médias, ombres sur les textes, etc.
  • CSS 2.1: version "corrigée" de CSS2, ce qui a été retiré est mis à l'étude dans CSS3
  • Recommandation en juin 2011

CSS3

  • En cours depuis 1999
  • Standard fragmenté en modules
  • 3 modules en Recommandation, une trentaine à l'étude

Démocratisation de CSS3

Pourquoi entends t'on beaucoup parler de CSS3?

  • Meilleur ami de HTML5
  • Sélecteurs étoffés
  • Effets graphiques simplifiés: opacité, angles arrondis, ombres, dégradés, polices personnalisées, etc. (maintenance++)
  • Accès à ce qui était réservé avant à JavaScript (interaction, animation, etc.)
  • Nouveaux modes de positionnement
  • Mise à jour auto. des navigateurs
  • Support amélioré de CSS2.1
  • Fin de IE6, IE7, IE8

Utiliser CSS3

  • Connaitre le support navigateur
  • Conserver la dégradation gracieuse
  • Mettre en place l'amélioration progressive

Pour cela:

  • Ne rien faire
  • Utilisation des préfixes CSS
  • Utilisation de styles alternatifs, via la cascade CSS
  • Détection de fonctionnalités (CSS ou JS)

De nombreux outils existent…

Mais c'est quoi au fait ?

  • Cascading Style Sheets: feuilles de styles en cascade
  • Le design d'un site (mise ne forme)
  • Langage de description
  • Très (trop?) simple
.selector {
  color: blue;
  font-size: 2em;
}
  • Un style :
    • Un sélecteur
    • Des règles

Les sélecteurs

Les sélecteurs CSS1, 2.1 et 3

  • Plus de 40 sélecteurs
  • Parcourir le DOM
  • Cibler les éléments
  • Sélecteur :
    • d'éléments (E)
    • d'enfants (E F, E > F)
    • de frères suivants (E + F, E ~ F)
    • d'id (E#id) et de classe (E.class)
    • pseudo-classes (E:first-child, E:last-child...)
    • pseudo-classes dynamiques (E:hover, E:focus, E:active...)
    • pseudo-éléments (E::first-letter, E::after, E::before...)

Les sélecteurs d'attributs

  • Cibler des éléments en fonction de leur attributs (et de leurs valeurs), mêmes les data-attributes de HTML5
  • [attr], [attr=val], [attr~=val]
  • [attr^=abc]: commençant par
  • [attr$=abc]: finissant par
  • [attr*=abc]: contient
/* CSS */
a {
  color: deepskyblue;
}

Le livre «CSS3 Le design web moderne»

La maîtrise de CSS est un atout majeur dans la réalisation d’un design web moderne et innovant. Indissociable d’HTML5, CSS3 étend les capacités du langage en vous offrant des possibilités jusque là inédites.

Que vous soyez webdesigner, développeur ou amateur éclairé, vous trouverez dans ce livre, au travers d’exemples précis, une méthodologie efficace pour mettre en application CSS3 sur vos sites web dès aujourd’hui.

Vous découvrirez les nouveaux modèles de positionnement permettant des mises en pages évoluées ainsi que les nouveautés en matière de typographie. Sans utiliser d’images, vous pourrez ajouter des ombres, réaliser des coins arrondis, des effets de transparence et des dégradés complexes. Vos sites deviendront plus attractifs grâce à l’ajout d’animations, de transformations en 2D et en 3D. Vous créerez des applications mobiles performantes avec la gestion précise des médias alternatifs, tels que les smartphones et tablettes.

Pendant la lecture de l'ouvrage, retrouvez tous les exemples sur le site de démonstration dédié.

La pseudo-classe :nth-child()

  • Cible le nième enfant d'un élément
    • :nth-child(3) cible le 3e enfant
    • :nth-child(an+b) ou a et b sont des entiers
  • Ex: :nth-child(3n+2), pour chaque entier positif de n :
    • n=0, total= 2
    • n=1, total= 5
    • n=2, total= 8
    • Les 2e, 5e et 8e enfants sont sélectionnés

La pseudo-classe :nth-child()

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ul>
ul li:nth-child(3n+2) {
   color: white;
}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

La pseudo-classe :nth-child()

  • Se décline:
    • :nth-last-child()
    • :nth-of-type(), :nth-last-of-type()

La pseudo-classe :not()

  • :not() permet de retirer un sélecteur simple:
    • div:not(.toto)
    • ul li a:not(:hover)
    • .toto:not(p)
    • a:not([href^=http])
  • Pas de sélecteur avancé
    • :not(div p) est invalide

Les pseudo-classes de formulaires

  • :enabled, :disabled
  • :valid, :invalid
  • :checked
input {
  vertical-align: middle;
}
input:checked + label {
  color: white;
}

Effets graphiques

CSS = Design

Les coins arrondis

border-radius: 10px;
  • Crée des coins arrondis
  • Chaque angle peut avoir son propre arrondi
    • ex: border-radius: 0 10px 2px 20px;
  • Accepte les pourcentages (par rapport à la boite elle-même)
    • ex: border-radius: 50%; crée un rond

Les ombres

text-shadow: 2px 2px 5px black;
  • Ajoute une (ou plusieurs) ombre(s) sur le texte
box-shadow: 2px 2px 5px (5px) black (inset);
  • Ajoute une (ou plusieurs) ombre(s) sur une boite
  • L'ombre peut être interne: inset
  • L'ombre peut être plus grande ou plus petite (4ème valeur numérique)

Les dégradés

background: linear-gradient(to left, red, green);
  • Crée un dégradé linéaire
  • La direction est optionnelle. La valeur par défaut est to bottom
  • Nombre de couleurs "illimité"
  • Positionnement des color-stops automatiques/manuels
  • Existe les dégradés radiaux

La transparence

background: rgb(235, 162, 53);
opacity: .5;
  • Rends l'élément transparent (et tous les enfants)
background: rgba(235, 162, 53, .5);
  • Rends la couleur appliquée transparente
  • Extension de rgb(r,v,b) avec l'alpha
  • Existe également hsl(t,s,l) et hsla(t,s,l,a)
  • Pensez à la dégradation gracieuse

Menu de navigation

Animations

CSS ~= Motion Design

Animez simplement: les transitions

  • C'est quoi une transition?
  • Animer une propriété d'une valeur A à une valeur B
    • Par exemple de color: red à color: green
  • Effectuée lors d'un changement d'état
    • Pour cela, besoin d'un déclencheur

Déclencheurs

  • Utilisation de pseudo-classes (:hover, :focus, etc.)
  • Modification via JavaScript (ajout de classe, etc.)
  • Chargement de la page (?)

Utilisation

transition: width 2s ease;
  • 5 propriétés:
    • transition: propriété raccourcie
    • transition-property: propriété à animer
    • transition-duration: durée de la transition
    • transition-delay: retardement de la transition
    • transition-timing-function: méthode d'interpolation
.element {
  width: 200px; /* etat initial */
  height: 150px;
  background: orangered;
}
.element:hover {
  
}

Je suis un élément de la page

L'accélération

  • Contrôle de la vitesse de l'animation dans le temps
  • Propriété transition-timing-function
Methode d'interpolation des transitions CSS
  • 5 méthodes:
    • linear: linéaire
    • ease: départ rapide, arrivée lente (défaut)
    • ease-in: départ lent
    • ease-out: arrivée lente
    • ease-in-out: départ lent, arrivée lente

Interpolation avancée

  • La fonction cubic-bezier()
  • Définit une courbe de Bézier avec 2 points
  • cubic-bezier(p1x, p1y, p2x, p2y)
Courbe de bezier pour les transitions CSS
.element {
  transition: margin-left 2s;
}
.element--un { /* default: ease */ }
.element--deux {
  transition-timing-function: ease;
}

Element 1

Element 2

Menu de navigation

Histogramme

Animez plusieurs états: les animations

  • C'est quoi une animation?
  • Plusieurs transitions qui s'enchainent
  • Animer une propriété d'une valeur A à une valeur B, puis de B à C, ...
    • Par exemple de color: red à color: green puis vers color: blue
  • Chaque transition est définie sour forme d'étapes
  • 2 actions nécessaires
    • Création des étapes-clés
    • Utilisation de l'animation créée

Création des étapes-clés

@keyframes nomAnim {
  from { color: red   }
  40%  { color: green }
  to   { color: blue  }
}
  • Définit 3 étapes, soit 2 transitions:
    • de 0 à 40%: de color: red à color: green
    • de 40% à 100%: de color: green à color: blue
  • Revient à l'état initial une fois l'animation terminée

Utilisation

animation: nomAnim 2s ease 5;
  • 6 propriétés:
    • animation: propriété raccourcie
    • animation-name: nom de l'animation utilisée
    • animation-duration: durée de l'animation
    • animation-delay: retardement de l'animation
    • animation-timing-function: méthode d'interpolation
    • animation-iteration-count: nombre de répétition

Apparitions

Formulaire animé

Back to the CSS

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

<td>CSS sucks</td>

Le concept de CSS

Les feuilles de styles proviennent d'une source unique: nous!

FAUX

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()

Pour 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.

Pour augmenter la spécificité d'une classe, vous pouvez la doubler. Pas besoin d'en ajouter.

.class.class { }

La valeur définie pour une propriété CSS est celle utilisée pour le rendu de la page

FAUX

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)

La valeur calculée du mot-clé transparent pour les couleurs est rgba(0,0,0,0), soit du noir transparent.

Positionnement CSS

Les différentes «méthodes»

  • La propriété display
    • block, inline, list-item
    • inline-block
    • table, table-row, table-cell...
  • La propriété float
    • left, right
  • La propriété position
    • relative, absolute, fixed, sticky

display: inline-block

  • Mode «hybride»
  • Éléments en ligne, mais conserve les propriétés de block (dimensionnement, marges, etc.)
  • Alignables entre eux avec vertical-align

Démo: inline-block

.parent {
  
}
.enfant {
  
}
  • Home
  • Portfolio
  • News
  • Contact

display: table

  • Mode tabulaire
    • display: table simule un tableau (<table>)
    • display: table-row simule une ligne de tableau (<tr>)
    • display: table-cell simule une cellule de tableau (<td>)
  • Toute la structure n'est pas obligatoire (création d'éléments anonymes)
  • table-layout modifie le calcul d'affichage du tableau
    • auto la taille du tableau s'adapte au contenu
    • fixed le contenu s'adapte à la taille du tableau

Les plus de display: table

  • Pas de sortie de flux
  • Éléments frères de même hauteur
  • Largeur étirable dans le tableau
  • Alignement vertical du contenu avec vertical-align

Les moins de display: table

  • Pas de marges externes
  • Réorganisation des éléments difficile
    • Possible (un peu) avec table-header-group, table-footer-group
  • Imbrication plus complexe

Démo: table layout

.parent {
  
}
.enfant {
  
}
  • Le premier élément
  • Le second élément est plus long
  • Un autre élément
  • Le dernier élément est vraiment beaucoup plus long que les autres

position

  • Sort les éléments du flux de la page
  • Permet les superpositions d'éléments
  • Proche de la gestion de calque
  • position: absolute, position: fixed
  • position: relative définit l'origine des éléments positionnés inclus
  • Positionnés ensuite avec top, left, right et bottom
  • Empilement avec z-index

Démo: position

.parent {
  
}
.enfant {
  
}
  • Le premier élément
  • Le second élément est plus long
  • Un autre élément
  • Le dernier élément est vraiment beaucoup plus long que les autres

Le box model CSS

width définit la largeur totale d'un élément

FAUX

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 CSS2.1

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
La propriété box-sizing en CSS3
.parent {
  width: 1000px;
  background: yellowgreen;
}
.enfant {
  
}

Je suis un élément de la page

Je suis un élément de la page

* { box-sizing: border-box }

La largeur d'un block est égale à 100% de la largeur de son parent

FAUX

Calcul de la largeur d'un élément

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

float, inline-block

  • La largeur calculée est shrink-to-fit
  • La taille s'adapte au contenu.

absolute, fixed

  • Dépend de left et right
    • Si auto les deux: la largeur est shrink-to-fit
    • Sinon, la largeur est calculée entre left et right

La largeur en % d’un élément block est toujours calculée par rapport à celle de son parent

FAUX

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% */
  
}

Je suis le parent

Je suis son enfant

Interactions avancées

L’ordre d’affichage des éléments (code source) peut être modifié, sans positionnement relatif, absolu ou fixe.

VRAI

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{
  
}
Header
Contenu

Un élément flottant peut devenir une cellule (ou une ligne) de tableau

FAUX

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
Valeur spécifiée Valeur calculée
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
block, list-item, table valeur spécifiée

 

display, float, position

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

Un élément dont tous ses enfants sont flottants a une hauteur de 0

FAUX

Le BFC

Détournement du logo de KFC pour expliquer 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{
  
}

Enfant 1: Flottant à gauche

Enfant 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, iste, officia, perferendis culpa sapiente similique excepturi vero saepe error quas quam non fuga. Neque, modi at voluptas vel fugit sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cumque, omnis impedit enim quisquam placeat laboriosam iusto sapiente sunt delectus amet similique magni eius voluptates numquam quasi eum. Hic, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, facilis, quod, debitis, quidem modi minima placeat quae nisi obcaecati odit sequi iste deleniti nostrum sunt officiis velit non eos vitae!

BFC, flottants et parent

  • Un BFC contient ses enfants flottants: ils ne débordent pas!
.parent img {
  float: left;
}
.parent {
  /* Creer un BFC */
  
}

Des tranches de kiwis.Oh les biens beaux kiwis!

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;
}

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>

Deux éléments qui se suivent ayants des marges de 10px sont séparés de 20px

FAUX

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 {
  
}

Enfant 1

Enfant 2

Enfant 3

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.

Positionnement 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

L'élément Flexbox

display: flex;
  • Définit l'élément principal Flexbox
  • Les Flex items (enfants) «subissent» ce mode

Les axes du Flexbox

flex-direction: row wrap
  • Propriété flex-flow, un raccourci de 2 autres
  • flex-direction définit l'axe principal du Flexbox
    • column, column-reverse: affichage en colonnes
    • row, row-reverse: affichage en lignes
  • L'axe secondaire est donc l'axe perpendiculaire
  • flex-wrap gestion du débordement des lignes
    • nowrap
    • wrap, wrap-reverse

Démo: Axes Flexbox

.parent {
  
}
1
2
3
4
5

La flexibilité

flex: 1 100px
  • Propriété flex, un raccourci de 3 autres:
    • flex-grow contrainte d'agrandissement
    • flex-shrink contrainte de réduction
    • flex-basis taille de base
  • Taille flexible
  • S'applique sur chaque Flex item (enfant)

Ordre d'affichage

order: 2
  • Propriété order change l'ordre d'apparition au cas par cas
  • Pratique pour réorganiser, mais attention à l'accessibilité

Démo: flex et order

.parent {
  display: flex;
}
.enfant {
  
}
.enfant:nth-child(2) {
  
}
1
2
3
4
5

Alignements

  • Marges classiques
  • Marges automatiques: margin: auto
  • Alignements en fonction de l'axe (principal ou secondaire)
  • Suit le Box Alignment Module (non spécifique à Flexbox)

Démo: Marges

.parent {
  display: flex;
}
.enfant {
  
}
.enfant:nth-child(2) {
  
}
1
2
3
4
5

Alignement axe principal

  • justify-content sur le parent Flexbox
    • flex-start, flex-end, center, space-between, space-around
Résultat des différentes valeurs d'alignement sur l'axe principal dans Flexbox

Alignement axe secondaire

  • align-items sur le parent Flexbox
    • flex-start, flex-end, center, baseline, stretch
Résultat des différentes valeurs d'alignement sur l'axe secondaire dans Flexbox

Alignement axe secondaire

  • Un élément peut avoir son propre alignement
  • align-self sur un Flexbox item (enfant)
    • flex-start, flex-end, center, baseline, stretch
Résultat des différentes valeurs d'alignement sur l'axe secondaire pour un élement particulier dans Flexbox

Démo: Alignements

.parent {
  display: flex;
}
.enfant {
  
}
.enfant:nth-child(2) {
  
}
1
2
3
4
5

Empilements CSS

L’élément avec le z-index maximal de la page sera toujours au dessus de tous les autres éléments

FAUX

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) {
  
}
Enfant 1
Enfant 2
Enfant 3

Il est possible de modifier l’ordre d’empilement sans z-index

VRAI

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 {
  
}
Enfant 1span
Enfant 2span

L’opacité modifie l’ordre d’affichage des éléments

VRAI

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;
}
Parent
Enfant

Ressources

Merci, questions?

Vincent De Oliveira · @iamvdo

slides.iamvdo.me/yajug15

@iamvdo
slides.iamvdo.me/yajug15