Game-changing CSS : les techniques pour des sites Web performants

Depuis 1996, le CSS (Cascading Style Sheets, ou feuilles de style en cascade en français) a bien évolué. D’un simple langage de description, il est devenu un véritable outil de programmation, incluant variables, imbrications et conditions. Les évolutions sont parfois si nombreuses qu’il est difficile de toutes les suivre.

J'aimerais donc vous partager ce que j'ai appris lors de la présentation de Raphaël Goetter, qui nous a parlé de CSS, de ses propriétés et de quelques bonnes pratiques toujours utiles pour un développeur backend.

Quelles sont les premières bonnes pratiques en CSS ?

#1 – Les propriétés personnalisées CSS

Parfois appelées variables, les propriétés personnalisées CSS sont des entités contenant des valeurs spécifiques utilisables à travers le document CSS où elles sont définies. Elles sont très utiles pour des raisons de maintenabilité.

Dans des projets de grande envergure, l’utilisation des variables évite les répétitions du code. Enfin, vous pouvez avoir recours à ces propriétés pour vos animations ou encore la gestion des couleurs de vos pages Web.

Tout au long de l’article, je vous partagerai des exemples d'utilisation. Voici le premier exemple : voir le code

#2 – Tester avec la règle conditionnelle : @supports

@supports est une règle conditionnelle en CSS qui vous permet de tester si le navigateur supporte une certaine propriété CSS avant de l'appliquer. Cette règle est particulièrement utile pour les fonctionnalités CSS qui ne sont pas universellement prises en charge par tous les navigateurs. En utilisant @supports, vous pouvez écrire du code qui ne sera exécuté que si le navigateur comprend et peut appliquer une propriété ou une valeur spécifique, assurant ainsi une meilleure compatibilité et une expérience utilisateur plus cohérente.

Voici un exemple d'utilisation de @supports : voir le code

#3 - Structurer votre feuille de style CSS avec la fonctionnalité Nesting

Le Nesting (ou imbrication) en CSS est une fonctionnalité qui permet d'écrire des règles CSS de manière hiérarchique, similaire à la structure des sélecteurs HTML. Cela rend le code CSS plus lisible et plus organisé. Cette fonctionnalité est particulièrement utile lorsqu'il s'agit de gérer des styles complexes avec plusieurs niveaux de profondeur.

En utilisant la fonctionnalité Nesting, vous pouvez imbriquer les règles CSS à l'intérieur des sélecteurs parents, ce qui facilite la définition des styles spécifiques pour les enfants ou les descendants de ces sélecteurs. Utiliser cette fonctionnalité réduit la répétition des sélecteurs et simplifie la maintenance du code CSS.

Voici un exemple d'utilisation : voir le code

#4 – Sélectionner avec la fonction :has()

En CSS, la fonction :has() est une pseudo-classe qui permet de sélectionner des éléments qui contiennent d'autres éléments correspondant à un sélecteur spécifié. Cette pseudo-classe est principalement utilisée pour cibler des éléments parents en fonction des éléments enfants qu'ils contiennent.

Un exemple d'utilisation de cette fonction : voir le code

#5 - Et pour finir, la pseudo-classe :scope

:scope est une pseudo-classe CSS qui fait référence à l'élément sur lequel les sélecteurs sont appliqués dans une séquence de sélecteurs. Elle permet de définir un contexte spécifique pour la recherche d'éléments à l'intérieur d'une structure HTML.

Lorsqu'elle est utilisée seule, :scope fait référence à l'élément actuel sur lequel le sélecteur est appliqué. Par exemple, si vous utilisez :scope dans un sélecteur combiné, cela signifie que la recherche des éléments cibles doit se faire à partir du niveau de l'élément sur lequel le sélecteur est appliqué.

Dernier exemple pour cette partie : voir le code

Quelles bonnes pratiques pour créer des pages Web « responsives » ?

Oui, le responsive n'est pas la chose la plus amusante à faire. Mais, il est important de s'y atteler ! Je vais donc vous présenter quelques tips qui, je l'espère, vous éviteront de vous arracher les cheveux.

#1 – Utilisez les unités de viewport

Les unités viewport sont utilisées en CSS pour dimensionner les éléments en fonction de la taille de la fenêtre du navigateur ou de l'écran de l'appareil de l'utilisateur. Elles permettent de créer des mises en page et des designs adaptatifs qui s'ajustent automatiquement en fonction de la résolution de l'écran.

Dans le langage CSS, il existe deux unités viewport principales :

• vw (Viewport Width) : cette unité représente un pourcentage de la largeur de la fenêtre d'affichage du navigateur.
  Par exemple, 1vw équivaut à 1 % de la largeur de la fenêtre. Donc, si la largeur de la fenêtre est de 1000 pixels, 1vw sera équivalent à 10 pixels.
• vh (Viewport Height) : cette unité représente un pourcentage de la hauteur de la fenêtre d'affichage du navigateur.
  Par exemple, 1vh équivaut à 1 % de la hauteur de la fenêtre. Donc, si la hauteur de la fenêtre est de 800 pixels, 1vh sera équivalent à 8 pixels.

Ces unités sont très utiles pour créer des mises en page réactives qui s'adaptent à différentes tailles d'écrans.

Voici un exemple d'utilisation : voir le code

