Premiers jours des requêtes de style conteneur

Nous en sommes encore aux débuts suuuuup avec les requêtes de conteneurs. Trop tôt pour une large prise en charge des navigateurs, mais Chromium le prend déjà en charge, Safari a commencé à le prendre en charge dans la version 16, et Firefox est probablement pas loin derrière.

La plupart des premières conversations autour des requêtes de conteneur comparent généralement la syntaxe aux requêtes multimédias.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Ces deux font des requêtes pour min-width: 600. La différence est que la requête média regarde la largeur de la fenêtre pour déclencher ces changements de style tandis que la requête conteneur regarde la largeur calculée de la .posts élément. Doux!

Mais après avoir écouté CSS Podcast Épisode 59, Una et Adam ont évoqué l'avenir des requêtes de conteneur : requêtes de style! Le projet de travail actuel de la spécification CSS Containment Module Level 3 définit les requêtes de style conteneur:

A requête de style conteneur permet d'interroger le valeurs calculées des conteneur de requête. C'est une combinaison booléenne d'individus caractéristiques de style () que chacun interroge une seule propriété spécifique du conteneur de requête.

Mais pas encore d'exemples de syntaxe — seulement une brève description :

La syntaxe d'un  est le même que pour un déclaration, et sa requête est vraie si la valeur calculée de la propriété donnée sur le conteneur de requête correspond à la valeur donnée (qui est également calculée par rapport au conteneur de requête), inconnue si la propriété ou sa valeur est invalide ou non prise en charge, et fausse sinon . La syntaxe booléenne et la logique combinant caractéristiques de style en requête de style est le même que pour Requêtes de fonctionnalité CSS. (Voir @les soutiens.)

Donc, oui, avec le temps, nous devrions nous attendre à réaliser quelque chose comme ceci :

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

C'est un exemple assez stupide. Une chose à noter est que le container-type n'est plus basé sur le conteneur inline-size mais style. Nous pourrions décrire cela comme ceci :

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…mais toutes les requêtes de conteneur sont style requêtes par défaut. Bien. du moins tel qu'il est aujourd'hui. Miriam Suzanne a une belle aperçu des problèmes possibles qui pourraient apparaître avec ça.

Où l'interrogation des styles d'un conteneur peut-elle être utile ? je ne sais pas encore ! Mais mon esprit va à quelques endroits:

• Valeurs de propriété personnalisée : Nous avons vu des propriétés personnalisées utilisées comme des indicateurs d'état, tels que le Méthode de commutation DRY qu'Ana a couverte il y a quelque temps. La valeur change, ainsi que les styles.
• Approche alternative en mode sombre : Au lieu de tout baser sur un changement de classe de corps qui réattribue des valeurs de propriété personnalisées, nous pouvons peut-être changer une palette de couleurs entière si, par exemple, l'arrière-plan du corps change de couleur.
• Conditions de requête plus complexes : Comme, disons, nous voulons appliquer des styles lorsque le size ainsi que style les conditions d'un conteneur sont remplies.

Una a également mentionné dans le podcast CSS que les requêtes de style de conteneur pourraient aider à prévenir certaines situations de style gênantes, comme si nous avions du texte en italique dans un fichier déjà en italique. blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}