Règle @container CSS

Définition et utilisation

CSS @container Les règles sont utilisées pour définir des styles pour d'autres éléments en fonction de la taille ou du style du conteneur.

Les déclarations de style sont filtrées en fonction des conditions. Si la condition est vraie, elles sont appliquées au conteneur. Lorsque la taille ou la valeur de style du conteneur change, la condition est réévaluée.

Astuce :Dans CSS, un conteneur est un élément qui enveloppe d'autres éléments, utilisé pour les regrouper afin de définir des styles.

Exemple

Définissez des styles pour d'autres éléments en fonction de la taille ou du style du conteneur :

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Ajoutez des styles si myContainer est inférieur à 500px de large */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solide marron;
    background-color: saumon;
  }
}

Essayez-le vous-même

Grammaire CSS

@container containername (containerquery) {
  Déclarations CSS
}

Valeur de l'attribut

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette règle @ pour la première fois.