Edits to the first guide #3
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
estelle
commented
Jun 8, 2024
There was a problem hiding this comment.
@chrisdavidmills It was less overwhelming for me to edit locally than to use the GUI to make comments, and also my wrist hurt, so less mousing. Let me know if PRs to your PR work for you or not. (I'll stop if they don't work, but this was so much easier for me for this large PR)
| inset-area: right; | ||
| margin-left: 5px; | ||
| width: calc(anchor-size(width) * 5); | ||
| } | ||
| ``` | ||
|
|
||
| In addition, we increase the anchor element's {{cssxref("width")}} on {{cssxref(":hover")}} and {{cssxref(":focus")}}, and give it a {{cssxref("transition")}} so that it animates when the state changes. | ||
| In addition, we increase the anchor element's {{cssxref("width")}} on {{cssxref(":hover")}} and give it a {{cssxref("transition")}} so that it animates when the state changes. |
There was a problem hiding this comment.
it's not an interactive element, so it can't have focus
| @@ -653,11 +648,7 @@ body { | |||
| width: 50%; | |||
| margin: 0 auto; | |||
| } | |||
| ``` | |||
|
|
|||
| The infobox is given fixed positioning and associated with the anchor in the same way as before. However, this time around we tether it to the right of the anchor using an `inset-area`, and give it a width five times the width of the anchor's width: | |||
There was a problem hiding this comment.
just moved this up and made the hidden stuff one block
|
|
||
| ```css | ||
| .elem { | ||
| inline-size: calc(anchor-size(self-inline) * 4); | ||
| } | ||
| ``` | ||
|
|
||
| Let's look at an example. The HTML is the same as in the previous examples, and the anchor element and `<body>` element are given the same basic styling. | ||
| Let's look at an example. The HTML and base CSS are the same as in the previous examples. The infobox is given fixed positioning and associated with the anchor in the same way as before. However, this time around we tether it to the right of the anchor using an `inset-area`, and give it a width five times the width of the anchor's width: |
|
|
||
| top: anchor(bottom); | ||
| margin-top: 5px; | ||
| top: calc(anchor(bottom) + 5px); |
|
|
||
| When a positioned element is placed into `inset-area` grid cells without explicit sizing, it aligns with the grid area specified and behaves as if {{cssxref("width")}} were set to {{cssxref("max-content")}}. It is sized according to its [containing block](/en-US/docs/Web/CSS/Containing_block) size, which is the width of its content. This size was imposed by setting `position: fixed`. Auto-sized absolutely and fixed-positioned elements are automatically sized so as to fit their contents, stretching as wide as needed to fit the text content, while constrained by the edge of the viewport. in this case, when placed on the left side of the grid with any `left` or `inline-start` value, the text wraps. | ||
| When a positioned element is placed into `inset-area` grid cells without explicit sizing, it aligns with the grid area specified and behaves as if {{cssxref("width")}} were set to {{cssxref("max-content")}}. It is sized according to its [containing block](/en-US/docs/Web/CSS/Containing_block) size, which is the width of its content. This size was imposed by setting `position: fixed`. Auto-sized absolutely and fixed-positioned elements are automatically sized, stretching as wide as needed to fit the text content, while constrained by the edge of the viewport, but not growing to match the size of the anchor if `max-content` leads to a positioned element that is narrower or shorter than its anchor. In this case, when placed on the left side of the grid with any `left` or `inline-start` value, the text wraps. |
There was a problem hiding this comment.
if the positioned element is just one character, it doesn't grow, so it may be narrower than the anchor
| @@ -371,8 +380,6 @@ Let's demonstrate some of these values in action; this example uses exactly the | |||
| </form> | |||
| ``` | |||
|
|
|||
| The anchor element and `<body>` element are given the same CSS as before. We have given the `<select>` form some simple styling and fixed its position in the top-right of the viewport: | |||
There was a problem hiding this comment.
just moved it up and combined the hidden CSS blocks
|
|
||
| - `inset-block-start: anchor(end)`: Here we are setting the positioned element's block start edge to have the same position along the block axis as the anchor's block end edge (calculated using the `anchor(end)` function). | ||
| - `inset-inline-start: anchor(self-end)`: Here we are setting the positioned element's inline start edge to have the same position along the inline axis as the anchor's inline end edge (calculated using the `anchor(self-end)` function). | ||
| - `inset-block-start: anchor(end)`: This set the positioned element's block start edge to the position of the anchor's block end edge along the block axis, calculated using the `anchor(end)` function. |
|
|
||
| - : Specified as a {{cssxref("length-percentage")}} defining the distance to use as a fallback value if the element is not absolutely or fixed positioned, if the axis of the anchor side is not valid for the property on which the `anchor()` function is set, or if the anchor element doesn't exist. | ||
|
|
||
| The return value of the `anchor()` function is a length value calculated based on the position of the anchor. If you set a length or percentage directly on an anchor-positioned element's inset property, the value is relative to where the element is in the source code, where it would be placed with that value if it were not bound to the anchor element. This is the behavior seen if the anchor-side is invalid for the inset property on which it is set and the fallback is used. These two declarations are equivalent: |
There was a problem hiding this comment.
we never really explain what happens if anchor() isn't used. this was my attempt.
basically, anchor() does a lot of math, so we don't have to.
|
|
||
| As we saw above, associating a positioned element with an anchor is not really much use on its own. You also need to specify the position of the element relative to the anchor. This is done either by setting a CSS [`anchor()`](/en-US/docs/Web/CSS/anchor) function value on an [inset property](/en-US/docs/Glossary/Inset_properties), specifying an {{cssxref("inset-area")}}, or centering the positioned element with the [`anchor-center` placement value](#centering_on_the_anchor_using_anchor-center). | ||
| As we saw above, associating a positioned element with an anchor is not really much use on its own. Our goal is to position the positioned element relative to its associated anchor element. This is done either by setting a [CSS `anchor()` function](#using-inset-properties-with-anchor-function-values) value on an [inset property](/en-US/docs/Glossary/Inset_properties), [specifying an `inset-area`](#using-an-inset-area), or centering the positioned element with the [`anchor-center` placement value](#centering_on_the_anchor_using_anchor-center). |
There was a problem hiding this comment.
this paragraphi is more of a table of contents, so let's link to the sections rather than other pages.
Optionally, set it as an OL or UL
| @@ -74,8 +74,6 @@ The positioned element is then associated with the anchor element by setting its | |||
| } | |||
| ``` | |||
|
|
|||
| > **Note:** Elements need to be absolutely or fixed [positioned](/en-US/docs/Learn/CSS/CSS_layout/Positioning) to be associated with anchors. | |||
|
OK, while this system seems to work OK, I've already spotted some mistakes your edits have introduced into the text. I think the quickest way to deal with this will be for me to merge it, then I'll go through and fix the mistakes as needed. |
1938693
into
chrisdavidmills:css-anchor-positioning-1
3 checks passed
|
OK, not many fixes to make. I added back in the focus stuff on the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Motivation
Additional details
Related issues and pull requests