@container - Directive CSS
Résumé des caractéristiques de la directive @container
Description de la directive @container.
La directive @container introduit la possibilité d'écrire des styles conditionnels en fonction des dimensions d'un élément.
Le terme anglais est container query.
De même que les media queries (voir la directive @media) permettent d'adapter les styles en fonction des caractéristiques du terminal :
dimensions du viewport, orientation de l'écran, etc. les container queries considèrent les caractéristiques d'un élément de la page (le conteneur)
pour appliquer ou non des styles à ses éléments enfants.
Remarque : une requête container queries ne peut appliquer des styles que aux enfants de l'élément qui a été déclaré comme le conteneur. Ce dernier, le conteneur lui même, ne peut pas être stylé dans une requête container queries le concernant.
Dans ce premier exemple, le logo de Firefox est une image flottante sur la gauche, ce qui permet d'avoir la description à côté de l'image.Mais si la largeur du conteneur est insuffisante, les lignes de texte situées à côté de l'image vont être très courtes, rendant la lecture difficile.
La largeur du conteneur peut être contrainte par la mise en page : par exemple ce conteneur peut être dans une cellule de grille contenant d'autres éléments et dont la largeur des colonnes est dynamique.
Pour les besoins de la démonstration, nous avons rendu la largeur du conteneur ajustable avec la souris.
Dans ce deuxième exemple, une requête container query a été utilisée pour rendre l'image non flottante lorsque la largeur du conteneur est
insuffisante (inférieure à 200 pixels).Comme ci-dessus, vous pouvez ajuster la largeur du conteneur avec la souris pour simuler une contrainte due à la mise en page.
Éléments de syntaxe :
Tout débord il faut définir quel élément est le conteneur, et de quel type de conteneur il s'agit. Cela peut se faire avec les propriétés container-name
et container-type ou plus simplement avec la propriété résumée container.
Pour l'exemple ci-dessus, nous avons défini que le nom du container est demo et qu'il agit suivant l'axe des lignes. L'image est également
déclarée flottante à gauche par défaut.
#description1b {container: demo / inline-size;}
#description1b img {float:left; margin-right:10px;}
Remarque : l'identifiant du conteneur peut être défini sur une classe, donc pas forcément pour un élément unique.
Il faut ensuite écrire la requête container query proprement dite. Celle-ci ne peut faire référence que à des éléments enfants du conteneur. Ici nous déclarons que l'image n'est plus flottante si la largeur du conteneur est inférieure à 200 pixels.
@container demo (width < 200px) {
#description1b img {float:none; margin-right:200px;}
}
Autres exemples.
On sait que le texte justifié n'est pas très esthétique sur des lignes courtes : cela provoque des espaces exagérément grands entre les mots. Une requête container query a été utilisée pour aligner le texte à gauche lorsque la largeur du conteneur est inférieure à 300 pixels.
Ici la direction d'écriture s'adapte en fonction de la forme du conteneur : s'il est plus large que haut, l'écriture est horizontale, et verticale s'il est plus haut que large.
Unités spécifiques aux container queries.
Plusieurs unités ont été créées pour exprimer des dimensions en fonction des dimensions de l'élément conteneur. Reportez-vous à la page sur les unités CSS relatives au conteneur.
Avantages des requêtes container queries.
Le principal avantage des container queries est de permettre la mise en forme d'un élément indépendamment du reste de la page. C'est particulièrement utile pour des composants, qui peuvent être insérés dans une page dont la mise en page est inconnue.
Les requêtes style container queries.
Cette évolution des container queries permet de tester n'importe quelle propriété de l'élément conteneur. C'est la valeur calculée de la propriété
qui est prise en compte.
Mais cette fonctionnalité est encore peu prise en charge.
Exemples de syntaxes pour @container.
- @container id (width > 200px) and (width < 400px) { sélecteur { propriétés CSS } }
Ceci est la syntaxe de base d'une requête container query.
idest un identifiant défini par le propriété ou sur un ou plusieurs des éléments de la page.(width > 200px)est une condition faisant intervenir une propriété et une valeur. C'est la valeur calculée de la propriété qui est prise en compte.and,orounotsont des opérateurs permettant de combiner plusieurs conditions, chacune des conditions étant inscrites entre parenthèses.
Les propriétés utilisables dans les conditions sont :
widthetheight: largeur ou hauteur de l'élément conteneur.inline-sizeetblock-size: dimension de l'élément conteneur dans la direction des lignes, ou dans la direction des blocs.aspect-ratio: ratio correspondant à la largeur de l'élément conteneur divisé par sa hauteur.orientation: prend la valeurlandscapesi la largeur de l'élément conteneur est plus grande que sa hauteur, et la valeurportraitdans le cas contraire.
Les tests sur la hauteur (
height), la dimension dans la direction des blocs (block-size), le ratio et l'orientation ne sont prises en charge que sur les conteneurs de typesize(voircontainer-type). - @container (min-width: 200px) and (max-width: 400px) { sélecteur { propriétés CSS } }
Cette syntaxe, héritée du passé, est moins lisible que la précédente. Voici les équivalences entre les deux syntaxes.
min-width: valeur⇔ width > valeurmax-width: valeur⇔ width < valeurmin-height: valeur⇔ height > valeurmax-height: valeur⇔ height < valeur - @container (width > 200px){ sélecteur { propriétés CSS } }
Cette syntaxe simplifiée ne fait pas apparaître d'identifiant : tous les éléments de la page sont considérés comme des conteneurs. C'est assez imprécis et complexe à utiliser car on ne spécifie pas lequel des parents est le conteneur.
Prise en charge par les navigateurs (compatibilité).
@containerNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Évolution de la directive @container.
-
Module CSS - Confinement - Niveau 3
Introduction des techniques de "confinement" et de la directive@container.
21 Décembre 2021Document de travail.
Voir aussi, à propos des techniques de confinement.
Les propriétés et autres notions concernant le confinement sont décrites dans la spécification CSS Containment Module.