Résumé du CSS

13 mai 2024

Crédit photo : Ferenc Almasi sur Unsplash

Sommaire

Cet article est un résumé du langage CSS.

Une référence complète des balises et de leur utilisation se trouve sur le MDN.

1. Généralités

CSS est un langage complémentaire du HTML, destiné à décrire le style et la mise en forme d’un document.

L’ajout de styles CSS peut se faire de trois façons :

Avec une feuille de style CSS externe que l’on relie dans la balise <head> à l’aide de :

<link rel="stylesheet" href="styles.css" />

Avec une feuille de style interne, délimitée par des balises <style> placée dans le <head> de la page.
Directement dans une balise HTML avec l’attribut style. Cette troisième option est déconseillée.

2. Format d’une règle CSS

Les règles CSS ont la forme suivante :

selecteur {
        propriété1: valeur1;
        propriété2: valeur2;
        ...
}

Où selecteur est un sélecteur CSS permettant de cibler des éléments HTML, propriétéN est une propriété CSS (c’est un dire une caractéristique de style modifiable) et valeurN la valeur à donner à la propriété pour les éléments ciblés.

Les propriétés et les valeurs ne sont pas sensibles à la casse. Si une propriété est inconnue (ou on prise en charge par le moteur CSS), elle est simplement ignorée. Le CSS ne produit jamais d’erreur.

On peut insérer des commentaires dans le CSS en les débutant par /* et en les terminant par */.

Les espaces non significatifs (espaces, tabulations, RC…) sont ignorés dans le CSS, tout comme en HTML.

Il est également possible d’encadrer des groupes de règles avec une expression en @ (par exemple @media pour rendre ces règle conditionnelles).

Certaines valeurs peuvent être des résultats de fonctions plutôt que de simples valeurs.

Avant d’être appliquées à un document, toutes les règles CSS sont regroupées en utilisant deux règles : la cascade et la spécificité.

La règle de cascade indique que quand deux règles ont le même sélecteur, elles cumulent leurs propriétés. Quand deux valeurs différentes sont définies pour la même propriété, c’est la dernière qui est utilisée.

La règle de spécificité détermine l’ordre d’application entre plusieurs règles quand leurs sélecteurs s’appliquent tous à une balise HTML donnée. Le calcul de la spécificité se fait avec un triplet de valeurs : ID-CLASS-ELEMENT.

ID : incrémenté de 1 pour chaque ID correspondant à l’élément à styler dans la règle
CLASS : incrémenté de 1 pour chaque classe, sélecteur d’attribut ou pseudo-classe correspondant à l’élément à styler dans la règle
ELEMENT : incrémenté de 1 pour chaque élément HTML ou pseudo-élément correspondant à l’élément à styler dans la règle A la fin, la règle avec le triplet de plus grande valeur l’emporte et est appliquée.

En plus de cette règle, les styles inline emportent toujours la plus grande spécificité et sont toujours appliqués prioritairement.

Enfin, le mot-clé !important permet de passer outre toutes ces règles et de forcer une valeur spécifique pour une propriété. (Note : il est préférable d’éviter d’utiliser ce mot clé).

Une troisième règle, l’héritage s’applique à certaines propriétés. Par exemple, la couleur d’un paragraphe sera automatiquement héritées par les balises contenues dans celui-ci alors qu’une balise de taille ne sera pas héritée.

L’héritage peut être contôlé par 5 valeurs spécifiques qui peuvent s’appliquer à toutes les propriétés :

inherit : indique que la propriété héritera de son parent.
initial : indique que la propriété prendra sa valeur initiale
revert : indique que la propriété prendra la valeur par défaut définie par le navigateur
revert-layer : indique que la propriété prendra la valeur définie dans la couche de cascade (cascade layer) précédente (voir le selecteur @layer)
et unset indique que la propriété reviendra à sa valeur naturelle (hérité ou initial selon les propriétés).

3. Sélecteurs CSS

Les sélecteurs indiquent à quelles balises s’appliquent une règle CSS.

Pour appliquer les mêmes règles CSS à plusieurs sélecteurs, il suffit d’en faire une liste séparée par des virgules. Par exemple :

h1, h2 {
    background-color: blue;
}

Attention : lors de l’utilisation d’une liste, si l’un des sélecteurs est syntaxiquement invalide, l’ensemble de la liste est ignorée.

3.1 Sélecteurs simples

