Cinq nouveautés CSS

Chaque année, de nouvelles features CSS sont ajoutées dans le but d'améliorer la conception et la fonctionnalité des sites web. Dans cet article, je vais vous présenter cinq des principales nouveautés CSS de 2021 et 2022 à savoir : Grid CSS et plus particulièrement SubGrid et Gap, les Container Queries, les Cascade Layers, les Style Queries et pour terminer la pseudo-class :has

Grid

Grid est une méthode de mise en page permettant de créer des grilles de lignes et de colonnes afin de disposer les éléments HTML. Introduite avec CSS3, Grid ne cesse de s'améliorer régulièment avec par exemple l'ajout en 2021 et 2022 de deux nouvelles fonctionnalités subgrid et gap.

Subgrid

Lorsque l'on utilise display: grid au sien d'un conteneur, seuls ses descendants directs peuvent devenir des éléments de la grille et peuvent y être placés. Les enfants de ces descendants sont placés quant à eux selon le flux habituel.

Grâce à subgrid, les éléments de la grille imbriquée héritent automatiquement de la définition de la grille parente. Autrement dit, elle permet aux grilles imbriquées de suivre la même configuration de grille que la grille parente sans avoir à la redéfinir à chaque fois. Par exemple, supposons que nous avons une grille parente qui définit une disposition de grille à deux colonnes :

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Si nous avons une grille imbriquée dans la première colonne de la grille parente, nous pouvons utiliser la fonctionnalité subgrid pour faire en sorte que cette grille hérite automatiquement de la même disposition de grille que la grille parente :

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.child {
    display: grid;
    grid-template-columns: subgrid;
}

Dans cet exemple, la grille imbriquée avec la classe child hérite automatiquement de la définition de colonne de la grille parente. Ainsi, si la grille parente est modifiée, la grille imbriquée suivra automatiquement cette modification.

Gap

La fonctionnalité gap permet de définir l'espace entre les lignes et les colonnes d'une grille. Cette dernière est utile pour créer des mises en page de grille plus aérées et plus lisibles. Par exemple, pour créer une grille avec un espace de 20 pixels entre chaque ligne et colonne, on peut utiliser la propriété gap :

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

Dans cet exemple, l'espace entre chaque colonne et chaque rangée est défini à 20 pixels.

Pour conclure sur cette premère partie, les fonctionnalités subgrid et gap de Grid améliorent la flexibilité et la fonctionnalité de la mise en page des éléments HTML.

Les Container Queries

Les Container Queries permettent d'appliquer des styles en fonction des dimensions de leur conteneur plutôt que de la fenêtre du navigateur. Cette fonctionnalité était très attendue car elle permet de créer des mises en page plus flexibles et réactives, et de mieux gérer les éléments HTML sur des tailles d'écran variables.

Pourquoi avons-nous besoin des Container Queries ?

@media est actuellement la méthode la plus courante pour créer des styles adaptatifs en fonction des tailles d'écran. Cependant, les requêtes @media sont basées sur les dimensions de la fenêtre du navigateur et non sur les dimensions des conteneurs des éléments HTML. Cela peut poser des problèmes lorsqu'un élément HTML est placé dans un conteneur de taille fixe qui ne correspond pas à la taille de la fenêtre du navigateur.

