1. Retour sur CSS
2. Le module « flexbox »
3. Les « media queries »
4. Le module « grid »
5. CSS et bonnes pratiques

Le flux d’affichage CSS repose sur l’affichage de blocs.

  display: inline;

Initialement, les blocs étaient de 2 types :

• block,
• ou inline.

Ensuite est arrivé le type inline-block fusionnant les deux autres types.

Les éléments d’affichage block suivent le comportement des paragraphes.

On parle parfois d’axe vertical.

Les éléments d’affichage inline suivent le comportement du texte.

On parle parfois d’axe horizontal.

Les éléments d’affichage inline-block suivent le comportement du texte.

Il s’agit toujours de l’axe horizontal.

Par défaut :

position : static;

Mais ils peuvent aussi recevoir comme valeur :

• relative
• absolute
• fixed
• sticky

La position est ensuite modifiée à l’aide des propriétés top, right, bottom et left.

L’élément est positionné dans le flux normal, puis décalé à l’aide de top, right, bottom et left.

span {
  position: relative;
}

span {
  position: relative;
  left: 2em;
  top: 2em;
}

span {
  position: relative;
  left: 2em;
  top: 2em;
  margin: 0 1em;
}

Attention : nouveau contexte d’empilement z-index.

L’élément est sorti du flux d’affichage. Il est positionné, à l’aide de top, right, bottom et left, par rapport au premier ancêtre positionné.

span {
  margin: 0 1em;
}

span {
  position: absolute;
  left: 2em;
  top: 2em;
}

div {
}
span {
  margin: 0 1em;
}

div {
  position: absolute;
  width: 75%;
  left: 2em;
  bottom: 2em;
}
span {
  margin: 0 1em;
}

div {
  position: absolute;
  width: 75%;
  left: 2em;
  bottom: 2em;
}
span {
  position: absolute;
  left: 2em;
  top: 2em;
  margin: 0 1em;
}

Attention : nouveau contexte d’empilement z-index.

L’élément est sorti du flux d’affichage. Il est positionné, à l’aide de top, right, bottom et left, par rapport à la zone d’affichage de la fenêtre.

span {
  margin: 1em;
}

span {
  position: fixed;
  left: 2em;
  top: 2em;
  margin: 1em;
}

Attention : nouveau contexte d’empilement z-index.

L’élément est positionné dans le flux normal. Mais adhérera au bord de la zone d’affichage en fonction de top, right, bottom et left.

span {
 position: sticky;
 top: 2em;
}

Attention : nouveau contexte d’empilement z-index.

Un exemple de positionnement CSS.

p:nth-of-type(3)  {
  position: relative;
  border: 1px solid #88f;
  margin: 3em auto;
  width: 50%;
}
span {
  background-color: #ddd;
  color: #000;
  border: 1px solid #aaf;
  top: 2em;
  left: 2em;
  margin: 1em;
}
.static {
  position: static;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
  bottom: 2em;
}

Syntaxe :

float: left | right | none | inline-start | inline-end;

L’élément est retiré du flux normal et doit être placé sur le côté droit ou gauche du conteneur.

Les éléments en ligne (inline) entourent l’élément.

span {
}

span {
  float: left;
}

span {
  float: right;
}

span {
  float: right;
}
span:nth-child(even) {
  float: left;
}

span {
  float: right;
  width: 2em;
  height: 2em;
}
span:nth-child(even) {
  float: left;
}

Syntaxe :

clear: left | right | none | inline-start | inline-end;

Spécifie si l’élément doit être décalé en dessous de l’élément flottant précédent.

span {
}

span {
  clear: left;
}

span {
  clear: right;
}

span {
  clear: both;
}

Un exemple d’éléments flottants en CSS.

div {
  border: 1px solid #88f;
  margin: 1em;
  padding: 2em;
  float: right;
}
div:nth-child(even) {
  float: left;
}

Syntaxe :

z-index: auto | <integer>;

Définit le « z-order » des éléments positionnés.

.un {
  position: absolute;
}
.deux {
  position: absolute;
}
.trois {
  position: absolute;
}

.un {
  position: absolute;
  z-index: 5;
}
.deux {
  position: absolute;
}
.trois {
  position: absolute;
}

.un {
  position: absolute;
  z-index: 5;
}
.deux {
  position: absolute;
  z-index: 2;
}
.trois {
  position: absolute;
}

Un exemple d’utilisation du z-index.

<div class="un">1
  <div class="deux">2</div>
  <div class="trois">3</div>
</div>
<div class="quatre">4
  <div class="cinq">5</div>
</div>

.un {
  z-index: 1;
}
.deux {
  z-index: 5;
}
.trois {
  z-index: 4;
}
.quatre {
  z-index: 1;
}
.cinq {
  z-index: 3;
}

Le modèle de boite HTML est constitué :

• d’une boite définie par width et height,
• encadrée par une marge interne, le padding,
• une bordure (border),
• et une marge externe : margin.

Par défaut, width et height définissent la zone interne au padding.

La propriété box-sizing définit ce comportement.

div {
  margin: 20px;
  padding: 20px;
  border: 5px solid #fff;
  width: 100px;
  box-sizing: content-box;
}

div {
  margin: 20px;
  padding: 20px;
  border: 5px solid #fff;
  width: 100px;
  box-sizing: border-box;
}

Le débordement intervient lorsqu’une boite est trop petite pour son contenu, en x, y ou les deux.

Par défaut, le comportement est de déborder de la boite :

La propriété overflow modifie le comportement du débordement :

div {
  overflow: visible;
}

div {
  overflow: hidden;
}

div {
  overflow: scroll;
}

div {
  overflow: auto;
}

Attention, lors de la définition d’une zone « scrollable », une erreur classique consiste à oublier que la taille de la zone doit-être fixée.

Le module « flexbox », est un modèle unidimensionnel permettant d’organiser les éléments d’un conteneur en spécifiant :

• la distribution,
• l’espacement
• et l’alignement.

Il permet aussi d’agir sur chaque élément pour spécifier comment il doit occuper l’espace.

Le module apparaît en 2009 et après plusieurs itérations, il est stabilisé depuis 2016. Aujourd’hui, il est supporté par la plupart des navigateurs.

Le module s’applique à un conteneur et ses éléments fils sont positionnés.

.conteneur {
  display: flex; /* or inline-flex */
}

<div class="conteneur">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Le module « flexbox » étant unidimensionnel et l’interface bidimensionnel, il faut choisir un axe principal (row par défaut) :