un élément HTML (également appelé un sélecteur de type)
une classe : il faut faire précéder le nom de la classe par un point
un id : il faut faire précéder le nom de l’id par un #
le sélecteur universel (*) : il cible toutes les balises

3.2 Sélecteurs d’attributs

Ils ciblent un sélecteur uniquement s’il possède un attribut particulier ou même une valeur spécifique pour un attribut.

Les sélecteurs posibles sont :

[attribut] : correspond aux éléments possédant l’attribut. Exemple : a[title] s’applique aux balises a qui ont un attribut title.
[attribut=valeur] : correspond aux éléments possédant l’attribut dont la valeur est strictement égale à la valeur indiquée. Exemple : a[href="https://exemple.com"] s’applique aux balises a qui ont un attribut href valant exactement https://exemple.com.
[attribut~=valeur] : correspond aux éléments possédant l’attribut dont la valeur contient la valeur indiquée (dans une liste de valeurs séparée par des espaces). Exemple : p[class~="maClasse"] s’applique aux balises p qui ont un attribut class qui contient au moins maClasse.
[attribut|=valeur] : correspond aux éléments possédant l’attribut dont la valeur commence par la valeur indiquée (dans une liste de valeurs séparée par des traits d’union, typiquement les préfixes de langue). Exemple : div[lang|="en"] s’applique aux balises div qui ont un attribut lang qui commence par en, c’est à dire toutes les variantes de l’anglais.
[attribut^=valeur] : correspond aux éléments possédant l’attribut dont la valeur commence la valeur indiquée. Exemple : p[class^="box-"] s’applique aux balises p qui ont un attribut class qui commence par box-.
[attribut$=valeur] : correspond aux éléments possédant l’attribut dont la valeur finit la valeur indiquée. Exemple : p[class^="-box"] s’applique aux balises p qui ont un attribut class qui finit par box-.
[attribut*=valeur] : correspond aux éléments possédant l’attribut dont la valeur contient la valeur indiquée. Exemple : p[class*="box"] s’applique aux balises p qui ont un attribut class qui contient box.

La mise en correspondance est sensible à la casse par défaut. Pour la rendre insensible, il faut ajouter i avant le cochet fermant.

3.3 Pseudo classes et pseudo éléments

Les pseudo classes sont précédées de deux points et précisent un état particulier. Ce sont :

