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

chrisdavidmills · 2024-05-09T10:49:38Z

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~~ -> Now being added in inset-area: property and data type: anchor positioning #6 #34462
~~The <inset-area> type~~ -> Now being added in inset-area: property and data type: anchor positioning #6 #34462

Do not merge until #33058 is merged.

Motivation

Additional details

Related issues and pull requests

github-actions · 2024-05-09T10:50:56Z

Preview URLs (17 pages)

Flaws (6)

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

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

macros:
- /en-US/docs/Web/CSS/inset-area does not exist

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

macros:
- /en-US/docs/Web/CSS/inset-area does not exist

URL: /en-US/docs/Web/CSS/position-visibility
Title: position-visibility
Flaw count: 3

macros:
- /en-US/docs/Web/CSS/position-try-options does not exist
- /en-US/docs/Web/CSS/@position-try does not exist
- /en-US/docs/Web/CSS/inset-area does not exist

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

macros:
- /en-US/docs/Web/CSS/inset-area does not exist

(comment last updated: 2024-07-02 12:38:10)

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.

files/en-us/web/css/inset-area/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

estelle

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

estelle · 2024-05-13T23:35:49Z

files/en-us/web/css/inset-area/inset-area.drawio

+<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">


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"

source file for the diagram. I'm not messing with the code for this ;-)

estelle · 2024-05-13T23:49:33Z

files/en-us/web/css/anchor-size/index.md

+
+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**.
+
+For detailed information on anchor usage, see the [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page.


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.

Already fixed this.

estelle · 2024-05-13T23:58:18Z

files/en-us/web/css/max-block-size/index.md

+max-block-size: anchor-size(height);
+max-block-size: anchor-size(--my-anchor block);


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%);

ok, I've made some updates

estelle · 2024-05-16T17:40:24Z

files/en-us/web/css/anchor-size/index.md

+
+{{CSSRef}}
+
+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**.


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.

I'm not convinced this is needed. We've got links for more information for people that are confused as to what this means.

ok. will debold.

estelle

An <inset-area> data type page should be created.

estelle · 2024-06-03T23:26:51Z

files/en-us/web/css/anchor-size/index.md

