|
5 | 5 | CSS Anchor Positioning Level 1 introduced a way to position and size absolute |
6 | 6 | positioned elements relative to a specific anchor element. |
7 | 7 |
|
8 | | -Note: This explainer currently does not explore the |
9 | | -[`::tether` proposal](https://github.com/w3c/csswg-drafts/issues/9271). |
10 | | - |
11 | 8 | There have been multiple requests to support styling of anchored elements based |
12 | 9 | on the chosen position. |
13 | 10 |
|
@@ -148,6 +145,28 @@ other fallback rules. See |
148 | 145 | [The @position-try Rule](https://drafts.csswg.org/css-anchor-position-1/#fallback-rule) |
149 | 146 |
|
150 | 147 |
|
| 148 | +## ::tether |
| 149 | +
|
| 150 | +There is an [alternative proposal](https://github.com/w3c/csswg-drafts/issues/9271) |
| 151 | +to introduce a `::tether` pseudo element for the tether rendering use case |
| 152 | +specifically. |
| 153 | +
|
| 154 | +Having a separate pseudo element for tethers could make them more convenient |
| 155 | +for authors to create if it is possible to construct UA styles which gives a |
| 156 | +sensible behavior for sizing and positioning in more than just the trivial use |
| 157 | +cases. As can be seen from |
| 158 | +[explorations in the issue](https://github.com/w3c/csswg-drafts/issues/9271#issuecomment-1721772484), |
| 159 | +this is complicated. |
| 160 | +
|
| 161 | +The codepen demo in the section below uses the `::after` element in the |
| 162 | +anchored element to render the tether. One thing to point out from the |
| 163 | +`::tether` proposal is that it is pulling the box for the pseudo element out as |
| 164 | +a sibling of its originating element, which is something one cannot do with the |
| 165 | +container query proposed here. However, pulling the box out like that is known |
| 166 | +to have [issues](https://github.com/w3c/csswg-drafts/issues/11213) with e.g. |
| 167 | +size container queries. It is not unlikely that an author would want the tether |
| 168 | +to respond to size queries on the anchored element. |
| 169 | +
|
151 | 170 | ## Use Cases and Author Requests |
152 | 171 |
|
153 | 172 | - https://github.com/w3c/csswg-drafts/issues/8171#issue-1472061771 |
|
0 commit comments