Premiers pas avec les requêtes de style

Una Kravets

La possibilité d'interroger la taille intégrée d'un parent et les valeurs des unités de requête du conteneur sont depuis peu prises en charge de manière stable dans tous les moteurs de navigateur modernes.

Cependant, la spécification de structuration ne se limite pas aux requêtes de taille. Elle permet également d'interroger les valeurs de style d'un parent. Dans Chromium 111, vous pourrez appliquer des restrictions de style aux valeurs de propriétés personnalisées et interroger un élément parent pour connaître la valeur d'une propriété personnalisée.

Cela signifie que nous disposons d'un contrôle encore plus logique des styles dans CSS, et que nous pouvons mieux séparer la logique et la couche de données d'une application de ses styles.

La spécification de niveau 3 du module de confinement CSS, qui couvre les requêtes de taille et de style, permet d'interroger tous les styles à partir d'un parent, y compris des paires de propriété et de valeur telles que font-weight: 800. Cependant, lors du déploiement de cette fonctionnalité, les requêtes de style ne fonctionnent actuellement qu'avec les valeurs de propriétés personnalisées CSS. Cela est toujours très utile pour combiner des styles et séparer les données de la conception. Voyons comment utiliser les requêtes de style avec les propriétés CSS personnalisées :

Premiers pas avec les requêtes de style

Supposons que nous disposions du code HTML suivant :

<ul class="card-list">
  <li class="card-container">
    <div class="card">
      ...
    </div>
  </li>
</ul>

Pour utiliser des requêtes de style, vous devez d'abord configurer un élément conteneur. Cela nécessite une approche légèrement différente selon que vous interrogez un parent direct ou indirect.

Interroger les parents directs

Contrairement aux requêtes de style, vous n'avez pas besoin d'appliquer la structuration à l'aide de la propriété container-type ou container à .card-container pour que .card puisse interroger les styles de son parent direct. Toutefois, nous devons appliquer les styles (valeurs de propriété personnalisées dans ce cas) à un conteneur (.card-container, dans ce cas) ou à tout élément contenant l'élément auquel nous stylisons dans le DOM. Nous ne pouvons pas appliquer les styles que nous interrogez sur l'élément direct auquel nous appliquons un style à l'aide de cette requête, car cela pourrait provoquer des boucles infinies.

Pour interroger directement un parent, vous pouvez écrire:

/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown; 
    ...
  }
}

Vous avez peut-être remarqué que la requête de style encapsule la requête avec style(). Cela permet de distinguer les valeurs de taille des styles. Par exemple, vous pouvez écrire une requête pour la largeur du conteneur sous la forme @container (min-width: 200px) { … }. Cela applique des styles si le conteneur parent a une largeur d'au moins 200 px. Toutefois, min-width peut également être une propriété CSS. Vous pouvez alors interroger la valeur CSS de min-width à l'aide de requêtes de style. C'est pourquoi vous devez utiliser le wrapper style() pour bien faire la différence: @container style(min-width: 200px) { … }.

Appliquer un style aux parents non directs

Si vous souhaitez interroger les styles d'un élément qui n'est pas un parent direct, vous devez lui attribuer un container-name. Par exemple, nous pouvons appliquer des styles à .card en fonction des styles de .card-list en attribuant à .card-list un container-name et en le référençant dans la requête de style.

/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
  .card {
    ...
  }
}

Il est généralement recommandé d'attribuer un nom à vos conteneurs pour indiquer clairement ce que vous interrogez et pouvoir y accéder plus facilement. Cela peut s'avérer très pratique si vous souhaitez appliquer un style directement aux éléments dans .card. Sans conteneur nommé sur .card-container, il ne peut pas le interroger directement.

Mais tout cela prend beaucoup plus de sens en pratique. Examinons quelques exemples :

Appliquer un style aux requêtes

Les requêtes de style sont particulièrement utiles lorsque vous disposez d'un composant réutilisable avec plusieurs variantes, ou lorsque vous ne contrôlez pas tous vos styles, mais devez appliquer des modifications dans certains cas. Cet exemple montre un ensemble de fiches produit qui partagent le même composant de fiche. Certaines fiches produit comportent des informations/notes supplémentaires, comme "Nouveau" ou "En rupture de stock", déclenchées par une propriété personnalisée nommée --detail. De plus, si un produit est en rupture de stock, sa bordure est rouge foncée en arrière-plan. Ce type d'informations est probablement généré par le serveur et peut être appliqué aux fiches via des styles intégrés comme suit :

 <div class="product-list">
  <div class="product-card-container" style="--detail: new">
    <div class="product-card">
      <div class="media">
        <img .../>
      <div class="comment-block"></div>
    </div>
  </div>
  <div class="meta">
    ...
  </div>
  </div>
  <div class="product-card-container" style="--detail: low-stock">
    ...
  </div>
  <div class="product-card-container">
    ...
  </div>
  ...
</div>

Compte tenu de ces données structurées, vous pouvez transmettre des valeurs à --detail et utiliser cette propriété CSS personnalisée pour appliquer les styles :

@container style(--detail: new) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'New';
    border: 1px solid currentColor;
    background: white;
    ...
  }
}

@container style(--detail: low-stock) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'Low Stock';
    border: 1px solid currentColor;
    background: white;
    ...
  }
  
  .media-img {
    border: 2px solid brickred;
  }
}

Le code ci-dessus nous permet d'appliquer un chip pour --detail: low-stock et --detail: new, mais vous avez peut-être remarqué une redondance dans le bloc de code. Il n'existe actuellement aucun moyen de rechercher uniquement la présence de --detail avec @container style(--detail), ce qui permettrait un meilleur partage des styles et moins de répétition. Cette fonctionnalité est actuellement en cours de discussion au sein du groupe de travail.

Cartes météo

L'exemple précédent utilisait une seule propriété personnalisée avec plusieurs valeurs possibles pour appliquer des styles. Vous pouvez également utiliser plusieurs propriétés personnalisées et effectuer des requêtes à leur sujet. Prenons l'exemple de cette fiche météo :

Pour styliser les dégradés d'arrière-plan et les icônes de ces cartes, recherchez des caractéristiques météorologiques, telles que "nuageux", "pluie" ou "ensoleillé" :

@container style(--sunny: true) {
  .weather-card {
    background: linear-gradient(-30deg, yellow, orange);
  }
  
  .weather-card:after {
    content: url(<data-uri-for-demo-brevity>);
    background: gold;
  }
}

De cette façon, vous pouvez styliser chaque carte en fonction de ses caractéristiques uniques. Toutefois, vous pouvez également appliquer un style pour des combinaisons de caractéristiques (propriétés personnalisées) à l'aide du combinateur and de la même manière que pour les requêtes média. Par exemple, une journée à la fois nuageuse et ensoleillée se présentera comme suit:

@container style(--sunny: true) and style(--cloudy: true) {
    .weather-card {
      background: linear-gradient(24deg, pink, violet);
    }
  
  .weather-card:after {
      content: url(<data-uri-for-demo-brevity>);
      background: violet;
  }
}

Séparer les données de la conception

Dans ces deux démonstrations, il existe un avantage structurel à séparer la couche de données (DOM, qui serait affiché sur la page) des styles appliqués. Les styles sont écrits sous forme de variantes possibles qui se trouvent dans le style des composants, tandis qu'un point de terminaison peut envoyer les données qu'il utilisera ensuite pour styliser le composant. Vous pouvez utiliser une seule valeur, comme dans le premier cas, en mettant à jour la valeur --detail, ou plusieurs variables, comme dans le second cas (en définissant --rainy ou --cloudy ou --sunny). Et le meilleur, c'est que vous pouvez également combiner ces valeurs. Si vous vérifiez à la fois --sunny et --cloudy, un style partiellement nuageux peut s'afficher.

Vous pouvez mettre à jour les valeurs de propriétés personnalisées via JavaScript de façon fluide lors de la configuration du modèle DOM (c'est-à-dire lors de la création du composant dans un framework) ou à tout moment à l'aide de <parentElem>.style.setProperty('--myProperty’, <value>). I

Voici une démonstration qui, en quelques lignes de code, met à jour le --theme d'un bouton et applique des styles à l'aide de requêtes de style et de cette propriété personnalisée (--theme) :

Mettez en forme la fiche à l'aide de requêtes de style. Le code JavaScript utilisé pour mettre à jour les valeurs de propriété personnalisées est le suivant :

const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');

themePicker.addEventListener('input', (e) => {
  btnParent.style.setProperty('--theme', e.target.value);
})

Les fonctionnalités décrites dans cet article ne sont qu'un début. Les requêtes de conteneur vont vous aider à créer des interfaces dynamiques et responsives. Concernant les requêtes de style, il reste encore quelques problèmes non résolus. Le premier est l'implémentation de requêtes de style pour les styles CSS en plus des propriétés personnalisées. Cette fonctionnalité fait déjà partie du niveau de spécification actuel, mais n'a pas encore été implémentée dans un seul navigateur. L'évaluation du contexte booléen doit être ajoutée au niveau de spécification actuel lorsque le problème en suspens est résolu, tandis que l'interrogation de plages est prévue pour le niveau suivant.