Day 73: size container features
source link: https://www.matuzo.at/blog/2023/100daysof-day73/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Day 73: size container features
posted on January 4., 2023
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
In my previous posts about size container features I’ve only used the min-width
feature, but there’s actually more you can query.
container-type: inline-size
establishes size containment only on the inline axis. There is no block-size
option because it wasn’t possible for browsers to implement, but there is a size
option, which establishes size containment on both dimensions of the container. According to Miriam Suzanne, you should be careful using this option because I may cause side effects, but it allows you to query more than just the width/inline-size.
orientation
You can query the orientation of the container. If the height is larger than the width, the orientation
is portrait
. If the width is larger than the height, it's landscape
.
.container {
border: 8px solid aqua;
container-type: size;
width: 10rem;
height: 15rem;
}
.container2 {
width: 15rem;
height: 10rem;
}
.child {
aspect-ratio: 1;
width: 5rem;
border: 4px solid;
color: red;
}
@container (orientation: portrait) {
.child {
background: currentColor;
}
}
<div class="container">
<div class="child"></div>
</div>
<div class="container container2">
<div class="child"></div>
</div>
aspect-ratio
.container3 {
width: 10rem;
height: 10rem;
}
.container4 {
width: 10rem;
height: 5.625rem;
box-sizing: content-box;
}
@container (aspect-ratio: 1 / 1) {
.child {
background: blue;
}
}
@container (aspect-ratio: 16 / 9) {
.child {
background: green;
}
}
height
You can also query the height.
@container (min-height: 14rem) {
.child {
background: fuchsia;
}
}
logical properties
Instead of width
you can also use inline-size
in your queries and instead of height
you can use block-size
.
@container (min-block-size: 14rem) {
.sample4 .child {
background: aqua;
}
}
Want more?
Overview: 100 Days Of More Or Less Modern CSS
My blog doesn't support comments yet, but you can reply via e-mail.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK