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.
Les règles d’une requête de conteneur ne s’appliquent qu’aux descendants de ce conteneur.
Si vous écrivez une requête média et que vous mettez des règles dans le bloc média, les règles s’appliquent à l’ensemble du document.
@media (min-width: 1024px) {
* {
outline: 4px solid
}
}Si vous écrivez une requête de conteneur et que vous mettez des règles dans le bloc conteneur, les règles ne s’appliquent qu’aux descendants du conteneur.
<div data-sample="demo">
<h2>A quote</h2>
<blockquote>“What came first – the music or the misery? Did I listen to the music because I was miserable? Or was I miserable because I listened to the music? Do all those records turn you into a melancholy person?”</blockquote>
</div>[data-sample] {
container-type: inline-size;
}@container (min-inline-size: 240px) {
* {
border: 8px dotted fuchsia;
}
}
Une citation
« Qu’est-ce qui est venu en premier – la musique ou la misère ? Ai-je écouté la musique parce que j’étais misérable? Ou étais-je malheureux parce que j’écoutais de la musique ? Est-ce que tous ces disques font de vous une personne mélancolique ?
Si vous avez des conteneurs imbriqués, les styles s’appliquent à tous les conteneurs applicables.
main,
[data-sample] {
container-type: inline-size;
}@container (min-inline-size: 240px) {
* {
border: 8px dotted fuchsia;
}
}
Cela peut causer beaucoup de confusion. Je suppose que c’est l’une des raisons pour lesquelles il est conseillé de nommer les conteneurs.
main,
[data-sample] {
container-type: inline-size;
}[data-sample] {
container-name: demo;
}
@container demo(min-inline-size: 240px) {
* {
border: 8px dotted fuchsia;
}
}
Une citation
« Qu’est-ce qui est venu en premier – la musique ou la misère ? Ai-je écouté la musique parce que j’étais misérable ? Ou étais-je malheureux parce que j’écoutais de la musique ? Est-ce que tous ces disques font de vous une personne mélancolique ?
Voir sur CodePen.