+The `anchor-size()` function's syntax is as follows:
+
+```text
+anchor(anchor-element anchor-size, length-percentage)


Suggested change

anchor(anchor-element anchor-size, length-percentage)

anchor-size(anchor-element anchor-size, length-percentage)

oops, fixed!

estelle · 2024-06-03T23:27:06Z

files/en-us/web/css/anchor-size/index.md

+The parameters are:
+
+- `anchor-element` {{optional_inline}}
+  - : The {{cssxref("anchor-name")}} set on the anchor element you want to size an element relative to. This is optional — if omitted, the positioned element is sized relative to the anchor referenced by its {{cssxref("position-anchor")}} property (this is sometimes referred to as the element's **default anchor**).


same comments as anchor()

estelle · 2024-06-03T23:27:23Z

files/en-us/web/css/anchor-size/index.md

+  - : The {{cssxref("anchor-name")}} set on the anchor element you want to size an element relative to. This is optional — if omitted, the positioned element is sized relative to the anchor referenced by its {{cssxref("position-anchor")}} property (this is sometimes referred to as the element's **default anchor**).
+- `anchor-size`
+
+  - : Specifies the dimension of the anchor element that the positioned element will be sized relative to. This can be expressed using the following values:


same comments as anchor()

estelle · 2024-06-03T23:27:43Z

files/en-us/web/css/anchor-size/index.md

+
+### Return value
+
+Returns a {{cssxref("length")}} value.


same comments as anchor()

same counter comment as for anchor()

estelle · 2024-06-03T23:27:56Z

files/en-us/web/css/anchor-size/index.md

+
+The properties that can take an `anchor-size()` function as a value are as follows:
+
+- Physical sizing properties: {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, and {{cssxref("max-height")}}.


just a list.

estelle · 2024-06-04T00:15:41Z

files/en-us/web/css/inset-area/index.md

+
+{{CSSRef}}{{seecompattable}}
+
+The **`inset-area`** [CSS](/en-US/docs/Web/CSS) property enables an **anchor-positioned** element to be positioned relative to the edges of its associated **anchor element** by placing the positioned element on one or more tiles of an implicit 3x3 grid called the **inset-area grid**. This provides an alternative to positioning an element relative to its anchor via inset properties and the {{cssxref("anchor()")}} function.


Suggested change

The **`inset-area`** [CSS](/en-US/docs/Web/CSS) property enables an **anchor-positioned** element to be positioned relative to the edges of its associated **anchor element** by placing the positioned element on one or more tiles of an implicit 3x3 grid called the **inset-area grid**. This provides an alternative to positioning an element relative to its anchor via inset properties and the {{cssxref("anchor()")}} function.

The **`inset-area`** [CSS](/en-US/docs/Web/CSS) property enables an **anchor-positioned** element to be positioned relative to the edges of its associated **anchor element** by placing the positioned element on one or more tiles of an implicit 3x3 grid called the **inset-area grid**. This provides an alternative to positioning an element relative to its anchor via {{glossary("inset properties")}} and the {{cssxref("anchor()")}} function.

Good call; added

estelle · 2024-06-04T00:18:26Z

files/en-us/web/css/inset-area/index.md

+/* Examples: Two keywords to place the element in a single specific tile */
+/* Physical */
+inset-area: top left;
+inset-area: bottom right;
+/* Logical */
+inset-area: start end;
+inset-area: center end;
+inset-area: block-start center;
+inset-area: inline-start block-end;
+/* Coordinate-based */
+inset-area: x-start y-end;
+inset-area: center y-self-end;
+
+/* Examples: Two keywords to span the element across two tiles */
+/* Physical */
+inset-area: top span-left;
+inset-area: span-bottom right;
+/* Logical */
+inset-area: center span-start;
+inset-area: inline-start span-block-end;
+/* Coordinate-based */
+inset-area: y-start span-x-end;


Suggested change

/* Examples: Two keywords to place the element in a single specific tile */

/* Physical */

inset-area: top left;

inset-area: bottom right;

/* Logical */

inset-area: start end;

inset-area: center end;

inset-area: block-start center;

inset-area: inline-start block-end;

/* Coordinate-based */

inset-area: x-start y-end;

inset-area: center y-self-end;

/* Examples: Two keywords to span the element across two tiles */

/* Physical */

inset-area: top span-left;

inset-area: span-bottom right;

/* Logical */

inset-area: center span-start;

inset-area: inline-start span-block-end;

/* Coordinate-based */

inset-area: y-start span-x-end;

/* Two keywords placing the element in a single specific tile */

inset-area: top left;

inset-area: bottom right;

inset-area: start end;

inset-area: center end;

inset-area: block-start center;

inset-area: inline-start block-end;

inset-area: x-start y-end;

inset-area: center y-self-end;

/* Two keywords spanning the element across two tiles */

inset-area: top span-left;

inset-area: span-bottom right;

inset-area: center span-start;

inset-area: inline-start span-block-end;

inset-area: y-start span-x-end;

estelle · 2024-06-04T01:32:02Z

files/en-us/web/css/inset-area/index.md

+/* Coordinate-based */
+inset-area: y-start span-x-end;
+
+/* Examples: Two keywords to span the element across three tiles */


how about something like:

/* Two keywords to span the element across three tiles, and their one keyword equivalents */
inset-area: top span-all;
inset-area: top;
inset-area: block-end span-all;
inset-area: block-end;

I'd rather not make this change, as it might lead readers to think that the implied second keyword is always span-all, when this is not the case. The next syntax section gives some correct single keyword examples, and the implied keyword situations are discussed in depth later on.

estelle · 2024-06-04T01:35:00Z

files/en-us/web/css/inset-area/index.md

+
+![The inset-area grid, as described below](inset-area.png)


Suggested change

![The inset-area grid, as described below](inset-area.png)

makes sense. Having that up front as well was a bit overkill. Deleted.

estelle · 2024-06-04T01:48:10Z

files/en-us/web/css/inset-area/index.md

+inset-area: unset;
+```
+
+### Values


