Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 70 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
70 commits
Select commit Hold shift + click to select a range
9e31158
CSS Anchor Positioning landing page and tutorial
chrisdavidmills Apr 12, 2024
20bf5f6
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills Apr 15, 2024
8ec419d
first part of guide
chrisdavidmills Apr 15, 2024
b197523
Add anchor() example
chrisdavidmills Apr 17, 2024
4d0836d
Add description and example of inst-area
chrisdavidmills Apr 17, 2024
b6012eb
Another couple fo sections done
chrisdavidmills Apr 30, 2024
50dabaa
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 1, 2024
93204bc
Final content updates
chrisdavidmills May 3, 2024
3df35bc
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 3, 2024
3072147
Add inset-area() function to landing page
chrisdavidmills May 3, 2024
759020f
Merge branch 'css-anchor-positioning-1' of github.com:chrisdavidmills…
chrisdavidmills May 3, 2024
8b44357
Fixes for mfreed7 review comments
chrisdavidmills May 7, 2024
3a1eab2
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 7, 2024
0a64f95
Few more fixes for mfreed7 review comments
chrisdavidmills May 12, 2024
ee4f0c2
Update the position-try-order demo to use inset properties rather tha…
chrisdavidmills May 14, 2024
30de3ec
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 14, 2024
25b4efd
Remove position-try-order
chrisdavidmills May 15, 2024
998bcf1
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 15, 2024
a7f7f15
typo fix
chrisdavidmills May 15, 2024
0b17054
add back position-try-order
chrisdavidmills May 16, 2024
7a2a558
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 16, 2024
02b65b6
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 24, 2024
4ab329c
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 24, 2024
c704730
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 24, 2024
95abeca
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 24, 2024
f553a16
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 24, 2024
e6aaf4d
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 24, 2024
5b9fea7
Partial fixes; more to come
chrisdavidmills May 25, 2024
efc36f2
Fixes for estelle review comments
chrisdavidmills May 27, 2024
1237adf
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 27, 2024
b1a6a23
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 30, 2024
1d95627
Next round of fixes for estelle review comments
chrisdavidmills May 31, 2024
5affd38
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills May 31, 2024
319b01e
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills May 31, 2024
d90b1fb
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills May 31, 2024
febeb77
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills May 31, 2024
7df5a41
Update files/en-us/web/css/css_anchor_positioning/index.md
chrisdavidmills May 31, 2024
3c86b63
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills May 31, 2024
be3fa5c
change anchor name to be more distinct and less confusion
chrisdavidmills May 31, 2024
d9b0703
Split guide into two
chrisdavidmills Jun 4, 2024
e59c317
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills Jun 4, 2024
c6dd389
Added link to inset-area type
chrisdavidmills Jun 5, 2024
a8b9dee
fixes for estelle review comments
chrisdavidmills Jun 6, 2024
2e5fb62
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 6, 2024
27650a9
Update files/en-us/web/css/css_anchor_positioning/try_options_hiding/…
chrisdavidmills Jun 6, 2024
4a35de4
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 6, 2024
2f19e93
Update files/en-us/web/css/css_anchor_positioning/try_options_hiding/…
chrisdavidmills Jun 6, 2024
2dd3330
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 6, 2024
2d542f5
small terminology fix
chrisdavidmills Jun 6, 2024
3080bfe
module page suggestions
estelle Jun 7, 2024
8c9557b
Edits to the first guide
estelle Jun 8, 2024
1ba2c5a
update inset-area row and column values info
chrisdavidmills Jun 11, 2024
da5217c
Merge pull request #2 from mdn/ap1
chrisdavidmills Jun 11, 2024
1938693
Merge pull request #3 from mdn/ap1-guide1
chrisdavidmills Jun 11, 2024
f8dad40
a few fixes to make
chrisdavidmills Jun 11, 2024
32d6904
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 11, 2024
e716b52
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
c3d139f
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
856795c
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
51012ab
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
0897b72
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
ae88d9a
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
fd7befd
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
3b5e5b7
Update files/en-us/web/css/css_anchor_positioning/using/index.md
chrisdavidmills Jun 15, 2024
c580a57
Update files/en-us/web/css/css_anchor_positioning/using/inset-area.dr…
chrisdavidmills Jun 15, 2024
4072d32
Final fixes to using guide
chrisdavidmills Jun 15, 2024
60390c7
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills Jun 15, 2024
1898599
Add anchor() info to make association vs position clear, and clarify …
chrisdavidmills Jun 18, 2024
b9f13a5
Fixes for estelle review comments
chrisdavidmills Jun 19, 2024
b3a3905
Merge branch 'main' into css-anchor-positioning-1
chrisdavidmills Jun 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
Update files/en-us/web/css/css_anchor_positioning/using/index.md
Co-authored-by: Estelle Weyl <[email protected]>
  • Loading branch information
chrisdavidmills and estelle committed Jun 15, 2024
commit 856795c832d430034b517447719d073ed2a26877
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Modern interfaces frequently call for some content — often reusable and dynami

The location of positioned elements relative to their anchor element needs to be maintained and adjusted as the anchor element moves or otherwise changes configuration (e.g. by scrolling, changing the viewport size, drag and drop, etc.). For example, if an element such as a form field gets close to the edge of the viewport, its tooltip may end up offscreen. Generally, you want to bind the tooltip to its form control and ensure the tooltip is kept fully visible on-screen as long as the form field is visible, automatically moving the tooltip if needed. You may have noticed this as the default behavior in your operating system when you right-click (<kbd>Ctrl</kbd> + click) context menus on your desktop or laptop.

Historically, associating an element with another element and dynamically changing a positioned element's location and size based on an anchor's position required JavaScript, which added complexity and performance issues. It also wasn't guaranteed to work in all situations. The features defined in the [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module enable implementing such use cases performantly and declaratively with CSS instead of JavaScript.
Historically, associating an element with another element and dynamically changing a positioned element's location and size based on an anchor's position required JavaScript, which added complexity and performance issues. It also wasn't guaranteed to work in all situations. The features defined in the [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module enable implementing such use cases performantly and declaratively with CSS (and HTML) instead of JavaScript.

## Associating anchor and positioned elements

Expand Down