Day 73: size container features

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;
  }
}

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

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;
  }
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2023-01-04T09:38:54+00:00) Day 73: size container features. Retrieved from https://www.scien.cx/2023/01/04/day-73-size-container-features/

MLA
" » Day 73: size container features." Manuel Matuzović | Sciencx - Wednesday January 4, 2023, https://www.scien.cx/2023/01/04/day-73-size-container-features/
HARVARD
Manuel Matuzović | Sciencx Wednesday January 4, 2023 » Day 73: size container features., viewed ,<https://www.scien.cx/2023/01/04/day-73-size-container-features/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 73: size container features. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/04/day-73-size-container-features/
CHICAGO
" » Day 73: size container features." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/04/day-73-size-container-features/
IEEE
" » Day 73: size container features." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/04/day-73-size-container-features/. [Accessed: ]
rf:citation
» Day 73: size container features | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/04/day-73-size-container-features/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts