CSS (Cascading Style Sheets) est un langage de feuilles de style qui permet de définir la présentation des documents HTML.
Au-delà des styles de base comme les couleurs, les polices et les marges, CSS offre des fonctionnalités avancées qui permettent de créer des designs plus complexes et interactifs. Nous allons donc explorer quelques-uns des concepts avancés de CSS qui sont essentiels pour les développeurs web modernes.
Flexbox, ou Flexible Box, est un modèle de mise en page CSS qui permet de disposer facilement des éléments dans une direction principale (horizontale ou verticale) et de les aligner de manière flexible. Il est particulièrement utile pour créer des mises en page réactives et flexibles, adaptées à différents types d'écrans et de tailles de contenu.
Flexbox est conçu pour être une solution plus efficace et plus puissante pour la mise en page, en comparaison avec les méthodes traditionnelles comme float et position. Il permet de créer des mises en page complexes avec moins de code et de facilité.
Pour utiliser Flexbox, vous devez d'abord activer le mode Flexbox sur un élément. Cela se fait en définissant la propriété display de cet élément à flex ou inline-flex.
.container {
display: flex;
}
row, ce qui signifie que les éléments sont disposés horizontalement.column, ce qui signifie que les éléments sont empilés verticalement.Vous pouvez changer la direction principale en utilisant la propriété flex-direction.
.container {
display: flex;
flex-direction: column; /* Les éléments sont disposés verticalement */
}
Vous pouvez utiliser les propriétés justify-content et align-items pour contrôler l'alignement des éléments.
.container {
display: flex;
justify-content: space-between; /* Espacement égal entre les éléments */
align-items: center; /* Alignement vertical des éléments au centre */
}
Les éléments flexibles (flex items) sont les enfants directs d'un conteneur flex. Vous pouvez contrôler leur taille, leur ordre et leur alignement en utilisant différentes propriétés flex.
.item {
flex: 1; /* L'élément prendra tout l'espace disponible */
order: 2; /* L'ordre de l'élément dans le conteneur */
}
Par défaut, tous les éléments flexibles sont disposés sur une seule ligne. Vous pouvez changer ce comportement en utilisant la propriété flex-wrap.
.container {
display: flex;
flex-wrap: wrap; /* Les éléments se déplaceront sur plusieurs lignes si nécessaire */
}
Après avoir exploré Flexbox, le prochain concept avancé de CSS que nous allons couvrir est Grid Layout.
Contrairement à Flexbox, qui est principalement axé sur une dimension (ligne ou colonne), Grid Layout est conçu pour gérer à la fois les lignes et les colonnes, permettant une mise en page plus complexe et structurée.
Grid est un modèle de mise en page CSS qui permet de créer des mises en page complexes avec des colonnes et des lignes. Il est particulièrement utile pour créer des designs de page sophistiqués et responsifs.
Pour utiliser Grid Layout, vous devez d'abord activer le mode Grid sur un élément. Cela se fait en définissant la propriété display de cet élément à grid ou inline-grid.
.container {
display: grid;
}
Avec Grid, vous pouvez définir explicitement le nombre de colonnes et de lignes, ainsi que leur taille, en utilisant les propriétés grid-template-columns et grid-template-rows.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Trois colonnes de largeurs différentes */
grid-template-rows: auto 100px; /* Deux lignes, la première s'ajuste au contenu, la seconde est de 100px */
}
Vous pouvez placer les éléments flexibles dans des cellules spécifiques en utilisant les propriétés grid-column et grid-row.
.item {
grid-column: 2 / 3; /* L'élément occupe la deuxième colonne */
grid-row: 1 / 3; /* L'élément occupe les deux premières lignes */
}
Grid offre également des propriétés pour contrôler l'espacement entre les lignes et les colonnes (grid-gap), ainsi que l'alignement des éléments (justify-items, align-items).
.container {
display: grid;
grid-gap: 10px; /* Espacement de 10px entre les lignes et les colonnes */
justify-items: center; /* Alignement horizontal des éléments au centre */
align-items: start; /* Alignement vertical des éléments en haut */
}
Grid permet également de créer des mises en page flexibles et répétitives en utilisant les unités fr (fraction) et auto.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Trois colonnes de largeur égale */
grid-template-rows: auto; /* Lignes qui s'ajustent au contenu */
}
Grid est un outil puissant pour la création de mises en page complexes et structurées. En combinant les concepts de base de Grid avec ceux de Flexbox, vous pourrez créer des designs responsifs qui s'adaptent à différents types d'écrans et de contenu.
Les animations CSS sont définies à l'aide de @keyframes, qui spécifie les étapes de l'animation, et de la propriété animation, qui applique l'animation à un élément.
Pour créer une animation, vous commencez par définir les étapes de l'animation avec @keyframes. Chaque étape est définie par un pourcentage, qui représente le moment de l'animation.
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
Dans cet exemple, l'animation change la couleur de fond de l'élément de rouge à vert en passant par le jaune et le bleu.
Pour appliquer l'animation à un élément, vous utilisez la propriété animation et spécifiez le nom de l'animation, la durée, le timing-function (pour contrôler la vitesse de l'animation), et d'autres propriétés comme le délai et le nombre d'itérations.
.animated-element {
animation-name: example;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
}
Dans cet exemple, l'animation est appliquée à .animated-element, avec une durée de 4 secondes, une fonction de timing linéaire, un délai de 2 secondes avant le début de l'animation, et elle s'exécute indéfiniment.
Bien que les animations CSS soient plus puissantes et flexibles, les transitions CSS sont souvent plus simples à utiliser pour des changements d'état simples. Les transitions permettent de créer des changements d'état d'un élément de manière fluide.
.button {
background-color: blue;
color: white;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: red;
}
Dans cet exemple, la couleur de fond du bouton change de bleu à rouge de manière fluide lorsque l'utilisateur passe la souris dessus.
Les transitions CSS sont utilisées pour animer les changements de propriétés CSS sur une durée spécifiée. Elles sont particulièrement utiles pour créer des effets subtils et interactifs, tels que le survol d'un bouton ou l'ouverture d'un menu déroulant.
Pour appliquer une transition à un élément, vous utilisez la propriété transition sur cet élément. Vous pouvez spécifier la propriété à animer, la durée de l'animation, le timing-function (pour contrôler la vitesse de l'animation), et d'autres propriétés comme le délai avant le début de l'animation.
.button {
background-color: blue;
color: white;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: red;
}
Dans cet exemple, la couleur de fond du bouton change de bleu à rouge de manière fluide lorsque l'utilisateur passe la souris dessus. La transition dure 0.5 seconde et utilise une fonction de timing ease, qui ralentit l'animation vers la fin.
La propriété transition-property permet de spécifier quelles propriétés CSS doivent être animées. Vous pouvez animer plusieurs propriétés en les séparant par des virgules.
.button {
transition-property: background-color, color;
transition-duration: 0.5s;
transition-timing-function: ease;
}
Dans cet exemple, la couleur de fond et la couleur du texte du bouton changent de manière fluide.
s) ou millisecondes (ms).linear, ease, ease-in, ease-out, et ease-in-out..button {
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
Dans cet exemple, l'animation commence et se termine lentement, avec une vitesse moyenne au milieu.
La propriété transition-delay permet de spécifier un délai avant le début de l'animation.
.button {
transition-delay: 2s;
}
Dans cet exemple, l'animation commence 2 secondes après que l'utilisateur ait passé la souris sur le bouton.
Les media queries sont utilisées pour appliquer des styles CSS conditionnellement, en fonction de certaines conditions, comme la largeur de l'écran, la hauteur de l'écran, l'orientation de l'écran, et d'autres caractéristiques de l'appareil.
La syntaxe de base d'une media query est @media suivie d'une condition et d'un bloc de styles CSS.
@media (max-width: 600px) {
/* Styles CSS pour les écrans de 600px ou moins */
}
Dans cet exemple, les styles CSS à l'intérieur du bloc seront appliqués uniquement si la largeur de l'écran est de 600px ou moins.
width) : Applique les styles si la largeur de l'écran correspond à la condition.height) : Applique les styles si la hauteur de l'écran correspond à la condition.portrait ou landscape).@media (orientation: portrait) {
/* Styles pour les écrans en mode portrait */
}
@media (min-resolution: 2dppx) {
/* Styles pour les écrans avec une résolution de 2 dots par pixel ou plus */
}
Vous pouvez combiner plusieurs conditions dans une seule media query en utilisant and.
@media (min-width: 600px) and (max-width: 1200px) {
/* Styles pour les écrans entre 600px et 1200px de largeur */
}
Après avoir exploré les concepts avancés de CSS tels que Flexbox, Grid Layout, les animations, les transitions, et les media queries, il est important de se tenir au courant des dernières tendances et pratiques en matière de CSS.
{% hint style="info" %}
Les technologies web évoluent rapidement, et les développeurs doivent constamment s'adapter pour rester compétitifs et créer des sites web modernes et performants.
Les variables CSS permettent de stocker des valeurs spécifiques pour une utilisation ultérieure. Elles peuvent être utilisées pour stocker des couleurs, des tailles de police, des espacements, et d'autres valeurs réutilisables, ce qui rend le code plus propre et plus facile à maintenir.
:root {
--main-color: #06c;
--secondary-color: #f06;
}
body {
background-color: var(--main-color);
color: var(--secondary-color);
}
Bien que Flexbox et Grid Layout soient souvent utilisés séparément, ils peuvent être combinés pour créer des mises en page complexes et flexibles. Par exemple, vous pouvez utiliser Grid pour la mise en page globale et Flexbox pour les éléments internes.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
Les CSS Custom Properties, également connues sous le nom de variables CSS, permettent de stocker des valeurs spécifiques pour une utilisation ultérieure.
Elles peuvent être utilisées pour stocker des couleurs, des tailles de police, des espacements, et d'autres valeurs réutilisables, ce qui rend le code plus propre et plus facile à maintenir.
:root {
--main-color: #06c;
--secondary-color: #f06;
}
body {
background-color: var(--main-color);
color: var(--secondary-color);
}
calc()La fonction calc() permet de réaliser des calculs directement dans les feuilles de style CSS. Cela peut être particulièrement utile pour les calculs de taille, de positionnement, et d'autres valeurs qui dépendent de variables ou de valeurs dynamiques.
.container {
width: calc(100% - 20px);
}
Les préfixes de fournisseurs sont des extensions de propriétés CSS spécifiques à un navigateur, utilisées pour assurer la compatibilité entre les navigateurs lors de l'utilisation de certaines propriétés CSS qui ne sont pas encore standardisées ou qui sont encore en cours de développement.
Chaque navigateur a son propre préfixe :
-webkit- pour Chrome et Safari-moz- pour Firefox-ms- pour Internet Explorer et Edge-o- pour Opera.Par exemple, si vous souhaitez utiliser une propriété CSS qui n'est pas encore standardisée, vous devrez l'ajouter avec le préfixe approprié pour chaque navigateur que vous souhaitez prendre en charge. Attention, cela peut rendre le code CSS plus encombrant et plus difficile à gérer.
.element {
-webkit-transform: rotate(30deg); /* Pour Chrome et Safari */
-moz-transform: rotate(30deg); /* Pour Firefox */
-ms-transform: rotate(30deg); /* Pour Internet Explorer et Edge */
-o-transform: rotate(30deg); /* Pour Opera */
transform: rotate(30deg); /* Pour les navigateurs qui supportent la propriété sans préfixe */
}
Voici un exemple pratique de l'utilisation de plusieurs de ces pratiques modernes de CSS :
:root {
--main-color: #06c;
--secondary-color: #f06;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-color);
color: var(--secondary-color);
}
.item:hover {
background-color: var(--secondary-color);
color: var(--main-color);
}
Dans cet exemple, nous utilisons des variables CSS pour les couleurs, Grid Layout pour la mise en page, et Flexbox pour l'alignement des éléments. Nous avons également ajouté une interaction de survol pour changer les couleurs.
Les pratiques modernes de CSS, telles que l'utilisation de variables CSS, la combinaison de Grid et Flexbox, et l'utilisation de calc(), permettent de créer des designs plus flexibles, plus maintenables, et plus performants. En restant à jour avec les dernières tendances et en utilisant des outils comme Autoprefixer, vous pouvez créer des sites web qui sont à la fois modernes et compatibles avec une large gamme de navigateurs.
Cette formation est proposée par Deladev, studio web de Loïc D. — création de sites et d'applications, accompagnement et formation sur mesure.
Les projets réalisés · Prestations et tarifs · Le blog tech · Me contacter
Écrite par Loïc D. avec l'assistance de Claude (Anthropic) — un travail à deux.
© 2026 Deladev — publiée sous licence CC BY-NC-ND 4.0. Vous pouvez la lire, y renvoyer par un lien, la partager et la citer en créditant la source. La revendre, l'utiliser dans une prestation ou une formation payante, la republier même partiellement ailleurs, en diffuser une version modifiée ou l'exploiter pour entraîner un modèle d'IA nécessitent une autorisation écrite — pour un usage interne en entreprise, c'est souvent oui, il suffit de demander.