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.
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
@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
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
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
: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
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.
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 :
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
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
> Les propriétés clés du CSS Grid
Pour mieux comprendre, voici un nouvel exemple d'utilisation : voir le code
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
> Les propriétés clés des Container Queries
Découvrez un exemple d'utilisation : voir le code
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.
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 :
Et pour la pratique, découvrez mon exemple d'utilisation : voir le code
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 :
Crédit photo : Tero Vesalainen