This area should be fairly short:

two value only (<inset-area> and none), no intro sentence.
the inset area term should link to a new inset-area data type page that explains all the value, including the image.

Add all the rest under "description.

I disagreed with you about this initially, but on looking at it, I ended up agreeing. There is so much information on this page that it benefitted from being split, and the values are so much easier to explore in the separate page.

So, pages separated, let me know what you think.

files/en-us/web/css/anchor-size/index.md

files/en-us/web/css/inset-area_value/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

CSS anchor positioning PR #4

estelle

Yay! 🎉

Add anchor-size() function ref page

fc39b9a

chrisdavidmills requested a review from a team as a code owner May 9, 2024 10:49

chrisdavidmills requested review from estelle and removed request for a team May 9, 2024 10:49

chrisdavidmills marked this pull request as draft May 9, 2024 10:49

github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels May 9, 2024

chrisdavidmills mentioned this pull request May 9, 2024

Editorial review: CSS Anchor Positioning landing page and guide #33058

Merged

chrisdavidmills added 2 commits May 9, 2024 12:47

Add anchor-size() details to relevant property pages

7fddda7

Add inset-area ref page

143df3f

github-actions bot added size/l [PR only] 501-1000 LoC changed and removed size/m [PR only] 51-500 LoC changed labels May 11, 2024

chrisdavidmills marked this pull request as ready for review May 11, 2024 14:23

Merge branch 'main' into css-anchor-positioning-4

df5262c

mfreed7 reviewed May 14, 2024

View reviewed changes

chrisdavidmills added 3 commits May 15, 2024 09:22

Merge branch 'main' into css-anchor-positioning-4

19e47ab

Fixes for mfreed7 review comments

a8a67ff

Merge branch 'main' into css-anchor-positioning-4

989e788

chrisdavidmills requested a review from mfreed7 May 15, 2024 09:17

github-actions bot reviewed May 15, 2024

View reviewed changes

files/en-us/web/css/inset-area/index.md Outdated Show resolved Hide resolved

Update files/en-us/web/css/inset-area/index.md

4e4af03

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

estelle reviewed May 16, 2024

View reviewed changes

chrisdavidmills changed the title ~~Tech review: CSS anchor positioning 4: sizing and positioning part 2~~ Editorial review: CSS anchor positioning 4: sizing and positioning part 2 May 21, 2024

Merge branch 'main' into css-anchor-positioning-4

2e5bf9a

estelle mentioned this pull request May 27, 2024

Anchor positioning: css module openwebdocs/project#178

Closed

chrisdavidmills added 4 commits May 31, 2024 13:22

Change anchor names to make them more distinct and less confusing

e13e118

Fix wording and casing for reference links

b1ff88c

Anchor name consistency

dc680e0

update anchor-size() fallback description

48ff49a

estelle reviewed Jun 4, 2024

View reviewed changes

estelle comments answered, inset-area type page added

800cd21

github-actions bot added size/xl [PR only] >1000 LoC changed and removed size/l [PR only] 501-1000 LoC changed labels Jun 5, 2024

github-actions bot reviewed Jun 5, 2024

View reviewed changes

files/en-us/web/css/anchor-size/index.md Outdated Show resolved Hide resolved

github-actions bot reviewed Jun 5, 2024

View reviewed changes

files/en-us/web/css/inset-area_value/index.md Outdated Show resolved Hide resolved

chrisdavidmills and others added 3 commits June 5, 2024 10:46

Update files/en-us/web/css/anchor-size/index.md

f914db6

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Merge branch 'main' into css-anchor-positioning-4

4690bcb

fix relative link error

7c4025d

chrisdavidmills requested a review from estelle June 5, 2024 11:25

