Bar Chart: Fix writing-mode med logical properties

Brug logical properties i stedet for height, min-width, top, left og right for at gøre bar chartet mere robust overfor ændringer i writing-mode. Ret også under “Forrige styles”.

<div class="bars-container">
  <article class="bars">
    <div class="bar" data-percent="100"></div>
    <div class="bar" data-percent="70"></div>
    <div class="bar" data-percent="60"></div>
    <div class="bar" data-percent="50"></div>
    <div class="bar" data-percent="40"></div>
    <div class="bar" data-percent="30"></div>
    <div class="bar" data-percent="20"></div>
    <div class="bar" data-percent="10"></div>
  </article>
</div>

Preview

logical properties

.bars {
  block-size: 300px; /* i stedet for height */
  @container (width < 400px) {
    writing-mode: sideways-rl;
    block-size: 100%; /* i stedet for height */
  }
}
.bar {
  min-inline-size: 40px; /* i stedet for min-width */
  block-size: var(--percent); /* i stedet for height */

  &::after {
    inset-block-start: -1lh; /* i stedet for top */
    inset-inline: 0; /* i stedet for left og right */
  }
}

Opgavebeskrivelse