Skip to content

Commit e7ad0db

Browse files
tabatkinstabatkins
committed
[css-anchor-position-1] Replace anchor() example with a good min/max tooltip one.
1 parent 72affc8 commit e7ad0db

File tree

2 files changed

+192
-174
lines changed

2 files changed

+192
-174
lines changed

‎css-anchor-position-1/Overview.bs‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -967,35 +967,43 @@ etc.
967967
Because the ''anchor()'' function resolves to a <<length>>,
968968
it can be used in [=math functions=] like any other length.
969969

970-
ISSUE(10776): Add a better example; this one can be accomplished easily with ''align-self/anchor-center''.
971-
972-
For example, the following will set up the element
973-
so that its [=inset-modified containing block=]
974-
is centered on the [=anchor box=]
975-
and as wide as possible without overflowing the [=containing block=]:
976-
977-
<pre highlight=css>
978-
.centered-message {
979-
position: fixed;
980-
max-width: max-content;
981-
justify-self: center;
982-
983-
--center: anchor(--x 50%);
984-
--half-distance: min(
985-
abs(0% - var(--center)),
986-
abs(100% - var(--center))
987-
);
988-
left: calc(var(--center) - var(--half-distance));
989-
right: calc(var(--center) - var(--half-distance));
990-
bottom: anchor(--x top);
970+
For example, in the following chart,
971+
the three bars are set up as possible anchors,
972+
and the min/max lines and tooltips use ''min()'' and ''max()''
973+
to combine ''anchor()'' functions referring to all three
974+
to find where to position themselves.
975+
You can use the range inputs below each column to adjust the heights,
976+
and see that the anchored lines and tooltips dynamically adjust
977+
to whichever bar is the highest/lowest.
978+
979+
<iframe src="examples/calc-anchor.html" style="width: 80%; aspect-ratio: 5 / 3; margin: 1em 10%;"></iframe>
980+
981+
The important fragment of the code to accomplish this is:
982+
983+
<xmp highlight=css>
984+
#bar-1 { anchor-name: --anchor-1; }
985+
#bar-2 { anchor-name: --anchor-2; }
986+
#bar-3 { anchor-name: --anchor-3; }
987+
.line {
988+
position: absolute;
989+
left: anchor(--chart left);
990+
right: anchor(--chart right);
991+
&.max {
992+
bottom: max(
993+
anchor(--anchor-1 top),
994+
anchor(--anchor-2 top),
995+
anchor(--anchor-3 top)
996+
);
997+
}
998+
&.min {
999+
bottom: min(
1000+
anchor(--anchor-1 top),
1001+
anchor(--anchor-2 top),
1002+
anchor(--anchor-3 top)
1003+
);
1004+
}
9911005
}
992-
</pre>
993-
994-
This might be appropriate for an error message
995-
on an <{input}> element,
996-
for example,
997-
as the centering will make it easier to discover
998-
which input is being referred to.
1006+
</xmp>
9991007
</div>
10001008

10011009
<h4 id=anchor-resolution oldids=anchor-valid>

‎css-anchor-position-1/examples/calc-anchor.html‎

Lines changed: 156 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -4,166 +4,176 @@
44
<title>Anchor + calc() example</title>
55

66
<div class="chart">
7-
<div class="chart__bar" id="bar-1"></div>
8-
<div class="chart__bar" id="bar-2"></div>
9-
<div class="chart__bar" id="bar-3"></div>
7+
<div class="bar" id="bar-1" style="height:90%"></div>
8+
<div class="bar" id="bar-2" style="height:25%"></div>
9+
<div class="bar" id="bar-3" style="height:75%"></div>
10+
<div class="bg"></div>
1011
</div>
11-
<div popover=manual class="chart__tooltip chart__tooltip--max">👈 Max!</div>
12-
<div popover=manual class="chart__tooltip chart__tooltip--min">Min! 👉</div>
1312
<div class="actions">
14-
<input data-bar-id="bar-1" type="range" min="0" max="100" value="90" />
15-
<input data-bar-id="bar-2" type="range" min="0" max="100" value="25" />
16-
<input data-bar-id="bar-3" type="range" min="0" max="100" value="75" />
13+
<input data-bar-id="bar-1" type="range" min="0" max="100" value="90" />
14+
<input data-bar-id="bar-2" type="range" min="0" max="100" value="25" />
15+
<input data-bar-id="bar-3" type="range" min="0" max="100" value="75" />
1716
</div>
17+
<div class="line max"></div>
18+
<div class="line min"></div>
19+
<div class="tooltip max">👈 Max!</div>
20+
<div class="tooltip min">Min! 👉</div>
1821

1922
<style>
2023
@layer demo {
21-
.chart__bar:nth-of-type(1) {
22-
anchor-name: --anchor-1;
23-
}
24-
25-
.chart__bar:nth-of-type(2) {
26-
anchor-name: --anchor-2;
27-
}
28-
29-
.chart__bar:nth-of-type(3) {
30-
anchor-name: --anchor-3;
31-
}
32-
33-
.chart {
34-
anchor-name: --chart;
35-
}
36-
37-
[popover] { inset: unset; }
38-
39-
.chart__tooltip {
40-
position: absolute;
41-
height: 2em;
42-
translate: 0 50%;
43-
overflow: visible;
44-
background: black;
45-
color: white;
46-
border: none;
47-
place-content: center;
48-
}
49-
50-
.chart__tooltip--max {
51-
left: anchor(--chart right);
52-
bottom: max(
53-
anchor(--anchor-1 top),
54-
anchor(--anchor-2 top),
55-
anchor(--anchor-3 top)
56-
);
57-
&::after {
58-
content: "";
59-
position: absolute;
60-
right: 100%;
61-
top: 0;
62-
bottom: 0;
63-
border: solid transparent 2px;
64-
border-right-color: black;
65-
border-width: 1em 1em 1em 0;
66-
}
67-
}
68-
.chart__tooltip--min {
69-
position: absolute;
70-
right: calc(anchor(--chart left) + 1rem);
71-
bottom: min(
72-
anchor(--anchor-1 top),
73-
anchor(--anchor-2 top),
74-
anchor(--anchor-3 top)
75-
);
76-
translate: 0 50%;
77-
}
24+
.chart {
25+
anchor-name: --chart;
26+
#bar-1 { anchor-name: --anchor-1; }
27+
#bar-2 { anchor-name: --anchor-2; }
28+
#bar-3 { anchor-name: --anchor-3; }
29+
}
30+
31+
.line {
32+
position: absolute;
33+
left: anchor(--chart left);
34+
right: anchor(--chart right);
35+
border-bottom: 2px dashed gray;
36+
&.max {
37+
bottom: max(
38+
anchor(--anchor-1 top),
39+
anchor(--anchor-2 top),
40+
anchor(--anchor-3 top)
41+
);
42+
margin-left: 1em;
43+
anchor-name: --line-max;
44+
}
45+
&.min {
46+
bottom: min(
47+
anchor(--anchor-1 top),
48+
anchor(--anchor-2 top),
49+
anchor(--anchor-3 top)
50+
);
51+
margin-right: 1em;
52+
anchor-name: --line-min;
53+
}
54+
}
55+
56+
57+
.tooltip.max {
58+
position: absolute;
59+
position-anchor: --line-max;
60+
position-area: right;
61+
padding-right: .5em;
62+
margin-left: 1em;
63+
&::after {
64+
content: "";
65+
position: absolute;
66+
left: -1em;
67+
inset-block: 0;
68+
border: solid transparent 1em;
69+
border-right-color: black;
70+
border-left-width: 0px;
71+
}
72+
}
73+
.tooltip.min {
74+
position: absolute;
75+
position-anchor: --line-min;
76+
position-area: left;
77+
padding-left: .5em;
78+
margin-right: 1em;
79+
&::after {
80+
content: "";
81+
position: absolute;
82+
right: -1em;
83+
top: 0;
84+
bottom: 0;
85+
border: solid transparent 1em;
86+
border-left-color: black;
87+
border-right-width: 0px;
88+
}
89+
}
7890
}
7991
@layer base {
80-
:root {
81-
--anchor-size: 50px;
82-
--anchored-size: 250px;
83-
}
84-
85-
*,
86-
*:after,
87-
*:before {
88-
box-sizing: border-box;
89-
}
90-
91-
body {
92-
display: grid;
93-
place-items: center;
94-
align-content: center;
95-
gap: 1rem;
96-
min-height: 100vh;
97-
font-family: "Google Sans", sans-serif, system-ui;
98-
background: var(--gray-1);
99-
position: relative;
100-
overflow: hidden;
101-
}
102-
103-
.actions {
104-
width: 60vmin;
105-
display: grid;
106-
grid-template-columns: repeat(3, 1fr);
107-
grid-gap: 1rem;
108-
padding: 1rem;
109-
}
110-
111-
input {
112-
min-width: 0;
113-
}
114-
115-
.chart {
116-
width: 60vmin;
117-
aspect-ratio: 4 / 3;
118-
display: grid;
119-
grid-template-columns: repeat(3, 1fr);
120-
gap: 1rem;
121-
padding: 1rem;
122-
align-items: end;
123-
border-left: 4px solid var(--gray-9);
124-
border-bottom: 4px solid var(--gray-9);
125-
}
126-
127-
.chart__bar {
128-
background: var(--bg, var(--indigo-4));
129-
height: calc(var(--height, 100) * 1%);
130-
}
131-
132-
.chart__bar:nth-of-type(1) {
133-
anchor-name: --anchor-1;
134-
--bg: #4dabf7;
135-
height: 90%;
136-
}
137-
138-
.chart__bar:nth-of-type(2) {
139-
anchor-name: --anchor-2;
140-
--bg: #69db7c;
141-
height: 25%;
142-
}
143-
144-
.chart__bar:nth-of-type(3) {
145-
anchor-name: --anchor-3;
146-
--bg: #ff8787;
147-
height: 75%;
148-
}
92+
:root {
93+
--anchor-size: 50px;
94+
--anchored-size: 250px;
95+
}
96+
97+
*,
98+
*:after,
99+
*:before {
100+
box-sizing: border-box;
101+
}
102+
103+
body {
104+
display: grid;
105+
place-items: center;
106+
align-content: center;
107+
gap: 1rem;
108+
min-height: 100vh;
109+
font-family: "Google Sans", sans-serif, system-ui;
110+
background: #eee;
111+
position: relative;
112+
overflow: hidden;
113+
}
114+
115+
.actions {
116+
width: 80vmin;
117+
display: grid;
118+
grid-template-columns: repeat(3, 1fr);
119+
grid-gap: 1rem;
120+
padding: 1rem;
121+
}
122+
123+
input {
124+
min-width: 0;
125+
}
126+
127+
.chart {
128+
width: 80vmin;
129+
aspect-ratio: 4 / 3;
130+
display: grid;
131+
grid-template-columns: repeat(3, 1fr);
132+
gap: 1rem;
133+
padding: 1rem;
134+
align-items: end;
135+
background: white;
136+
position: relative;
137+
.bg {
138+
position: absolute;
139+
inset: 0;
140+
grid-row: 1;
141+
grid-column: 1 / -1;
142+
z-index: 0;
143+
background: repeating-linear-gradient(to top, transparent 0 calc(10% - 1px), #eee 0 10%);
144+
}
145+
.bar {
146+
z-index: 1;
147+
}
148+
}
149+
150+
#bar-1 {background-color: #4dabf7;}
151+
#bar-2 {background-color: #69db7c;}
152+
#bar-3 {background-color: #ff8787;}
153+
154+
.tooltip {
155+
position: absolute;
156+
height: 2em;
157+
overflow: visible;
158+
background: black;
159+
color: white;
160+
border: none;
161+
place-content: center;
162+
}
163+
.line {
164+
z-index: 2;
165+
}
149166
}
150167
</style>
151168

152169
<script>
153170
// Just a little script to hook up the bar heights to the range inputs.
154-
const INPUTS = document.querySelectorAll("input");
155-
const POPS = document.querySelectorAll("[popover]")
156-
157-
POPS.forEach(pop => pop.showPopover())
158-
159-
const update = (e) => {
160-
document.querySelector(
161-
`#${e.target.getAttribute("data-bar-id")}`
162-
).style.height = `${e.target.value}%`;
171+
const update = e => {
172+
document.getElementById(e.target.getAttribute("data-bar-id") )
173+
.style.height = `${e.target.value}%`;
163174
};
164175

165-
INPUTS.forEach((input) => {
166-
console.info(input);
167-
input.addEventListener("input", update);
176+
document.querySelectorAll("input").forEach(input => {
177+
input.addEventListener("input", update);
168178
});
169179
</script>

0 commit comments

Comments
 (0)