-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
82 lines (68 loc) · 3.15 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
---
title: "ResizeObserverEntry: contentBoxSize property"
short-title: contentBoxSize
slug: Web/API/ResizeObserverEntry/contentBoxSize
page-type: web-api-instance-property
browser-compat: api.ResizeObserverEntry.contentBoxSize
---
{{APIRef("Resize Observer API")}}
The **`contentBoxSize`** read-only property of
the {{domxref("ResizeObserverEntry")}} interface returns an array containing the new
content box size of the observed element when the callback is run.
## Value
An array containing objects with the new content box size of the observed element.
The array is necessary to support elements that have multiple fragments, which occur in multi-column scenarios. Each object in the array contains two properties:
- `blockSize`
- : The length of the observed element's content box in the block dimension. For boxes
with a horizontal {{cssxref("writing-mode")}}, this is the vertical dimension, or
height; if the writing-mode is vertical, this is the horizontal dimension, or width.
- `inlineSize`
- : The length of the observed element's content box in the inline dimension. For boxes
with a horizontal {{cssxref("writing-mode")}}, this is the horizontal dimension, or
width; if the writing-mode is vertical, this is the vertical dimension, or height.
> **Note:** For more explanation of writing modes and block and inline
> dimensions, read [Handling different text directions](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
## Examples
The following snippet is taken from the [resize-observer-border-radius.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-border-radius.html)
([see source](https://github.com/mdn/dom-examples/blob/main/resize-observer/resize-observer-border-radius.html)) example. This example includes a green box, sized as a percentage of the
viewport size. When the viewport size is changed, the box's rounded corners change in
proportion to the size of the box. We could just implement this using
{{cssxref("border-radius")}} with a percentage, but that quickly leads to ugly-looking
elliptical corners; this solution gives you nice square corners that scale with the box
size.
```js
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"));
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}