Par exemple, si nous avons un élément HTML avec un fond bleu et une largeur de 50%, et qu'il est placé dans un conteneur de largeur fixe de 300px, l'élément ne sera pas réactif et sera coupé si la taille de la fenêtre du navigateur est inférieure à 600px (300px du conteneur x 50% de l'élément). C'est là qu'interviennent les Container Queries, permettant d'appliquer des styles en fonction de la taille du conteneur et non de la taille de la fenêtre.

Pour utiliser les Container Queries, nous devons d'abord définir une nouvelle règle appelée container. Cette règle sera utilisée pour définir les styles en fonction de la taille du conteneur.

@container (min-width: 300px) and (max-width: 600px) {
    .container {
        display: flex;
        flex-direction: column;
    }
}

Dans cet exemple, la règle container s'applique lorsque la largeur du conteneur est comprise entre 300 et 600 pixels. Dans cette règle, nous avons défini que l'élément avec la classe container doit avoir un affichage flexible et que les éléments qu'il contient doivent s'afficher en colonne lorsque la largeur du conteneur est comprise entre ces deux valeurs.

Exemples d'utilisation des Container Queries

Voici quelques exemples d'utilisation des Container Queries :

a. Changer la disposition des éléments en fonction de la largeur du conteneur :

@container (min-width: 300px) {
    .container {
        display: flex;
        flex-direction: row;
    }
}
@container (min-width: 800px) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

Dans cet exemple, la disposition des éléments est définie en fonction de la largeur du conteneur. Lorsque la largeur est comprise entre 300px et 799px, les éléments sont disposés en ligne. Lorsque la largeur est supérieure à 800px, les éléments sont disposés en grille de trois colonnes.

b. Changer la taille de la police en fonction de la largeur du conteneur :

@container (min-width: 500px) {
    .container {
        font-size: 18px;
    }
}
@container (min-width: 800px) {
    .container {
        font-size: 20px;
    }
}

Dans cet exemple, la taille de la police est définie en fonction de la largeur du conteneur. Lorsque la largeur est comprise entre 500px et 799px, la taille de la police est de 18px. Lorsque la largeur est supérieure à 800px, la taille de la police est de 20px.

Changer la couleur du texte en fonction de la hauteur du conteneur :

@container (min-height: 500px) {
    .container {
        color: red;
    }
}
@container (min-height: 800px) {
    .container {
        color: blue;
    }
}

Dans cet exemple, la couleur du texte est définie en fonction de la hauteur du conteneur. Lorsque la hauteur est comprise entre 500px et 799px, la couleur du texte est rouge. Lorsque la hauteur est supérieure à 800px, la couleur du texte est bleue.

Les Cascade Layers

La Cascade CSS est le mécanisme par lequel les styles appliqués à un élément HTML sont déterminés en fonction de leur spécificité, de leur ordre d'apparition et de leur importance. Les Cascade Layers permettent de définir un ordre de priorité pour les styles en créant des couches de cascade. Chaque couche peut contenir des styles spécifiques qui ont une priorité plus élevée que les styles des couches inférieures.

Les Cascade Layers sont définies en utilisant l'at-rule @layer, qui peut être placé dans n'importe quel fichier CSS. Les styles dans la couche par défaut ont une priorité inférieure à celle de toutes les autres couches.

Exemples d'utilisation des Cascade Layers

a. Surcharge de styles dans une bibliothèque de composants

Lors de l'utilisation d'une bibliothèque de composants, il est courant de vouloir personnaliser les styles des composants pour répondre aux besoins de conception de l'application. Cependant, cela peut être difficile si les styles de la bibliothèque ont une spécificité plus élevée que les nôtres. Avec les Cascade Layers, il est possible de définir une couche de personnalisation qui aura une priorité plus élevée que les styles de la bibliothèque. Voici un exemple :

@layer components {
    .btn {
        background-color: blue;
    }
}
@layer customization {
    .btn {
        background-color: green;
    }
}

Dans cet exemple, nous avons défini deux couches de cascade : la couche components contient les styles de la bibliothèque de composants, tandis que la couche "customization" contient les styles de personnalisation. Comme la couche customization a une priorité plus élevée, les styles qu'elle contient surchargent les styles de la couche components.

b. Définition de styles pour différentes parties d'un composant

Lors de la création d'un composant complexe, il peut être difficile de définir des styles pour toutes les parties de celui-ci en gardant à l'esprit la cascade CSS. Les Cascade Layers peuvent simplifier cette tâche en permettant de définir des styles pour des parties spécifiques du composant. Voici un exemple :

@layer base {
    .card {
        background-color: white;
        padding: 10px;
    }
}
@layer components {
    .card-header {
        font-size: 20px;
        font-weight: bold;
    }
    .card-body {
        font-size: 16px;
    }
}

Dans cet exemple, nous avons défini deux couches de cascade : la couche base contient les styles de base pour le composant card, tandis que la couche components a une priorité plus élevée que la couche base, les styles qu'elle contient seront appliqués aux parties spécifiques du composant, tandis que les styles de la couche base seront appliqués à tout le composant.

c. Organisation de styles pour différents environnements

Lorsque vous créez une application qui sera utilisée dans différents environnements, tels que le développement, la production et la pré-production, il peut être utile de définir des styles spécifiques pour chaque environnement. Les Cascade Layers peuvent vous aider à organiser vos styles pour chaque environnement. Voici un exemple :

@layer development {
    .debug {
        border: 2px solid red;
    }
}
@layer production {
    .debug {
        display: none;
    }
}

Dans cet exemple, nous avons défini deux couches de cascade : la couche development contient des styles de débogage qui ne doivent être utilisés que dans l'environnement de développement, tandis que la couche production contient des styles qui doivent être utilisés dans l'environnement de production. Comme la couche development a une priorité plus élevée que la couche production, les styles de débogage ne seront appliqués que dans l'environnement de développement.

En conclusion, les exemples donnés montrent comment les Cascade Layers peuvent être utilisées pour organiser les styles d'une application en fonction des besoins de conception et des environnements.

Les Style Queries

Les Style Queries permettent aux développeurs de définir des styles en fonction des caractéristiques de l'environnement d'affichage, telles que la largeur de l'écran ou l'orientation du device. Les Style Queries sont une approche alternative aux Media Queries, qui sont basées sur les caractéristiques du device plutôt que sur l'environnement d'affichage et fonctionnent en ajoutant des conditions de style à une règle CSS. Les Style Queries peuvent être appliqués directement aux éléments HTML, tandis que les Media Queries sont généralement appliqués aux feuilles de style.

Ils sont plus expressifs que les Media Queries, car ils permettent de définir des conditions basées sur des propriétés CSS spécifiques, plutôt que sur des caractéristiques du device

Exemple d'utilisation des Style Queries

Voici un exemple simple de la façon dont les Style Queries peuvent être utilisés pour définir des styles différents en fonction de la largeur de l'écran :

.my-element {
    background-color: red;
    color: white;
    padding: 10px;

    @style width >= 600px {
        background-color: blue;
    }
}

Dans cet exemple, nous avons défini une règle CSS pour l'élément avec la classe "my-element". Les styles de base incluent un fond rouge, une couleur blanche et un rembourrage de 10 pixels. Nous avons ensuite ajouté une Style Query avec la condition width >= 600px.

Cette condition signifie que les styles définis à l'intérieur de la Style Query seront appliqués uniquement lorsque la largeur de l'écran est supérieure ou égale à 600 pixels. Dans ce cas, nous avons défini une couleur de fond bleue.

La pseudo-class :has

La pseudo-class :has() est une fonctionnalité relativement récente en CSS qui permet de sélectionner les éléments HTML en fonction de leur relation avec un autre élément spécifique. Cette pseudo-class est particulièrement utile pour sélectionner des éléments HTML qui sont imbriqués dans une structure de contenu complexe.

:has() est similaire à la pseudo-class :not(), qui permet de sélectionner des éléments HTML qui ne correspondent pas à une expression donnée. Cependant, contrairement à :not(), elle permet de sélectionner des éléments HTML qui correspondent à une expression donnée, mais qui ont un ou plusieurs enfants qui correspondent également à une expression donnée.

Voici un exemple :

li:has(a.active) {
    font-weight: bold;
}

Dans cet exemple, :has() est utilisée pour sélectionner tous les éléments <li> qui contiennent un élément <a> avec une classe active. Le sélecteur de style correspondant applique alors une propriété CSS de font-weight: bold pour mettre en évidence les éléments sélectionnés.

Conclusion

En conclusion, ces cinq nouveautés CSS améliorent considérablement la conception et la fonctionnalité des sites Web. Il est important de les utiliser avec soin et de bien comprendre leur utilisation pour créer des sites web plus réactifs, accessibles et esthétiquement agréables.

CODDITY