:active : élément activé (=cliqué généralement) par l’utilisateur
:any-link : élément source d’un lien (a et area généralement)
:autofill : élément input, uniquement s’il a été rempli automatiquement par le navigateur
:checked : sélecteur ou interrupteur actuellement sélectionné
:default : élément par défaut dans un groupe (ex : valeur par défaut d’un sélecteur)
:defined : élément défini (soit dans le HTML, soit dynamiquement)
:dir(ltr|rtl) : élément dont le sens de lecteur est gauche vers la droite (ltr) ou droite vers la gauche (rtl).
:disabled : élément désactivé
:empty : élément vide (sans enfant dans le DOM)
:enabled : élément actif (contraire de :disabled)
:first : utilisé avec @page pour correspondre à la première page d’un document
:first-child : premier enfant dans le DOM
:first-of-type : premier enfant de ce type dans le DOM
:focus : élément ayant reçu le focus
:focus-visible : élément ayant reçu le focus et le focus est visible
:focus-within : élément ayant reçu le focus (ou l’un de ses fils)
:fullscreen : élément en plein écran
:future() : élément apparaissant entièrement après (temporellement) un autre élément
:has(selecteur CSS) : élément possédant un fils qui correspond au sélecteur
:host : élément hôte d’un shadow DOM
:host-context(sélecteur CSS) : élément hôte d’un shadow DOM s’il est le fils d’un élément qui correspond au sélecteur
:host() : élément hôte d’un shadow DOM s’il correspond au sélecteur
:hover : élément survolé
:in-range : élément dont la valeur est comprise entre les attributs min et max (applicable uniquement aux éléments qui possèdent ces attributs)
:indeterminate : élément de valeur indéterminée (interrupteurs trois états)
:invalid : élément dont la valeur saisie est invalide au regard du type spécifié
:is(sélecteur CSS) : éléments qui correspondent au sélecteur indiqué
:lang(id de langue) : éléments dont la langue correspond à celle indiquée
:last-child : dernier enfant dans le DOM
:last-of-type : dernier enfant de ce type dans le DOM
:left : utilisé avec @page pour correspondre aux pages de gauche d’un document
:link : élément correspondant à un lien qui n’a pas encore été visité
:local-link : élément correspondant à un lien dans la page elle-même
:modal : élément modal (ex : élément dialog ouvert avec showModal())
:not(sélecteur CSS) : éléments qui ne correspondent pas au sélecteur indiqué (contraire de :is())
:nth-child(odd|even|An+B) : élément s’il est le n-ième enfant dans le DOM (odd sélectionne tous les impairs, even tous les pairs, la notation An+B indique les An+B ième éléments où A et B sont des entiers relatifs et n itère les valeurs entières supérieures ou égales à zéro). Remarque : odd est équivalent à 2n+1.
:nth-last-child(odd|even|An+B) : élément s’il est le n-ième enfant dans le DOM en partant de la fin
:nth-last-of-type(odd|even|An+B) : élément s’il est le n-ième enfant du type dans le DOM en partant de la fin
:nth-of-type(odd|even|An+B) : élément s’il est le n-ième enfant du type dans le DOM
:only-child : élément s’il est le seul fils dans le DOM
:only-of-type : élément s’il est le seul fils de ce type dans le DOM
:optional : élément <input>, <select> ou <textarea> qui n’a pas l’attribut required
:out-of-range : élément dont la valeur est en dehors de limites (contraire de :in-range)
:past : contraire de :future
:paused : élément audio au vidéo en pause
:picture-in-picture : élément vidéo affiche en picture in picture
:placeholder-shown : élément <input> ou <textarea> qui affiche actuellement son texte d’indication
:playing : élément audio ou vidéo en cours de lecture
:read-only : élément qui n’est pas modifiable par l’utilisateur (généralement sur les <input>)
:read-write : élément qui est modifiable par l’utilisateur
:required : élément <input>, <select> ou <textarea> qui possède l’attribut required
:right : utilisé avec @page pour correspondre aux pages de droite d’un document
:root : racine du document (équivalent au sélecteur de type html mais plus spécifique)
:target : élément dont l’ID correspond au fragment spécifié dans l’URL (le fragment est la prtie à la fin de l’URL après le #)
:valid : élément dont la valeur saisie est valide au regard du type spécifié
:visited : élément de type lien ayant déjà été visité
:where(sélecteur CSS) : identique à :is mais moins spécifique

Les pseudo éléments sont précédés de deux fois deux points et précisent des portions de l’élément. Ce sont :

::after : crée un pseudo élément qui sera le dernier fils de l’élément spécifié (utilisé par exemple pour insérer automatiquement une icone après les liens avec l’attribut content)
::backdrop : représente l’arrière plan d’un élément quand il est affiché en mode plein écran (ou avec l’API dialog)
::before : crée un pseudo élément qui sera le premier fils de l’élément spécifié
::cue : correspond au texte de sous-titrage d’un élément vidéo
::cue-region : correspond à la zone de sous-titrage d’un élément vidéo
::file-selector-button : correspond au bouton d’une balise <input type="file">
::first-letter : correspond à la première lettre de la première ligne d’un élément de type bloc, uniquement s’il n’est pas précédé d’une autre balise
::first-line : correspond à la première ligne d’un élément de type bloc
::marker : correspond au marqueur d’une liste (les puces d’une balise <li> par exemple)
::placeholder : correspond au texte d’indication d’une balise <input> ou <textarea>
::selection : correspond au texte sélectionné

3.4 Combinaisons

Les combinaisons permettent de spécifier plusieurs sélecteurs et d’indiquer une relation entre eux. Ce sont :

La descendance (symbolisée par un espace). Elle indique que la règle CSS s’appliquera à une balise si elle est fille à n’importe quelle niveau d’une autre balise. Par exemple body article p s’appliquera aux balises <p> qui sont filles d’une balise <article> si celles-ci sont elles-même filles du <body>.
La filiation : (symbolisée par >). Elle indique que le deuxième sélecteur devra être un fils immédiat du premier. Par exemple article > p s’appliquera aux balises <p> qui sont immédiatement contenues dans une balise <article>.
La fraternité immédiate (symbolisée par +). Elle indique que la règle s’appliquera à une balise si elle est la soeur immédiate d’une autre balise. Par exemple h1 + p s’appliquera à la première balise <p> qui suit immédiatement une balise <h1>.
La fraternité lointaine (symbolisée par ~). Elle indique que la règle s’appliquera à une balise si elle est la soeur d’une autre balise (même s’il y a d’autres balises entre elles). Par exemple h1 ~ p s’appliquera à toutes les balises <p> qui suivent une balise <h1>.
Plusieurs classes : pour cibler une balise qui porte plusieurs classes, il suffit de chaîner les classes (l’ordre n’a pas d’iportance) dans le sélecteur CSS.

Tous les mixs de sélecteurs et de combinaisons sont possibles.

4. Le modèle des boites

En CSS, tous les éléments sont contenus dans des boites. La façon dont cette boite est mise en page est déterminée par son attribut CSS display (ou par sa valeur par défaut ou l’héritage).

Il y a deux types de boites : inline et block. Ces deux modèles déterminent comment les boites se comportent dans une mise en page.

Les éléments de type display: block (par exemple les balises <div> ou <h1>) :

sont représentés sur une nouvelle ligne
respectent les propriétés CSS height et width
les propriétés padding, margin et border éloignent les autres éléments de cette boite
la boite va s’étendre en largeur pour occuper la taille de son parent (sauf si une largeur est spécifiée)

Les éléments de type display: inline (par exemple les balises <span>) :

sont représentés dans le flux de texte en cours
ne tiennent pas compte des propriétés height et width
les propriétés padding, margin et border s’appliquent en vertical mais n’éloignent pas les autres éléments de cette boite
les propriétés padding, margin et border s’appliquent en horizontal et éloignent les autres éléments de cette boite

Il existe d’autres valeurs de display : inline-block, flex ou grid. Ils seront détaillés plus loin.

Chaque boite est constituée d’un certain nombre de parties :

le contenu : c’est la partie que affiche les éléments fils de cette balise
la bordure : c’est le cadre autour du contenu
le padding : c’est l’espace entre le contenu et la bordure
la marge : c’est l’espace entre la bordure et les éléments adjacents

Toutes les propriétés de ces éléments peuvent être définis par les propriétés correspondantes :

border | margin | padding
left | top | right | bottom
width | style | color

Un autre modèle de calcul des tailles des boites est applicable en utilisant l’attribut CSS box-sizing et en fixant sa valeur à boder-box. Dans ce cas, les valeurs de padding et de border sont incluses dans width et height.

5. Fonds et bordures

De nombreuses propriétés permettent de configurer les couleurs de fond et les bordures d’une boite :

background-color : couleur de fond, y compris la zone de padding de l’élément
background-image : une ou plusieurs images de fond (qui seront superposées, en utilisant leur transparence). Il est également possible de définir un dégradé de couleurs.
background-repeat : indique si le fond doit être répéré (les valeurs possibles sont no-repeat, repeat-x, repeat-you repeat)
background-size : donne une taille au fond (en largeur, en pourcentage ou avec l’un des mots clé cover ou contain)
background-position : place le fond par rapport au conteneur selon l’axe horizontal et vertical. Les mots-clés spécifiques top, bottom, left, rgihtet center peuvent être employés ainsi que les longueurs ou des pourcentages.
background-attachment : indique si le fond doit scroller ou non avec son élément. Les valeurs possibles sont : scroll(le fond est attaché à la bordure de l’élément et scrolle avec celle-ci), fixed (le fond est attaché au viewport et ne scrolle pas) et local (le fond est attaché au contenude l’élément et scrolle avec celui-ci).

Il existe aussi de nombreuses propriétés pour parametrer les bordures d’une boite :

border-width : l’épaisseur de la bordure
border-style : son style (none, hidden, solid, dashed…)
border-color : sa couleur
border-radius : l’arrondi au coin

Chacune de ces propriétés peut être spécialisée avec les modificateurs border-top-XX, border-bottom-XX, border-left-XX ou border-right-XX pour n’affecter qu’une seule des quatre bordures.

6. Gestion du débordement

Un débordement survient lorsqu’un contenant n’est pas assez grand pour contenir tout son contenu (par exemple une balise <div> dont la taille a été fixée et qui contient un texte trop long pour l’afficher entièrement).

En cas de débordement, on peut utiliser la propriété overflow (et ses spécialisations -xet -y) pour indiquer ce qu’il faut faire du contenu excedentaire.

Les valeurs possibles sont :

visible : le contenu excedentaire est visible et déborde de la boite
hidden / clip : le contenu excedentaire est masqué
scroll : le contenu excedentaire est coupé et un ascenseur permet de se déplacer pour le voir
auto : comportement décidé par le navigateur

7. Les unités CSS

Le CSS utilise un grand nombre d’unités différentes pour indiquer les valeurs des propriétés.

7.1 Nombres, longueurs et pourcentages

Les nombres entiers : ils n’ont pas d’unité associés. Ils sont utilisés par exemple pour indiquer le nombre de colonnes d’un élément grille (grid-column).
Les nombres (décimaux) : ils n’ont pas d’unté associés.Ils sont utilisés pour indiquer un facteur d’opacité par exemple.
Les longueurs : ils sont utilisés dans un très grand nombre d’attributs et peuvent être exprimés avec une grande variété d’unités.

Les unités absolues (à l’exception du pixel, la plupart ne sont utilisés que pour les rendus imprimables) :

cm : centimètres
mm : millimètres
Q : quart de millimètres
in : pouces (2.54cm)
pc : picas (1/6 de pouce)
pt : points (1/72 de pouce)
px : pixel (1/96 de pouce)

Les unités relatives (plus couramment utilisées pour les rendus écran car elle s’adaptent à la taille de l’affichage et au facteur de zoom de l’utilisateur) :

em : taille de la police du parent quand elle est utilisée pour donner la valeur d’une taille de police et taille de la police de l’élément lui-même dans les autres cas
ex : hauteur du glyphe “x” dans la police en cours
ch : largeur du glyph “0” dans la police en cours
rem : taille de la police de l’élément racine
lh : hauteur de ligne de l’élément
rlh : hauteur de ligne de l’élément racine
vw : 1% de la largeur du viewport
vh : 1% de la hauteur du viewport
vmin : 1% de la plus petite dimension du viewport
vmax : 1% de la plus grande dimension du viewport
Les angles : peuvent être exprimés en degrés (deg), radians (rad), grades (grad) ou nombre de tours (turn). Les angles positifs sont dans le sens horaire.
Les durées : exprimés en secondes (s) ou millisecondes (ms) et utilisées dans les animations et les transisitions
Les résolutions : utilisées dans les media-query. Elles sont exprimées en points par pouce (dpi), point par centimètre (dpcm), point par pixel (dppx ou x). NOte : les pixels CSS ont une taille fixe de 1/96 de pouce.
Les pourcentages : permettent d’indiquer une valeur relative à une autre. Ils sont exprimés avec des nombres décimaux.

7.2 Couleurs

Les couleurs peuvent être décrites d’un grand nombre de façons :

en utilisant un nom de couleur (comme blue, yellow ou transparent)
avec les composantes RGB (en utilisant la fonction rgb())
avec les composantes HSL (en utilisant la fonction hsl())

Note : rgb() et rgba() sont synonymes et acceptent toutes les deux un quatrième paramètre d’opacité. Il en est de même pour hsl() et hsla()

Et de façon moins fréquente :

avec les composantes HWB (en utilisant la fonction hwb())
avec les composantes LCH (en utilisant la fonction lch())
avec les composantes du système CIELAB (en utilisant la fonction lab())

7.3 Images

La valeur d’une image peut être spécifiées :

par une URL en utilisant la fonction url()
à l’aide du type de donnée dégradé

7.4 Positions

Les positions (utilisées par exemple dans la propriété background-position) permettent d’indiquer un emplacement relativement à la boite de l’élément en cours.

On utilise pour cela un ou deux mot-clé parmi : center, top, bottom, left et right complété d’un offset optionnel indiquant le pourcentage (ou la distance) dans les dimensions horitonzales et verticales respectivement..

7.5 Chaînes et identificateurs

Certaines valeurs (content par exemple) peuvent contenir des chaînes. Elles sont simplement placées entre guillemets.

7.6 Fonctions

Enfin, certaines valeurs peuvent être exprimées à l’aide de fonctions CSS (comme rgb()ou la fonction calc() qui permet de réaliser des opérations arithmétiques simples).

7.7 Tailles

Certains éléments HTML ont une tailles propres (les images par exemple), d’autres non (les div ou les span). On peut utiliser les unités CSS décrites en 7.1 pour donner une taille à un élément avec les attributs HTML width et height .

Cette taille peut être fixe mais il faut prendre garde aux problème de débordement.

Cette taille peut également être un pourcentage en restant attentif à quel élément le pourcentage se rapporte. Ne pas oublier que le pourcentage est défini par rapport à la taille qu’aurait l’élément sans indication de taille. Le pourcentage n’a de sens que pour les balises qui s’étendent (comme les div). ATTENTION : dans le cas de l’utilisation d’un pourcentage pour spécifier une taille de marge ou de padding, le pourcentage est relatif à la taille inline de l’élément parent, c’est à dire sans ternir compte de ses propres marges ou padding.

On peut définir des tailles mini et maxi avec les attributs min-height, max-height, min-widthet max-width.

Pour les images (et certaines autres balises : video…), on peut utiliser la propriété object-fit pour indiquer le mode de mise à l’échelle : fill, cover, contain…

8. CSS pour les textes

8.1 Textes

La forme du texte peut être affecté par de nombreuses propriétés CSS.

color : une couleur HTML (voir ci-dessus).
font-family : un certain nombre de famille de polices de caractères sont considérées comme sûres à utilisée (c’est à dire pratiquement toujours disponibles sur la majorité des appareil). Il y a les polices ultra génériques : sans-serif, serifet monospace et les familles Arial, Courier New, Georgia, Times New Roman, Trebuchet MS et Verdana. Plutôt que de spécifier une police précise, il est possible d’indiquer une liste. Le navigateur prendra la première police effectivement disponible, dans l’ordre de la liste.
font-size : c’est avec cette propriété que l’unité de mesure emdevient utile. 1 em représente la taille de la police de l’élément conteneur. On peut donc facilement faire des contenus dont la taille est proportionnelle aux parents. De la même façon, le remest relatif à la taille de la police de l’élément racine de la page.
font-style : normal, italic, oblique ou oblique <angle>
font-weight : fixe la graisse de la police (normal, bold… ou une valeur entre 100 et 900).
text-transform: none, uppercase, lowercase, capitalize (chaque première lettre en majuscule) ou fixed-width (tous les caractères ont la même largeur).
text-decoration (contraction de text-decoration-line et text-decoration-style) pour les souligné ou les barrés.
text-shadow : fixe les ombres de texte.

La mise en page possède également ses propriétés :

text-align : left, right, center ou justify.
line-height : soit une unité de taille CSS, soit aucune unité. Dans ce dernier cas, la valeur indiquée est un multiplicateur de la taille de la police.
letter-spacing et word-spacing : fixent l’espacement entre les mots et entre les lettres dans un mot.

Et il existe de nombreuses autres propriétés de texte.

8.2 Listes

Les listes ont quelques propriétés spécifiques :

list-style-type : détermine le type de puces ou de nombres.
list-style-position : détermine la position des puces/nombres, dans la liste ou en retrait.
list-style-image : permet d’utiliser une image de puce personnalisée.

8.3 Liens

Les liens reçoivent souvent des modifications de style en utilisant les pseudo-classes hover, visited ou active.

8.4 Webfonts

En plus des polices classiques, il est possible d’inclure dans une feuille CSS des directives pour télécharger à la volée un fichier de polices de caractères. La syntaxe est la suivante :

@font-face {
  font-family: "nomDeFamille";
  src: url("fichier.woff2");
}

Le nom spécifié peut ensuite êtrre utilisé dans la propriété font-family. La plupart des navigateurs acceptent les polices au format WOFF ou WOFF2 (Web Open Font Format). Pour trouver des polices :

9. Mise en page en CSS

Au delà de la mise en forme, le CSS est également utilisé pour la mise en page des documents. Il propose pour cela plusieurs approches.

9.1 Mise en page en flux

C’est le mode de mise en page par défaut si aucune autre instruction n’est donnée. Les éléments sont placés les uns après les autres. Les éléments de type blocs occupent toutes la largeur de l’affichage, ils se retrouvent donc les uns au dessous des autres et les éléments de type inline se placent les uns à droite des autres selon leur taille et l’espace disponible. Remarque : il n’est pas possible de changer la taille des éléments inline (sauf les images).

9.2 Flexbox

Flexbox est un mécanisme de mise en page par lequel un élément conteur va positionner les éléments qu’il contient.

Pour sélectionner le conteneur chargé de la mise en page, on lui assigne l’attribut display: flex. Bien sûr des sous éléments peuvent également être des conteneur et eux-mêmes mettre en page leur propre contenu.

Le modèle de flexbox est conçu pour organiser la mise en page selon un axe (ligne ou colonne) et une direction principale (gauche à droite, droite à gauche, haut en bas ou bas en haut). Le mode de fonctionnement est choisi par l’attribut flex-directionqui peut prendre les valeurs column, row, column-reverse ou row-reverse.

Dans le conteneur flexbox, les éléments sont mis en forme en flux, les uns après les autres. Si leur taille totale est supérieure à celle du conteneur, c’est l’attribut flex-wrap qui détermine le comportement :

nowarp : les éléments débordent du conteneur
wrap : les éléments sont automatiquement mis à la ligne
wrap-reverse : comme wrapmais l’ordre des lignes est inversé

La taille relative des éléments contenus dans le flexbox est déterminé par leurs attributs flex-basis, flex-grow et flex-shrink.

flex-basis : détermine la taille initiale de l’élément, c’est soit une mesure dans une unité CSS valide, soit un nombre. Dans ce dernier cas, le nombre ramené proportionnellement à la taille totale des éléments à placer.
flex-grow : indique le facteur d’agrandissement de l’élément
flex-shrink : indique le facteur de réduction de l’élément

Généralement, on utilise l’attribut flexqui peut combiner les trois de la façon suivante :

une valeur sans unité : flex-grow (ex : flex: 2)
une valeur avec unité flex-basis (ex : flex: 50px)
deux valeurs : flex-grow flex-basis ou flex-grow flex-shrink selon que la seconde valeur a une unité ou pas
trois valeurs : flex-grow flex-shrink flex-basis

Les éléments mis en page par un conteneur flexbox peuvent également être aligné. Ça se fait avec les attributs align-items (global), align-self (pour un élément précis), et justify-content pour déterminer la position de l’ensemble des éléments dans le conteneur.

Enfin, l’ordre des éléments dans le conteneur flexbox n’est par nécessairement l’ordre du flux. Il peut être altéré en utilisant l’attribut order.

9.3 Grilles

Le système de grille CSS est un mécanisme de mise en page sur deux dimensions. Il organise le contenu selon des lignes et des colonnes separées par des espaces généralement appelés “gouttières”.

De la même façon que le flexbox, le système de mise en page des grilles s’active sur le conteneur des éléments à mettre en page. Il suffit d’ajouter l’attribut display: grid;.

Pour définir les largeurs des colonnes d’une grille, on utilise l’attribut grid-template-columns suivi d’autant de valeurs qu’on veut de colonnes. Chaque valeur peut être exprimée avec une unité CSS, la valeur auto (pour indiquer que la taille sera calculée automatiquement par le navigateur) ou avec l’unité spéciale fr. Les frreprésente une fraction de l’espace restant quand les autres tailles ont été allouées. Remarque : on peut utiliser la fonction CSS repeat pour répéter une définition de colonne comme dans grid-template-columns: repeat(3, 1fr);.. On peut également répéter des colonnes de largeur auto-fill pour indiquer à CSS d’en mettre autant que possible sur une ligne.

De la même façon, on peut définir les lignes avec l’attribut grid-template-rows.

Si les colonnes ou les lignes ne sont pas définis explicitement, CSS utilise une grille de une colonne et d’autant de lignes que nécessaire pour placer tous les éléments. On peut également défiir les tailles des colonnes et des lignes construites automatiquement avec les attributs grid-auto-columns et grid-auto-rows. Une fonction CSS utilie pour définir ces tailles est minmax qui permet d’indiquer une taille minimale et une taille maximale (comme dans : grid-auto-rows: minmax(100px, auto); qui fixe la hauteur minimale des lignes à 100 pixels mais évite les débordement en laissant en automatique la hauteur maximale).

La largeur des gouttières se fixe avec les attributs column-gap, row-gap ou gappour définir les deux à la même valeur.

Pour positionner un élément dans la grille, on dispose des attributs grid-column-start et grid-column-end (abrégés en grid-column avec les deux valeurs spéarées par un /) et grid-row-start, grid-row-end (abrégés en grid-row). Les rangs des lignes et colonnes commencent à 1. Un nombre négatif indique un comptage à partir du dernier.

On peut aussi définir une grille avec l’attribut grid-template-areas. Cet attribut contient une chaîne par ligne. Dans ces chaînes, chaque mot représente une case. Les règles de définition sont les suivantes :

chaque cellule de la grille doit être définie
pour étendre une case sur plusieurs lignes/colonnes, il faut répéter son nom
pour sauter une cellule, on utilise un point
les zones doivent être rectangulaires
les noms des zones ne doivent pas être répétés à plusieurs endroits

Un exemple :

.container {
  display: grid;
  grid-template-areas:
    "enteteCSS enteteCSS"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

#entete {
  grid-area: enteteCSS;
}

Combinés avec les media queries, le système de grille permet de faire des mises en pages qui s’adaptent toatlement en fonction de la taille de l’affichage.

9.4 Les éléments flottants

Un élément flottant est sorti du flux de mise en page et placé à côté. Le contenu des éléments suivants est décalé pour entourer l’élément flottant. Ce comportement est contrôlé par l’attribut float.

Pour empêcher que le contenu encadre l’élément flottant, on peut ajouter l’attribut clear.

9.5 Les méthodes de positionnement

Le CSS définit différentes méthodes de positionnement. On choisit la méthode utilisée pour un élément avec l’attribut CSS position dont les valeurs sont les suivantes :

static : c’est la valeur par défaut, l’élément est positionné “normalement” dans le flux du document,
relative : permet de décaler l’élément par rapport à la position qu’il aurait eu en positionnement static. Les attributs pour le décalage sont top, bottom, left et right. Par exemple top: 30px; va placer l’élément 30 pixels plus bas que le positionnement static.
absolute : l’élément est sorti du flux de mise en page et positionné à des coordonnées absolue (indiquées par top, bottom, left et right) par rapport à la boite de son élément parent.
sticky : l’élément est positionné dans le flux tant que sa position effective est supérieure à la position définie. Ensuite, il devient fixe. Par exemple un élément position: sticky; top: 30px; va se placer dans le flux mais ne scrollera pas au dessus de 30 pixels (il restera visuellement en haut de page quand on scrolle vers le bas).

Remarque : quand deux éléments se chevauchent, ils s’affichent dans l’ordre dans lequel il sont défini dans le HTML (le dernier devant). Il est possible de surcharger cet ordre avec l’attribut z-index (qui vaut 0 par défaut) en lui donnant une valeur positive pour placer un élémernt plus haut que les autres.

9.6 Mise en forme multi-colonnes

Dans un conteneur donné, il est facile de mettre en forme le texte sur plusieurs colonnes avec l’attribut column-count ou avec column-width. Le premier fixe le nombre de colonnes (leur taille est calculée automatiquement), le second fixe la largeur des colonnes (leur nombre est calculé automatiquement). L’espacement entre les colonnes est définni par l’attribut column-gap. On peut également défini une ligne de séparation entre les les colonnes avec column-rule. Un élément peut être placé, dans le flux, mais sur l’ensemble des colonnes avec l’attribut column-span: all;. Pour indiquer qu’un élément ne doit pas être positionné à cheval entre deux colonnes, on peut utiliser l’attribut break-inside: avoid;.

9.7 Responsive Web Design

Le responsive web design n’est pas une technologie en soit mais un ensemble de façon d’aborder la mise en page des documents pour proposer une lecture agréable quelle que soit la taille et la resolution d’affichage du navigateur. Elle repose en grande partie sur l’utilisation de media queries pour adapter le CSS au périphérique ainsi que sur diverses méthodes (images responsives à définitions multiples, utilisation de flexbox et/ou grid, choix de taille de polices relatives à la taille de l’affichage).

Une media query est une condition évaluée par le navigateur qui va permettre d’appliquer ou non certaines règles CSS.

Une media query a la forme suivante :

@media type and ( règles ) {
	règles CSS à appliquer
}

type peut être all (par défaut), print ou screen selon que l’on vise les écrans, l’impression ou les deux.

Les autres règles permettent de cibler des largeurs ou hauteur d’affichage :

width : valide quand la largeur est égale au paramètre
min-width : valide quand la largeur est supérieure au paramètre
maw-width : valide quand la largeur est inférieure au paramètre
de même height, min-height et max-height
orientation : vise landscape ou portrait (il s’agit de l’orientation de la vue du navigateur, pas de l’écran physique)
et beaucoup d’autres

On peut combiner les règles avec des opérations logiques :

et logique : @media screen and (min-width: 600px) and (orientation: landscape)
ou logique avec une virgule : @media (min-width: 600px), (orientation: landscape)
non logique qui s’applique à l’ensemble de la media query: @media not all and (min-width: 600px)