Posté sur
Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.
Vous pouvez utiliser des requêtes multimédias pour styliser des éléments en fonction des fonctionnalités de la fenêtre d’affichage du navigateur, par exemple, min-width, max-height, ou orientation. Avec les requêtes de conteneur, vous pouvez désormais faire la même chose mais avec n’importe quel élément parent. Au lieu de la fenêtre d’affichage, vous pouvez désormais écouter les propriétés et les fonctionnalités d’un élément conteneur.
Vous pouvez interroger toutes sortes de choses, pas seulement la largeur, la hauteur ou l’orientation, mais également des propriétés personnalisées, par exemple. Il existe une différence importante entre les fonctionnalités de conteneur de taille (width, height, inline-size, block-size, aspect-ratio, orientation) et les fonctionnalités de conteneur de style (valeurs calculées). Si vous souhaitez interroger des fonctionnalités de conteneur de taille, vous devez définir explicitement un conteneur de taille. C’est parce qu’ils nécessitent un confinement de taille spéciale pour fonctionner.
Miriam Suzanne l’explique dans Use the Right Container Query Syntax comme suit :
Normalement, la taille d’un élément serait basée sur la taille de son contenu – mais si nous interrogeons cette taille et modifions le contenu en fonction de la requête, nous obtenons une boucle infinie. Le confinement de la taille rompt cette boucle en garantissant que la taille d’un conteneur n’est pas basée sur la taille de son contenu.
Vous pouvez créer un conteneur de taille à l’aide de la container-type propriété. Il y a deux options : inline-size (établit le confinement de la taille sur l’axe en ligne) et size (établit le confinement de la taille sur l’axe en ligne et le bloc). Il n’y a pas de dédié block-size option et nous devons être prudents en utilisant size, selon Miriam Suzanne. Je ne comprends pas encore vraiment pourquoi, mais je vais creuser cela dans un article séparé.
<section>
<h2>Latest news</h2><div class="card">
<h2>Hey, I'm a card!</h2>
</div>
</section>
section {
width: 50%;
container-type: inline-size;
}
.card {
background-color: yellow;
border: 5px solid;
}
Nous pouvons interroger le conteneur en utilisant @container.
@container (min-width: 500px) {
.card {
background-color: hotpink;
}
}
@media (min-width: 500px) {
.card {
border-style: dotted;
}
}
Vous pouvez saisir et redimensionner le <section> en cliquant dessus et en le faisant glisser dans le coin inférieur droit. La couleur de fond du .card change dès que la largeur de la section parent atteint 500px.
Voir sur CodePen.