This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Rules within a container query only apply to descendants of that container.
If you write a media query and you put rules in the media block, the rules apply to the entire document.
@media (min-width: 1024px) {
* {
outline: 4px solid
}
}If you write a container query and you put rules in the container block, the rules only apply to descendants of the container.
<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;
}
}A quote
“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?”
If you have nested containers, the styles apply to all applicable containers.
main,
[data-sample] {
container-type: inline-size;
}
@container (min-inline-size: 240px) {
* {
border: 8px dotted fuchsia;
}
}This can cause a lot of confusion. I guess, that's one reason why it's advised to name containers.
main,
[data-sample] {
container-type: inline-size;
}
[data-sample] {
container-name: demo;
}
@container demo(min-inline-size: 240px) {
* {
border: 8px dotted fuchsia;
}
}A quote
“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?”
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-27T00:00:00+00:00) Day 90: scoped styles in container queries. Retrieved from https://www.scien.cx/2023/01/27/day-90-scoped-styles-in-container-queries-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.