CSS anchor positioning PR #4 #10
Conversation
| - `self-inline` | ||
| -: The length of the anchor element in the inline direction. | ||
|
|
||
| - `width`: The width of the anchor element. |
There was a problem hiding this comment.
these edits create a list within a DL. before it was a bit wonky
| @@ -38,37 +39,54 @@ anchor-size(<anchor-element> <anchor-size>, <length-percentage>) | |||
| The parameters are: | |||
|
|
|||
| - `<anchor-element>` {{optional_inline}} | |||
| - : The `<dashed-ident>` name set as the value of the {{cssxref("anchor-name")}} property of the anchor element you want to size the element relative to. If omitted, the element's default anchor, which is the anchor referenced in the {{cssxref("position-anchor")}} property, is used. | |||
|
|
|||
| - : The [`anchor-name`](/en-US/docs/Web/CSS/anchor-name) property value of an anchor element you want to size the element relative to. This is a `<dashed-ident>` value. If omitted, the element's default anchor is used. | |||
There was a problem hiding this comment.
moved the omitted content to the description.
|
|
||
| - : The [`anchor-name`](/en-US/docs/Web/CSS/anchor-name) property value of an anchor element you want to size the element relative to. This is a `<dashed-ident>` value. If omitted, the element's default anchor is used. | ||
|
|
||
| > **Note:** Specifying an `<anchor-element>` inside an `anchor-size()` function neither associates nor tethers an element to an anchor; it only sizes the element relative to that anchor. |
There was a problem hiding this comment.
this is moved up from after the values.
| If the positioned element does not have an anchor associated with it (i.e. via the {{cssxref("position-anchor")}} property) and it has sizing properties with `anchor-size()` values set on it, the fallback value is used if one is available. If no fallback is available, the sizing properties have no effect. | ||
| The length returned is the vertical or horizontal size of an anchor element or its containing block. The dimension used is defined by the `<anchor-size>` parameter. If that parameter is omitted, the dimension used is will match the axis of the sizing property of the declaration. | ||
|
|
||
| The anchor element used as the basis for the dimension length is the element with the `anchor-name` property value containing the `<dashed-ident>` listed in the `<anchor-name>` parameter. If more than one element has the same anchor name, the last element with that anchor name in the DOM order is used. |
There was a problem hiding this comment.
this section includes new stuff
|
|
||
| The anchor element used as the basis for the dimension length is the element with the `anchor-name` property value containing the `<dashed-ident>` listed in the `<anchor-name>` parameter. If more than one element has the same anchor name, the last element with that anchor name in the DOM order is used. | ||
|
|
||
| If no `<anchor-name>` parameter is included in the function call, the element's **default anchor**, referenced in its [`position-anchor`](/en-US/docs/Web/CSS/position-anchor) property, or associated with the element via the [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) HTML attribute, is used. |
There was a problem hiding this comment.
Part of this was in the values. It's better to keep values short and provide definitions in the description when there is one.
| width: calc(anchor-size(width) * 2); | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| #infobox2 { | ||
| inset-area: top span-left; | ||
| inset-area: top span-right; |
There was a problem hiding this comment.
it was going off the left, and that's not what we're showing, and i didn't want to explain wrapping, so moved to right.
| {{EmbedLiveSample("Basic `anchor-size()` usage", "100%", "240")}} | ||
|
|
||
| Use your browser tools to inspect the anchor positioned elements. The first infobox will be `100px` tall and `200px` wide, while the second infobox will have a height of approximately `66.7px`, with the `width` defaulting to {{cssxref("max-content")}}. |
There was a problem hiding this comment.
this was the point of the updates to the example
| @@ -59,10 +59,6 @@ height: unset; | |||
| - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. | |||
| - `fit-content({{cssxref("<length-percentage>")}})` | |||
| - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`. | |||
| - {{cssxref("clamp", "clamp()")}} | |||
There was a problem hiding this comment.
we only include Formal Syntax values in the values section, not functions that are part of those, so removed all the occurrences of functions within values, which included this clamp. added minmax above to make up for it.
There was a problem hiding this comment.
Right, ok. That's not even part of the work I am doing, but whatever.
| @@ -90,7 +86,7 @@ p.goldie { | |||
| ``` | |||
|
|
|||
| ```html | |||
| <p class="goldie">The Mozilla community produces a lot of great software.</p> | |||
| <p class="goldie">The MDN community writes really great documentation.</p> | |||
| @@ -83,7 +83,7 @@ body { | |||
| } | |||
| ``` | |||
|
|
|||
| We use CSS to convert the `infobox` element into an **anchor-positioned element** and position it relative to its anchor. We set its: | |||
| We use CSS to convert the `infobox` element into an _anchor-positioned element_ and position it relative to its anchor. We set its: | |||
There was a problem hiding this comment.
since we don't define it, ** was not appropriate, but i felt it needed to stick out here.
@estelle I'd rather not mess about with splitting PRs at this point. I think it is OK to wait until next week on this one; we've managed to get two new ones published this week. I'll merge this one and then make a few tweaks, as per usual. |
chrisdavidmills
merged commit 693e118
into
chrisdavidmills:css-anchor-positioning-4
comments will be made in line
this is a review of everything except inset-area and inset-area value. those will likely take a bit more time; the rest is basically almost mergeable (anchor size is the holdup, but it's close). Do you want to separate inset-area and inset-area-value into a separate PR, so we can get the rest merged before the weekend?