.conteneur {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

.conteneur {
  display: flex;
}

.conteneur {
  display: flex;
  flex-direction: row;
}

.conteneur {
  display: flex;
  flex-direction: column;
}

.conteneur {
  display: flex;
  flex-direction: row-reverse;
}

.conteneur {
  display: flex;
  flex-direction: column-reverse;
}

La distribution des éléments est réalisée sur l’axe principal (flex-start par défaut) :

.conteneur {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

.conteneur {
  display: flex;
}

.conteneur {
  display: flex;
  justify-content: flex-start;
}

.conteneur {
  display: flex;
  justify-content: flex-end;
}

.conteneur {
  display: flex;
  justify-content: center;
}

.conteneur {
  display: flex;
  justify-content: space-between;
}

.conteneur {
  display: flex;
  justify-content: space-around;
}

.conteneur {
  display: flex;
  justify-content: space-evenly;
}

L’alignement des éléments est réalisé sur l’axe secondaire (stretch par défaut) :

.conteneur {
  display: flex;
  align-items: stretch | flex-start | flex-end | center | baseline;
}

.conteneur {
  display: flex;
}

.conteneur {
  display: flex;
  align-items: stretch;
}

.conteneur {
  display: flex;
  align-items: flex-start;
}

.conteneur {
  display: flex;
  align-items: flex-end;
}

.conteneur {
  display: flex;
  align-items: center;
}

.conteneur {
  display: flex;
  align-items: baseline;
}

Par défaut, les éléments sont alignés sur une ligne (nowrap par défaut) :

.conteneur {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

.conteneur {
  display: flex;
}
.conteneur > * {
  width: 3em;
}

.conteneur {
  display: flex;
  overflow: hidden;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap-reverse;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

Par défaut, les lignes sont distribuées régulièrement sur l’axe secondaire (normal par défaut) :

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-content: normal | stretch | flex-start | flex-end | center | baseline | space-between | space-around | space-evenly;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-content: normal;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: normal
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: stretch;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-end;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: center;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: baseline;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-between;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-evenly;
}
.conteneur > * {
  width: 3em;
  flex-shrink: 0;
}

L’espacement entre les éléments peut être géré à l’aide de gap :

.conteneur {
  display: flex;
  gap: 1em;
}

.conteneur {
  display: flex;
  gap: 1em 2em; /* row-gap column-gap */
}

.conteneur {
  display: flex;
  row-gap: 1em;
  column-gap: 2em;
}

L’alignement peut être spécifié par élément :

.conteneur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.conteneur > *:nth-child(even) {
  align-self: stretch;
}
.conteneur > *:nth-child(2) {
  align-self: center;
}

Il est possible de donner l’indice d’un élément dans son conteneur (0 par défaut) :

.conteneur {
  display: flex;
  justify-content: stretch;
}
.un {
  order:-2
}
.deux, .trois {
  order: 1;
}
.cinq {
  order:-1
}

<div class="conteneur">
  <div class="un">1</div>
  <div class="deux">2</div>
  <div class="trois">3</div>
  <div class="quatre">4</div>
  <div class="cinq">5</div>
</div>

flex-shrink permet de modifier la quantité de réduction à appliquer à un élément (1 par défaut) :

.deux {
  flex-shrink: 0
}

.un, .deux {
  flex-shrink: 0
}

.un {
  flex-shrink: 3
}
.deux {
  flex-shrink: 2
}

flex-grow permet de modifier la quantité de réduction à appliquer à un élément (0 par défaut) :

.deux {
  flex-grow: 1
}

.deux {
  flex-grow: 1
}
.trois {
  flex-grow: 3
}

flex est un raccourci pour flex-grow, flex-shrink et flex-basis :

flex: 0 1 auto;

flex: 1;

flex: 1 1 0;

Par défaut body et html ont leur hauteur définie pour l’affichage du contenu :

html, body {
  height: 100%;
}

De plus, body comporte par défaut des marges qui produisent l’apparition d’une barre de défilement :

html, body {
  height: 100%;
  margin: 0;
}

Permet l’ajout conditionnel de règles CSS en fonction :

• d’un type de média,
• de caractéristiques du média
• pouvant être combinés avec des opérateurs logiques.

Précise le type de périphérique, on dispose maintenant de all (défaut), print et screen.

@media print {
  ...
}

@media print, screen {
  ...
}

@media all {
  ...
}

Précise une caractéristique :

• aspect-ratio
• max-width
• min-width
• orientation
• prefers-color-scheme
• resolution
• …

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Combinent plusieurs types ou caractéristiques :

• and
• ,
• not
• only

@media screen and (min-width: 600px) and (max-width: 800px),
       screen and (min-width: 1200px) {
  body {
    background-color: lightblue;
  }
}

@media ( screen and (min-width: 600px) and (max-width: 800px) ),
       ( screen and (min-width: 1200px) ) {
  body {
    background-color: lightblue;
  }
}

@media only screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media not screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Le module « grid », est un modèle bidimensionnel permettant d’organiser les éléments d’un conteneur su une grille :

• la distribution,
• l’espacement
• et l’alignement.

Mais surtout il permet d’agir sur chaque élément pour spécifier sa position et son étirement.

Le module n’est pas encore un standard officiel, mais son brouillon est actuellement supporté par la plupart des navigateurs.

Le module s’applique à un conteneur et ses éléments fils sont positionnés.

.conteneur {
  display: grid; /* or inline-grid */
}

<div class="conteneur">
  <div>1</div>
  <!-- ... -->
  <div>5</div>
</div>

Par défaut : une colonne occupant tout l’espace du conteneur et une ligne supplémentaire est générées pour chaque élément.

<div class="conteneur">
  <div>1</div>
  <!-- ... -->
  <div>5</div>
</div>

.conteneur {
  display: grid;
}

.conteneur {
  display: grid;
  grid-template-columns: 50px 100px;
}

.conteneur {
  display: grid;
  grid-template-columns: 50px 100px;
  grid-template-rows: 30px 60px
}

les dimensions peuvent être définies par :

• une dimension CSS : px, em, %…
• une fraction de l’espace disponible : fr
• le comportement automatique : auto

<div class="conteneur">
  <div>1</div>
  <!-- ... -->
  <div>6</div>
</div>

<div class="conteneur">
  <div>1</div>
  <!-- ... -->
  <div>long</div>
</div>

.conteneur {
  display: grid;
  grid-template-columns: 50px 3em 50px;
  grid-template-rows: 2em 50%;
}

.conteneur {
  display: grid;
  grid-template-columns: 25px 1fr 2fr;
  grid-template-rows: 3fr 1fr;
}

.conteneur {
  display: grid;
  grid-template-columns: 25px auto auto;
  grid-template-rows: 25px auto;
}

<div class="conteneur">
  <div>1</div>
  <!-- ... -->
  <div>7</div>
</div>

.conteneur {
  display: grid;
  grid-template-rows: 50px 50px;
  grid-template-columns: 1fr 1fr;
}

.conteneur {
  display: grid;
  grid-template-rows: 50px 50px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 30px;
}

.conteneur {
  display: grid;
  grid-template-rows: 50px 50px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 30px;
  grid-auto-flow: row;
}

.conteneur {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
}

.conteneur {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 30px;
}

.conteneur {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 50px 80px;
}

CSS propose la fonction minmax(min, max) pour intéragir avec les dimensions :

.conteneur {
  display: grid;
  grid-template-rows: minmax(18em, auto);
}

.conteneur {
  display: grid;
  grid-template-rows: minmax(auto, 50%);
}

CSS propose la fonction repeat(nb, size) pour générer plusieurs dimentions identiques :

.conteneur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
}

L’espacement entre les éléments peut être géré à l’aide de grid-row-gap et grid-column-gap :

.conteneur {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  grid-column-gap: 1em;
}

.conteneur {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  grid-row-gap: 1em;
}

Le CSS

div {
  background-color: red;
}
div {
  background-color: blue;
}

div.a {
  background-color: red;
}
div {
  background-color: blue;
}

div div {
  background-color: red;
}
div {
  background-color: blue;
}

Le HTML

<div>
  <div class="a">bleu</div>
  <div>bleu</div>
</div>

<div>
  <div class="a">red</div>
  <div>bleu</div>
</div>

<div>
  <div class="a">red</div>
  <div>red</div>
</div>

• milliers : attribut HTML style (inline style),
• centaines : identifiants CSS,
• dizaines : classes CSS, pseudo-classes CSS ou attributs CSS,
• unités : éléments CSS ou pseudo-éléments CSS.

• BEM,
• OOCSS,
• SMACSS,
• SUITCSS,
• Atomic.

• Block : une partie structurante mais indépendante de la page. (header, menu, input)
• Element : une sous-partie, relative à un Block. (header title, menu item, input caption)
• Modifier : un changement d’état ou de comportement d’un Block ou d’un Element. (disabled, highlighted, fixed, big size)

Pour renforcer la réutilisation d’un Block : on évite de le positionner (position, margin, float, …).

C’est le rôle du parent ou d’un Modificateur.

<header class=".header">
  <button class="header__connection button">
    Connection
  </button>
</header>

.header {
  position: relative;
  background-color: #999;
}
.header__connection {
  position: absolute;
  top: 5px;
  right: 5px;
}
.button {
  border: 2px solid #78a;
}

Modification CSS à l’aide de JavaScript.

Pour accéder à des éléments de la page HTML :

const element = document.querySelector(".menu");

const element = document.querySelector(".header .button.connection");

const elements = document.querySelectorAll(".menu");