initial edits to positioning guide #4
Closed
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 10, 2024
|
|
||
| > **Note:** For information on the basic fundamentals of CSS anchor positioning, see [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using). | ||
|
|
||
| ## Feature summary | ||
|
|
||
| If a tool tip is fixed to the top-right of a UI element, if the user scrolls the content so that UI feature is in the top right corner of the viewport, that UI feature's tooltip will scroll off the screen. CSS anchor positioning solves such problems. The module's {{cssxref("position-try-options")}} property specifies one or more alternative position try options for the positioned element for the browser to try, to prevent it from overflowing. Try options can be specified using predefined try options, {{cssxref("inset-area")}} values (wrapped inside an [`inset-area()`](/en-US/docs/Web/CSS/inset-area_function) function), or custom options defined using the {{cssxref("@position-try")}} at-rule. | ||
| If a tooltip is fixed to the top-right of a UI element and the user scrolls the content so that UI feature is in the top-right corner of the viewport, that UI feature's tooltip will be out of the viewport and off the screen. CSS anchor positioning solves such problems. The module's {{cssxref("position-try-options")}} property specifies a comma separated list of one or more alternative positions for the positioned element for the browser to try, in the order listed, to prevent it from overflowing. Try options can be specified using [predefined try tactics](#predefined-try-options), {{cssxref("inset-area")}} values (wrapped inside an [`inset-area()`](/en-US/docs/Web/CSS/inset-area_function) function), or [custom options](#custom-try-options) defined using the {{cssxref("@position-try")}} at-rule. |
There was a problem hiding this comment.
create a table of contents for the page instead of linking to external resources.
|
|
||
| > **Note:** The shorthand property {{cssxref("position-try")}} can be used to specify `position-try-order` and `position-try-options` values in a single declaration. | ||
| The module also provides a {{cssxref("position-try")}} shorthand property which can be used to specify both `position-try-order` and `position-try-options` values in a single declaration. |
There was a problem hiding this comment.
this shoudl likely be after the props are covered.
|
|
||
| In some situations, anchor-positioned content does not make sense if the anchor is off-screen, or vice-versa. For example, you might have an anchor containing a quiz question, and answers contained in associated positioned elements, and wish to show them both together or not at all. This can be achieved with conditional hiding, which is managed via the {{cssxref("position-visibility")}} property. This property takes various values that define conditions under which overflowing elements will be hidden. | ||
|
|
||
| ## Predefined try options | ||
|
|
||
| The predefined try options values of the `position-try-options` property will "flip" the position of the anchor-positioned element across one or both axes if the element would otherwise overflow. The keyword values include: | ||
| The predefined try options values of the `position-try-options` property will "flip" the position of the anchor-positioned element across one or both axes if the element would otherwise overflow. The `<try-tactic>` keyword values include: |
There was a problem hiding this comment.
guides don't need to list all the properties; but if a list is in a guide, it needs to include them all. And, if we include them all, might as well use the data type.
| Try scrolling the demo so that the anchor starts to get near the edges: | ||
|
|
||
| {{ EmbedLiveSample("Using predefined try options", "100%", "250") }} | ||
|
|
||
| - Move the anchor to the top of the viewport. The positioned element flips to the bottom-left of the anchor to avoid overflowing. | ||
| - Move the anchor to the left of the viewport. The positioned element flips to the top-right of the anchor to avoid overflowing. | ||
| - Keep the anchor horizontally centered, and move the anchor to the top of the viewport. The positioned element flips to the bottom-left of the anchor to avoid overflowing. |
There was a problem hiding this comment.
if these don't stay centered you get the "ooops" we explain next. Prevents the oops too early.
|
@estelle OK, it sounds like you've got more to do on this one, so I'm leaving this until you've finished your edits. |
chrisdavidmills
added a commit
that referenced
this pull request
Jun 27, 2024
CSS anchor positioning PR #4
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.
started editing, then realized i don't know all the properties, so should do those PRs before this. Committing so it's not lost.