ResizeObserverEntry: `contentBoxSize` Eigenschaft

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

blockSize

Die Länge der content box des beobachteten Elements in der Block-Dimension. Für Boxen mit einem horizontalen writing-mode entspricht dies der vertikalen Dimension, also der Höhe; wenn der writing-mode vertikal ist, entspricht dies der horizontalen Dimension, also der Breite.

inlineSize

Die Länge der content box des beobachteten Elements in der Inline-Dimension. Für Boxen mit einem horizontalen writing-mode entspricht dies der horizontalen Dimension, also der Breite; wenn der writing-mode vertikal ist, entspricht dies der vertikalen Dimension, also der Höhe.

Der folgende Codeausschnitt stammt aus dem resize-observer-border-radius.html (Quellcode ansehen) Beispiel. Dieses Beispiel enthält ein grünes Kästchen, das als Prozentsatz der Viewport-Größe dimensioniert 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önen elliptischen Ecken; diese Lösung bietet Ihnen schöne quadratische Ecken, die mit der Boxgröße 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"));