#2 - Maitrisez Grid layout

Grid Layout (ou simplement CSS Grid) est un puissant système de mise en page basé sur une grille bidimensionnelle. Il permet de créer des mises en page complexes de manière simple et intuitive, en utilisant des lignes et des colonnes. C'est un peu comme les Flexbox, mais en mieux.

> Les bases de CSS Grid

• Conteneur de grille (ou Grid Container) : un élément HTML sur lequel la propriété display: grid ou display: inline-grid est appliquée. Ce conteneur définit le contexte de la grille.
• Éléments de grille (ou Grid Items) : les enfants directs du conteneur de grille. Ces éléments sont disposés en lignes et colonnes selon les règles définies par le conteneur de grille.
• Lignes et colonnes : le conteneur de grille est divisé en lignes horizontales et colonnes verticales. Les lignes sont définies par grid-template-rows et les colonnes par grid-template-columns.
• Zones de grille (ou Grid Areas) : des sections nommées dans la grille, permettant de positionner les éléments en utilisant des noms de zones plutôt que des lignes et colonnes.

> Les propriétés clés du CSS Grid

• display: grid : définit un élément comme conteneur de grille.
• grid-template-columns et grid-template-rows : définissent le nombre et la taille des colonnes et des lignes.
• grid-column et grid-row : positionnent les éléments de grille par rapport aux lignes de la grille.
• grid-area : définit une zone de grille nommée pour positionner des éléments.
• gap, column-gap, row-gap : définissent l'espacement entre les lignes et les colonnes.

Pour mieux comprendre, voici un nouvel exemple d'utilisation : voir le code

#3 - Et changez de style grâce aux Container Queries

Container Queries (requêtes de conteneur) est une fonctionnalité CSS qui permet de changer le style des éléments en fonction de la taille de leur conteneur parent, plutôt que la taille de la fenêtre d'affichage (viewport). Cela permet de créer des composants véritablement réactifs, dont le style peut s'adapter aux dimensions de leur parent immédiat.

> Les bases de Container Queries

• Container Query : condition qui permet d'appliquer des styles CSS lorsque les dimensions d'un conteneur parent répondent à certains critères.
• Contain Property : pour que les container queries fonctionnent, le conteneur doit utiliser la propriété contain avec la valeur size, layout, ou style.

> Les propriétés clés des Container Queries

• @container : utilisé pour définir les conditions de requête en fonction de la taille du conteneur.
• container-type : définit le type de conteneur (e.g., inline-size, block-size).
• container-name : nom de l'élément conteneur pour le ciblage des requêtes.

Découvrez un exemple d'utilisation : voir le code

Et pour l’interactivité, quelles sont les bonnes pratiques ?

Sur un site Web ou une application, l’interactivité permet de créer des expériences utilisateurs plus dynamiques et engageantes. Nous connaissons tous, :hover, :focus ou encore :active, mais savez-vous utiliser scroll snap et scroll-driven animation ? Allez, je vous explique.

#1 – La fonctionnalité Scroll snap

Toujours en CSS, Scroll Snap est une fonctionnalité qui permet de contrôler le comportement de défilement des éléments dans une boîte de défilement, en forçant les éléments à s'aligner de manière précise lorsque l'utilisateur fait défiler le contenu. Cela crée une expérience de défilement plus fluide et contrôlée, souvent utilisée dans les galeries d'images, les carrousels, ou toute autre interface nécessitant un alignement précis après le défilement.

Pour mieux comprendre, voici les bases de Scroll Snap :

• scroll-snap-type : définit le type de défilement et l'axe sur lequel le snapping se produit (x, y ou both), et le comportement du snapping (mandatory ou proximity).
• scroll-snap-align : définit comment les éléments enfants doivent s'aligner dans la zone de défilement (start, end, center, none).

Et pour la pratique, découvrez mon exemple d'utilisation : voir le code

#2 – Pilotez vos animations avec Scroll-driven animation

Scroll-driven animations sont des animations déclenchées ou contrôlées par le défilement de la page. Elles permettent de créer des effets dynamiques et interactifs en synchronisant les animations avec le mouvement de défilement de l'utilisateur.

Ces animations peuvent être implémentées en utilisant JavaScript pour écouter les événements de défilement et ajuster les propriétés CSS en conséquence.

Et voici le dernier exemple d'utilisation : voir le code

En résumé, ces tips CSS sont comme les épices dans votre plat préféré. Elles ajoutent cette petite touche spéciale qui fait toute la différence. Alors, que vous jongliez avec les sélecteurs ou que vous dansiez avec les grilles, rappelez-vous toujours que le code, c'est comme la mode : il suffit parfois d'un petit ajustement pour tout changer.

Et si cet article vous a plu, je vous propose de poursuivre votre lecture avec d’autres retours sur les conférences « Afup day 2024 » de Nancy :

• Architecture à mettre en place pour un SaaS en fonction du client
• Maintien et scalabilité d'une application vieille de 20 ans
• Principes et implémentation d’OpenTelemetry dans des projets PHP
• Container, the hard way : un voyage à travers la complexité des conteneurs
• Comprendre le TDD : principes, architecture hexagonale et types de tests
• Introduction à l’Event Sourcing en PHP

Crédit photo : Tero Vesalainen