This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
In a media query, it’s obvious what width means. It always refers to the width of the viewport. With size container queries it’s not that obvious.
/* Kicks in when the viewport has a minimum width of 500px */
@media (min-width: 500px) {
body {
background-color: hotpink;
}
}width in a size container query queries the width of the container's content box. Let me illustrate what that means with an example.
The <section> is the container and the .card changes background color when the container has a minimum width of 500px.
<section>
<h2>Latest news</h2>
<div class="card">
<h2>Hey, I'm a card!</h2>
</div>
</section>The <section> has an explicit width, padding, and a border. It's box-sizing property is set to the default value content-box.
section {
box-sizing: content-box;
container-type: inline-size;
width: 500px;
padding: 20px;
border: 10px solid;
}
@container (min-width: 500px) {
.card {
background-color: hotpink;
}
}The total width of the container (<section>) is 560px (500px width + 40px padding + 20px border). The container query fires when the width without padding and border (content-box) is at least 500px, not when the total width is 500px.
You can grab and resize the <section> by clicking and dragging it in the bottom right corner. The background color of the .card changes as soon as the width of the parent section hits 500px.
total width: 560px,
content-box: 500px
Hey, I'm a card!
If you change box-sizing: content-box; to box-sizing: border-box;, the total width of the container is 500px (440px width + 40px padding + 20px border). The container query still only fires when the content-box is at least 500px.
section {
box-sizing: border-box;
container-type: inline-size;
width: 500px;
padding: 20px;
border: 10px solid;
}
@container (min-width: 500px) {
.card {
background-color: hotpink;
}
}total width: 500px,
content-box: 460px
Hey, I'm a card!
So, when we talk about width in a size container query, it always refers to the size of the content-box.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-12-29T09:38:54+00:00) Day 69: width in container queries. Retrieved from https://www.scien.cx/2022/12/29/day-69-width-in-container-queries/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.