Editorial review: CSS anchor positioning 4: sizing and positioning part 2

[chrisdavidmills]

Description

CSS Anchor Positioning is set to be released in Chrome 125 (see the associated Chrome Status entry).

This PR (part of a series; see the first PR here) adds the following content:

• The anchor-size() function
• Properties that support anchor-size() as a value:
  • width
  • height
  • min-width
  • min-height
  • max-width
  • max-height
  • block-size
  • inline-size
  • min-block-size
  • min-inline-size
  • max-block-size
  • max-inline-size
• The inset-area property

Do not merge until #33058 is merged.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (14 pages)

• /en-US/docs/Web/CSS/anchor-size
• /en-US/docs/Web/CSS/block-size
• /en-US/docs/Web/CSS/height
• /en-US/docs/Web/CSS/inline-size
• /en-US/docs/Web/CSS/inset-area
• /en-US/docs/Web/CSS/max-block-size
• /en-US/docs/Web/CSS/max-height
• /en-US/docs/Web/CSS/max-inline-size
• /en-US/docs/Web/CSS/max-width
• /en-US/docs/Web/CSS/min-block-size
• /en-US/docs/Web/CSS/min-height
• /en-US/docs/Web/CSS/min-inline-size
• /en-US/docs/Web/CSS/min-width
• /en-US/docs/Web/CSS/width

Flaws (18)

Note! 6 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/height
Title: height
Flaw count: 1

• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning

---

URL: /en-US/docs/Web/CSS/inset-area
Title: inset-area
Flaw count: 6

• macros:
  • /en-US/docs/Web/CSS/anchor does not exist
  • /en-US/docs/Web/CSS/anchor-name does not exist
• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning
  • Can't resolve /en-US/docs/Web/CSS/anchor#properties_that_accept_anchor_function_values
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning/Using

---

URL: /en-US/docs/Web/CSS/min-width
Title: min-width
Flaw count: 1

• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning

---

URL: /en-US/docs/Web/CSS/min-height
Title: min-height
Flaw count: 1

• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning

---

URL: /en-US/docs/Web/CSS/max-width
Title: max-width
Flaw count: 1

• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning

---

URL: /en-US/docs/Web/CSS/width
Title: width
Flaw count: 1

• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning

---

URL: /en-US/docs/Web/CSS/max-height
Title: max-height
Flaw count: 1

• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning

---

URL: /en-US/docs/Web/CSS/anchor-size
Title: anchor-size()
Flaw count: 6

• macros:
  • /en-US/docs/Web/CSS/anchor-name does not exist
  • /en-US/docs/Web/CSS/position-anchor does not exist
  • /en-US/docs/Web/CSS/anchor-name does not exist
• broken_links:
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning
  • Can't resolve /en-US/docs/Web/CSS/CSS_anchor_positioning/Using

(comment last updated: 2024-05-21 08:25:18)

[mfreed7]

LGTM! Nice page on inset-area. I shared with a few more folks to double-check for accuracy. But my read looked pretty good.

[estelle]

started this review while still in draft. Publishing the four initial comments. this is NOT a full review.

[estelle]

Suggested change

	<mxfile host="app.diagrams.net" modified="2024-05-11T13:43:05.958Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:127.0) Gecko/20100101 Firefox/127.0" etag="L6tp-tvD06_g2Gk0fwGm" version="24.3.1" type="device">
	<diagram name="Page-1" id="UW3OLV6GaEz2t2Hav6oM">
	<mxGraphModel dx="1809" dy="871" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="3300" pageHeight="4681" math="0" shadow="0">
	<mxfile>
	<diagram>
	<mxGraphModel dx="1809" dy="871" pageWidth="3300" pageHeight="4681">

I don't think this is used, so we can delete the file.

I assume this created the PNG. But, if necessary to keep, can we convert to SVG and run through SVGOMG.

If keeping as drawio, is there an svgomg equivalent for it? None of the ids are used and empty values are, well, empty. rounded=0;whiteSpace=wrap;html=1; are likely all removable. Not sure about as="geometry"

[estelle]

Suggested change

	For detailed information on anchor usage, see the [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page.
	For detailed information on anchor usage, see the [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) guide.

The module page should just be a list of links to everything mentioned in the module. I see in the see also you're creating a guide, so that is likely where we want to link.

[estelle]

instead of re-using the exact same values on every property page, can we include different values so people see it being used with different values

Suggested change

	max-block-size: anchor-size(height);
	max-block-size: anchor-size(--my-anchor block);
	max-block-size: anchor-size(self-inline);
	max-block-size: anchor-size(--anchorNameValue block, 120%);

[estelle]

Define anchor element, maybe:

Suggested change

	The **`anchor-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) can be used as a value for an **anchor-positioned** element's [sizing properties](#properties_that_accept_anchor-size_function_values), to size it relative to the dimensions of its associated **anchor element**.
	The **`anchor-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) can be used as a value for an **anchor-positioned** element's [sizing properties](#properties_that_accept_anchor-size_function_values), to size it relative to the dimensions of its associated **anchor element**, the element you want to size an element relative to.