Les premiers jours des requêtes de style conteneur

Les requêtes de conteneurs sont encore à leurs balbutiements, manquant de support de navigateur généralisé. Alors que Chromium les soutient déjà, le support de Safari a commencé avec la version 16 et la mise en œuvre de Firefox est prévue bientôt.

Les discussions précoces établissent souvent des parallèles entre la requête en conteneur et la syntaxe des requêtes multimédias. Considérez ces exemples:

<code>/* 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;
  }
}</code>

<code>/* 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;
  }
}</code>

Les deux exemples ciblent min-width: 600px. Cependant, la requête multimédia réagit à la largeur de la fenêtre, tandis que la requête du conteneur répond à la largeur calculée de l'élément .posts.

En s'appuyant sur cela, la spécification du module de confinement CSS Niveau 3 introduit Requêtes de style de conteneur , permettant des requêtes des styles calculés du conteneur. La spécification les décrit comme des combinaisons booléennes de fonctionnalités de style individuel, chaque interrogation d'une propriété spécifique. La syntaxe, reflétant les déclarations CSS, évalue à TRUE si la valeur de propriété calculée correspond à la valeur spécifiée (également calculée par rapport au conteneur), inconnue si elle n'est pas valide ou non soutenue, et fausse autrement. La logique booléenne est similaire aux requêtes de fonction CSS (@supports).

un exemple hypothétique:

<code>.posts {
  container-name: posts;
}

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

Notez que container-type: style (ou son absence) est implicite; Toutes les requêtes de conteneur deviennent des requêtes de style par défaut (actuellement). Le travail de Miriam Suzanne met en évidence les défis potentiels avec cette approche.

Les applications pratiques des styles de conteneurs interrogées sont toujours en train d'émerger, mais les utilisations potentielles incluent:

• Valeurs de propriétés personnalisées: Réagir aux modifications des propriétés personnalisées utilisées comme indicateurs d'état.
• Implémentation du mode sombre: Commutation de palettes de couleurs en fonction des changements de fond du corps.
• Conditions de requête complexes: combinant la taille et les conditions de style.

Les requêtes de style conteneur peuvent également aborder les complexités de style, telles que la remplacement du texte en italique dans un blockquote en italique:

<code>blockquote {
  container-name: quote;
}

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!