chrisdavidmills and others added 10 commits June 14, 2024 10:09

Update syntax section for consistency

9381333

Simply CSS explanation

94385c0

improve see also links

78ac1c0

Merge branch 'main' into css-anchor-positioning-4

40ed111

remove bolding from words not subsequently defined

2e7ceff

removed from property values; integrated into length syntax.

e9b4290

integrated into length syntax.

cfb7bf1

anchor-size guide

1c7557e

anchor-size guide - reread edits

ed12f90

Merge pull request #10 from mdn/ap4-1

693e118

CSS anchor positioning PR #4

chrisdavidmills requested a review from a team as a code owner June 27, 2024 07:26

github-actions bot added the Content:HTML Hypertext Markup Language docs label Jun 27, 2024

few final tweaks to anchor-size()

67e9862

estelle mentioned this pull request Jun 27, 2024

move inset-area and data type chrisdavidmills/content#11

Closed

chrisdavidmills added 2 commits July 2, 2024 13:30

Merge branch 'main' into css-anchor-positioning-4

3196892

remove inset-area property and value pages

7de2557

github-actions bot added size/m [PR only] 51-500 LoC changed and removed size/xl [PR only] >1000 LoC changed labels Jul 2, 2024

estelle approved these changes Jul 2, 2024

View reviewed changes

estelle merged commit 9591173 into mdn:main Jul 2, 2024
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

chrisdavidmills commented May 9, 2024 •

edited

Loading

github-actions bot commented May 9, 2024 •

edited

Loading

mfreed7 left a comment

estelle left a comment

estelle May 13, 2024

chrisdavidmills Jun 4, 2024

estelle May 13, 2024

chrisdavidmills Jun 4, 2024

estelle May 13, 2024

chrisdavidmills Jun 4, 2024

estelle May 16, 2024

chrisdavidmills Jun 4, 2024

estelle Jun 26, 2024

estelle left a comment

estelle Jun 3, 2024

chrisdavidmills Jun 4, 2024

estelle Jun 3, 2024

chrisdavidmills Jun 5, 2024

estelle Jun 3, 2024

chrisdavidmills Jun 5, 2024

estelle Jun 3, 2024

chrisdavidmills Jun 5, 2024

estelle Jun 3, 2024

chrisdavidmills Jun 5, 2024

estelle Jun 4, 2024

chrisdavidmills Jun 5, 2024

estelle Jun 4, 2024

chrisdavidmills Jun 5, 2024

estelle Jun 4, 2024

chrisdavidmills Jun 5, 2024

estelle Jun 4, 2024

chrisdavidmills Jun 5, 2024 •

edited

Loading

estelle Jun 4, 2024

chrisdavidmills Jun 5, 2024

estelle left a comment


		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.

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

		max-block-size: anchor-size(height);
		max-block-size: anchor-size(--my-anchor block);


		{{CSSRef}}

		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.

	anchor(anchor-element anchor-size, length-percentage)
	anchor-size(anchor-element anchor-size, length-percentage)


		The properties that can take an `anchor-size()` function as a value are as follows:

		- Physical sizing properties: {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, and {{cssxref("max-height")}}.


		{{CSSRef}}{{seecompattable}}

		The `inset-area` [CSS](/en-US/docs/Web/CSS) property enables an anchor-positioned element to be positioned relative to the edges of its associated anchor element by placing the positioned element on one or more tiles of an implicit 3x3 grid called the inset-area grid. This provides an alternative to positioning an element relative to its anchor via inset properties and the {{cssxref("anchor()")}} function.

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

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

Conversation

chrisdavidmills commented May 9, 2024 • edited Loading

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented May 9, 2024 • edited Loading

mfreed7 left a comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisdavidmills Jun 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

chrisdavidmills commented May 9, 2024 •

edited

Loading

github-actions bot commented May 9, 2024 •

edited

Loading

chrisdavidmills Jun 5, 2024 •

edited

Loading