Skip to content

Commit 2807934

Browse files
triple-underscoretriple-underscore
committed
[css-anchor-position-1] Replace anchor() example with a good min/max tooltip one. w3c/csswg-drafts@e7ad0db 
1 parent 2065702 commit 2807934

2 files changed

Lines changed: 235 additions & 41 deletions

File tree

‎css-anchor-position-ja.html‎

Lines changed: 56 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,8 @@
123123
●●options
124124

125125
spec_title:CSS Anchor Positioning Module level 1
126-
spec_date:2026-01-30
127-
trans_update:2026-01-31
126+
spec_date:2026-03-24
127+
trans_update:2026-03-25
128128
source_checked:251222
129129
page_state_key:CSS
130130
original_url:https://drafts.csswg.org/css-anchor-position-1/
@@ -276,6 +276,8 @@
276276
f.env:~CSSENV#funcdef-env
277277
f.var:~CSSVAR#funcdef-var
278278
f.random:~CSSVAL5#funcdef-random
279+
f.min:~CSSVAL#funcdef-min
280+
f.max:~CSSVAL#funcdef-max
279281

280282
t.position-area:#typedef-position-area
281283
t.anchor-name:#typedef-anchor-name
@@ -364,7 +366,6 @@
364366
pe.part():~CSSSHADOW#selectordef-part
365367

366368
● code 他
367-
e.input:~HEinput#the-input-element
368369
e.li:~HEgrouping#the-li-element
369370

370371
a.popover:~HTMLpopover#attr-popover
@@ -585,7 +586,6 @@
585586
面積:area:~
586587

587588
縦幅:tall
588-
幅広:wide
589589
横幅:wide
590590
の距離を成す:separating
591591
を挟んで鏡写しに:mirroring across 〜 line
@@ -818,7 +818,6 @@
818818
ようになり:end up
819819
ようになった:end up with
820820
〜とする:say
821-
し易く:make it easier
822821
アリ性:possibility
823822
他では:otherwise
824823
〜を除いて:save that
@@ -880,7 +879,6 @@
880879
挙動を〜に代えて〜基づくよう:rebase 〜 instead of
881880
に代えて:in place of
882881
従うよう:as per
883-
し易く:easier
884882
外されて:left out
885883
どのみち:anyway
886884
利用し過ぎる:overuse
@@ -921,6 +919,7 @@
921919
差:difference:~
922920
応答性:responsiveness:~
923921
緩く:looseに:~
922+
図表:chart:~
924923

925924
~item:entry
926925
引き出す:draw
@@ -1009,6 +1008,12 @@
10091008
^en:next to
10101009
互いの順序:relative positions
10111010
様々な:many different
1011+
~bar:column
1012+
片:fragment
1013+
最低:min
1014+
最高:max
1015+
最も高い:highest
1016+
最も低い:lowest
10121017

10131018
●●images
10141019
＠css-anchor-position/
@@ -3246,50 +3251,60 @@ <h3 title="Anchor-relative Insets: the anchor() function">3.2. ~anchorに相対
32463251
Because the anchor() function resolves to a &lt;length&gt;, it can be used in math functions like any other length.
32473252
</p>
32483253

3249-
<p class="issue">
3250-
もっと良い例を追加する
3251-
— この例は、
3252-
`anchor-center$vS で容易に成遂げれるので。
3253-
`10776$issue
3254+
<p>
3255+
例えば、
3256+
次の図表には，アリな~anchorとして設定しておかれた 3 個の~barがある
3257+
— 図の中の［
3258+
最低／最高
3259+
］線および~tooltipは、
3260+
自身をどこへ位置するか見出すために，［
3261+
すべての~barを参照rしている `anchor$f 関数
3262+
］と［
3263+
`min$f, `max$f
3264+
］関数を組合せて利用する。
3265+
各~barの下にある範囲~入力を利用すれば、
3266+
~barの縦幅を調整でき，~anchorされた線や~tooltipが最も［
3267+
高い／低い
3268+
］~barへ動的に調整される様子を見れる。
32543269
◎
3255-
Add a better example; this one can be accomplished easily with anchor-center. [Issue #10776]
3270+
For example, in the following chart, the three bars are set up as possible anchors, and the min/max lines and tooltips use min() and max() to combine anchor() functions referring to all three to find where to position themselves. You can use the range inputs below each column to adjust the heights, and see that the anchored lines and tooltips dynamically adjust to whichever bar is the highest/lowest.
32563271
</p>
32573272

3273+
<iframe
3274+
src="css-anchor-position/calc-anchor.html"
3275+
style="width: 40em; aspect-ratio: 5 / 3; margin: 1em"
3276+
></iframe>
3277+
32583278
<p>
3259-
例えば，次は、［
3260-
要素の`~insetで改変された包含塊$
3261-
］が［
3262-
`~anchor~box$上で中央に寄せられ，
3263-
要素の`包含塊$を~overflowしない~~範囲でアリな限り幅広になる
3264-
］よう，要素を設定しておくことになる：
3279+
これを成遂げるための重要な~code片は：
32653280
◎
3266-
For example, the following will set up the element so that its inset-modified containing block is centered on the anchor box and as wide as possible without overflowing the containing block:
3281+
The important fragment of the code to accomplish this is:
32673282
</p>
32683283

3269-
<pre class="lang-css">
3270-
.centered-message {
3271-
position: fixed;
3272-
max-width: max-content;
3273-
justify-self: center;
3274-
3275-
--center: anchor(--x 50%);
3276-
--half-distance: min(
3277-
abs(0% - var(--center)),
3278-
abs(100% - var(--center))
3279-
);
3280-
left: calc(var(--center) - var(--half-distance));
3281-
right: calc(var(--center) - var(--half-distance));
3282-
bottom: anchor(--x top);
3284+
<pre class="lanng-css">
3285+
#bar-1 { anchor-name: --anchor-1; }
3286+
#bar-2 { anchor-name: --anchor-2; }
3287+
#bar-3 { anchor-name: --anchor-3; }
3288+
.line {
3289+
position: absolute;
3290+
left: anchor(--chart left);
3291+
right: anchor(--chart right);
3292+
&amp;.max {
3293+
bottom: max(
3294+
anchor(--anchor-1 top),
3295+
anchor(--anchor-2 top),
3296+
anchor(--anchor-3 top)
3297+
);
3298+
}
3299+
&amp;.min {
3300+
bottom: min(
3301+
anchor(--anchor-1 top),
3302+
anchor(--anchor-2 top),
3303+
anchor(--anchor-3 top)
3304+
);
3305+
}
32833306
}
32843307
</pre>
3285-
3286-
<p>
3287-
これは例えば、
3288-
`input$e 要素に対する~error~message用に適切になることもあろう
3289-
— 中央に寄せたことにより，当の~messageが どの入力を参照rしているか発見し易くなるので。
3290-
◎
3291-
This might be appropriate for an error message on an input element, for example, as the centering will make it easier to discover which input is being referred to.
3292-
</p>
32933308
</div>
32943309

32953310
<section id="anchor-resolution">

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

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!doctype html>
2+
<meta charset=utf-8>
3+
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
4+
<title>Anchor + calc() example</title>
5+
6+
<div class="chart">
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>
11+
</div>
12+
<div class="actions">
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" />
16+
</div>
17+
<div class="line max"></div>
18+
<div class="line min"></div>
19+
<div class="tooltip max">👈 最高</div>
20+
<div class="tooltip min">最低 👉</div>
21+
22+
<style>
23+
@layer demo {
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+
}
90+
}
91+
@layer base {
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+
}
166+
}
167+
</style>
168+
169+
<script>
170+
// Just a little script to hook up the bar heights to the range inputs.
171+
const update = e => {
172+
document.getElementById(e.target.getAttribute("data-bar-id") )
173+
.style.height = `${e.target.value}%`;
174+
};
175+
176+
document.querySelectorAll("input").forEach(input => {
177+
input.addEventListener("input", update);
178+
});
179+
</script>

0 commit comments

Comments
 (0)