Le nouveau CSS peut vous faciliter la vie

Le but de ce guide est de vous présenter un ensemble de fonctionnalités innovantes et puissantes récemment introduites dans CSS. Bien que cet article fournisse un aperçu de leur syntaxe et des cas d'utilisation pratiques, il y a beaucoup plus de profondeur à explorer avec chaque fonctionnalité. Utilisez-le comme point de départ pour approfondir ces avancées de pointe.

1. Requêtes de conteneur (taille)

Que sont les requêtes de conteneur basées sur la taille ?

Les requêtes de conteneur basées sur la taille vous permettent d'appliquer des styles aux éléments enfants en fonction des dimensions de leur conteneur parent, plutôt que de vous fier à la taille entière de la fenêtre d'affichage, comme avec les requêtes multimédias traditionnelles.

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

Pourquoi est-ce important ?

Cela donne vie au concept de « mixins CSS ». Tout comme les mixins Sass améliorent la maintenabilité, les requêtes de conteneurs basées sur le style étendent les capacités natives de CSS, en tenant compte de la cascade et en permettant une plus grande flexibilité.

Support du navigateur :

• Pris en charge : Chrome et dérivés.

• Bientôt disponible : Safari.

• Non pris en charge : Firefox.

• Améliorations : limitées.

• Polyfill : non disponible.

3. Unités de conteneurs

Que sont les unités de conteneurs ?

Les unités de conteneur sont des unités de mesure réactives (par exemple, cqw, cqh, cqmin, cqmax) qui calculent les dimensions en fonction de la taille du conteneur plutôt que de la fenêtre d'affichage. Ceux-ci fonctionnent de la même manière que vw (1 % de la largeur de la fenêtre d'affichage), mais sont limités à un conteneur.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Pourquoi est-ce important ?

Si les éléments internes doivent être mis à l'échelle proportionnellement à leur conteneur parent, les unités de conteneur fournissent une solution propre, uniquement CSS. Un cas d'utilisation courant consiste à mettre à l'échelle la typographie ou l'espacement à l'intérieur des cartes ou des composants modulaires.

Support du navigateur :

• Prise en charge complète : navigateurs modernes.

• Améliorations : oui, avec des solutions de repli.

• Polyfill : disponible.

4. :has() Pseudo-Sélecteur

Qu'est-ce que le sélecteur :has() ?

La pseudo-classe :has() vous permet de styliser les éléments parents en fonction de la présence d'éléments enfants spécifiques en leur sein.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Pourquoi est-ce important ?

Le sélecteur :has() fonctionne efficacement comme un « sélecteur de parents » en CSS, permettant de styliser les parents en fonction de leurs enfants. Par exemple, vous pouvez utiliser :has() pour mettre en surbrillance un champ de formulaire parent uniquement lorsqu'un message d'erreur est présent.

Support du navigateur :

• Pris en charge : tous les principaux navigateurs.

• Polyfill : JavaScript uniquement.

*5. Voir les transitions
*
Que sont les transitions de vue ?

Cette fonctionnalité introduit deux types d'animations :

1. Transitions d'une seule page (nécessite JavaScript).

2. Transitions multipages (CSS uniquement).
   

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

*Pourquoi est-ce important ?
*
Les transitions améliorent l'expérience utilisateur en animant des éléments lors des changements d'état, rendant les interactions plus fluides. Ils utilisent « l'interpolation », où les animations interpolent entre les états de début et de fin sans définir manuellement chaque étape.

Support du navigateur :

• Pris en charge : Chrome et dérivés.

• Non pris en charge : Safari, Firefox.

• Améliorations : oui, avec des animations de secours.

6. Nidification

Qu'est-ce que la nidification ?

L'imbrication CSS vous permet d'écrire des sélecteurs enfants dans leurs règles parents, ce qui rend le code plus propre et plus maintenable.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Pourquoi est-ce important ?

L'imbrication réduit la redondance dans CSS, en regroupant les styles associés. Cependant, une utilisation excessive peut conduire à des sélecteurs trop spécifiques et à une réutilisabilité réduite.

Support du navigateur :

• Prise en charge complète : navigateurs modernes.

7. Animations pilotées par défilement

Que sont les animations pilotées par défilement ?

Ces animations sont liées au défilement et peuvent être implémentées en utilisant CSS sans recourir à JavaScript.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Pourquoi est-ce important ?

Des indicateurs de progression aux effets de parallaxe, les animations pilotées par défilement améliorent l'interactivité et réduisent le recours à JavaScript pour les tâches critiques en termes de performances.

Support du navigateur :

• Pris en charge : Chrome.

• Bientôt disponible : Firefox.

8. Sous-grille

Qu'est-ce que la sous-grille ?

La valeur de la sous-grille permet aux éléments de grille enfants de s'aligner sur les lignes ou les colonnes de leur grille parent sans dupliquer les définitions de grille.

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

Pourquoi est-ce important ?

La sous-grille garantit un alignement cohérent sur les structures de grille imbriquées, ce qui facilite la maintenance des mises en page complexes.

Support du navigateur :

• Prise en charge complète : tous les navigateurs modernes.

Pensées finales

CSS continue d'évoluer à un rythme passionnant. Avec des fonctionnalités telles que les requêtes de conteneur, les transitions de vue et la sous-grille, le langage devient plus robuste et intuitif pour le développement Web moderne. Gardez un œil sur les développements futurs, notamment la syntaxe relative des couleurs, le CSS étendu et les nouveaux éléments HTML comme , qui promettent des possibilités de conception encore plus grandes.