ResizeObserverEntry: contentBoxSize-Eigenschaft

Ein Array, das Objekte mit der neuen Größe des Inhaltsbereichs des beobachteten Elements enthält. Das Array ist notwendig, um Elemente zu unterstützen, die mehrere Fragmente haben, die in mehrspaltigen Szenarien auftreten. Jedes Objekt im Array enthält zwei Eigenschaften:

blockSize

Die Länge des Inhaltsbereichs des beobachteten Elements in der Blockdimension. Bei Boxen mit einem horizontalen writing-mode ist dies die vertikale Dimension oder Höhe; wenn das Writing-Mode vertikal ist, ist dies die horizontale Dimension oder Breite.

inlineSize

Die Länge des Inhaltsbereichs des beobachteten Elements in der Inline-Dimension. Bei Boxen mit einem horizontalen writing-mode ist dies die horizontale Dimension oder Breite; wenn das Writing-Mode vertikal ist, ist dies die vertikale Dimension oder Höhe.

Der folgende Ausschnitt stammt aus dem Beispiel resize-observer-border-radius.html (Quelltext ansehen). Dieses Beispiel enthält ein grünes Kästchen, dessen Größe prozentual zur Viewport-Größe eingestellt ist. Wenn die Viewport-Größe geändert wird, ändern sich die abgerundeten Ecken des Kästchens proportional zur Größe des Kästchens. Wir könnten dies einfach mit border-radius und einem Prozentsatz umsetzen, aber das führt schnell zu unschön aussehenden ellipsenförmigen Ecken; diese Lösung bietet schöne quadratische Ecken, die mit der Größe des Kästchens skalieren.

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize[0].inlineSize / 10 +
              entry.contentBoxSize[0].blockSize / 10,
          ) + "px";
      } else {
        // ...but old versions of Firefox treat it as a single item
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize.inlineSize / 10 +
              entry.contentBoxSize.blockSize / 10,
          ) + "px";
      }
    } else {
      entry.target.style.borderRadius =
        Math.min(
          100,
          entry.contentRect.width / 10 + entry.contentRect.height / 10,
        ) + "px";
    }
  }
});

resizeObserver.observe(document.querySelector("div"));