Day 77: block-size, inline-size, vi, and vb

posted on 10.01.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.

There are logical properties for width and height values.

width and height

The logical alternative for width is inline-size and the alternative for height is block-size. Here’s an example of how using inline-size over width makes a difference.

If you use width, the property sets the physical width, regardless of the writing mode.

h1 {
  border: 1rem solid;
  padding: 1rem;
  width: 16rem;
}

.vertical {
  writing-mode: vertical-rl;
}

<h1>width horizontal</h1>
<h1 class="vertical">width vertical</h1>

If you use inline-size, the property sets the logical width with respect to the writing mode.

h1 {
  border: 1rem solid;
  padding: 1rem;
  inline-size: 16rem;
}

.vertical {
  writing-mode: vertical-rl;
}

vi and vb

There are also logical unit alternatives for vw and vh.

The width and height of the <div> is always the width and height of the viewport, regardless of the writing mode.

div {
  border: 1rem solid;
  width: 20vw;
  height: 40vh;
}

.vertical {
  writing-mode: vertical-rl;
}

The width and height of the <div> matches either the vertical or horizontal dimensions of the viewport, depending on the writing mode.

div {
  border: 1rem solid;
  width: 20vi;
  height: 40vb;
}

• 50vw alternative: 50vi
• 50vh alternative: 50vb
• 50dvh alternative: 50dvb
• 50svh alternative: 50svb
• 50lvh alternative: 50lvb

See on CodePen

Overview: 100 Days Of More Or Less Modern CSS