Le CSS Nesting Module est une spécification CSS du W3C, disponible sur les principaux navigateurs depuis août 2023, qui permet l’imbrication des règles de style pour faciliter la lecture et l’écriture du CSS. Dans cet article, nous allons explorer ce qu’est le CSS Nesting et pourquoi c’est une révolution pour le développement frontend. Le CSS Nesting Module c’est la possibilité d’imbriquer des sélecteurs CSS les uns dans les autres. Image par Hannah Alkadi de Pixabay Qu’est-ce que le CSS Nesting Module ? Cette spécification du W3C vise à faciliter la lecture et l’écriture du CSS en permettant aux développeurs frontend de créer des sélecteurs CSS plus lisibles et maintenables en les imbriquant les uns dans les autres, plutôt que de les écrire comme une liste de sélecteurs séparés placés les uns en dessous des autres. Concrètement, le CSS Nesting Module permet aux développeurs de définir des règles de style en cascade, en les imbriquant les unes dans les autres, pour créer des feuilles de style CSS plus facile à comprendre et éviter la duplication de code. Prenons un exemple afin de mieux comprendre. Imaginons que nous souhaitons appliquer une taille de texte spécifique à tous les éléments de la classe .card. Voici comme actuellement nous écririons le code CSS : .card { border: 1px solid #ccc; border-radius: 5px; padding: 10px; max-width: 300px } .card h2 { font-size: 1.8rem; margin-bottom: 0.5rem; } .card p { font-family: Arial; font-size: 1.1rem; line-height: 1.5; } Mais grâce au CSS Nesting Module nous l’écririons de cette manière : .card { border: 1px solid #ccc; border-radius: 5px; padding: 10px; max-width: 300px; h2 { font-size: 1.8rem; margin-bottom: 0.5rem; } p { font-family: Arial; font-size: 1.1rem; line-height: 1.5; } } Dans cet exemple, les sélecteurs h2 et p sont imbriqués dans le sélecteur .card. Cette façon d’organiser le code CSS le rend plus lisible (puisqu’il reprendre la structure HTML) et simplifie également la maintenance des feuilles de style en réduisant les appels d’un même sélecteur. Dans le second […]

Les sprites CSS sont une technique mise au point pour économiser de la bande passante en réduisant le nombre de requêtes HTTP. Plutôt que de charger plusieurs images distinctes, l’idée […]

Comment fixer un footer en bas de page est une question qui m’est fréquemment posée en formation. Il existe plusieurs techniques pour réaliser cela. Nous allons nous intéresser à deux […]