Skip to content

Commit 913411b

Browse files
[css-anchor-position-1] 各種更新
Add position-anchor: match-parent w3c/csswg-drafts@c04dc2a Remove anchor-center from align/justify-items w3c/csswg-drafts@7ab7f09 Mark position-area as animatable w3c/csswg-drafts@590b64f editorial: Wrap example iframe in a figure, link to source w3c/csswg-drafts@64ff523
1 parent 6897f7f commit 913411b

1 file changed

Lines changed: 70 additions & 16 deletions

File tree

css-anchor-position-ja.html

Lines changed: 70 additions & 16 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-03-24
127-
trans_update:2026-03-25
126+
spec_date:2026-03-27
127+
trans_update:2026-03-30
128128
source_checked:251222
129129
page_state_key:CSS
130130
original_url:https://drafts.csswg.org/css-anchor-position-1/
@@ -274,6 +274,7 @@
274274
f.anchor:#funcdef-anchor
275275
t.anchor():#funcdef-anchor
276276
f.env:~CSSENV#funcdef-env
277+
誤)f.env:~CSSCOND5#funcdef-supports-env
277278
f.var:~CSSVAR#funcdef-var
278279
f.random:~CSSVAL5#funcdef-random
279280
f.min:~CSSVAL#funcdef-min
@@ -317,6 +318,7 @@
317318
vI.xxx:#valdef-position-area-xxx
318319

319320
t.anchor-name:#valdef-position-anchor-anchor-name
321+
vA.match-parent:#valdef-position-anchor-match-parent
320322
vA.normal:#valdef-position-anchor-normal
321323
vA.none:#valdef-position-anchor-none
322324
vA.auto:#valdef-position-anchor-auto
@@ -2143,7 +2145,7 @@ <h3 title="Default Anchors: the position-anchor property">2.4. 既定の~anchor
21432145

21442146
<div>
21452147
◎名 `position-anchor@p
2146-
◎値 `normal$vA | `none$vA | `auto$vA | `anchor-name$t
2148+
◎値 `normal$vA | `none$vA | `auto$vA | `anchor-name$t | `match-parent$vA
21472149
◎初 `normal^v
21482150
◎適 `絶対的に位置され$た~box
21492151
◎継 されない
@@ -2220,6 +2222,25 @@ <h3 title="Default Anchors: the position-anchor property">2.4. 既定の~anchor
22202222
22212223
The target anchor element selected by the specified &lt;anchor-name&gt; is the box’s default anchor element.
22222224
</dd>
2225+
2226+
<dt>`match-parent@vA</dt>
2227+
<dd>
2228+
当の~box用の`既定の~anchor要素$は、
2229+
当の~boxの親
2230+
— あるいは、
2231+
当の~boxは`疑似要素$である場合は,その`出自の要素$ —
2232+
の`既定の~anchor要素$が在って, それは`受容-可能な~anchor要素$になる†ならば,それになる
2233+
— 他の場合は無い。
2234+
2235+
Uses the same default anchor element as the parent—​or originating element, if this is a pseudo-element—​if any, and if that would be an acceptable anchor element. Otherwise, the box has no default anchor element.
2236+
</dd>
2237+
<dd class="trans-note">【†
2238+
既定の~anchor要素の定義には,受容-可能な~anchor要素か否かは含まれない
2239+
(他所の記述は、
2240+
既定の~anchor要素が受容-可能な~anchor要素でもあるものとは見做していない)
2241+
ので、
2242+
この条件は~~余計に感じられる。
2243+
</dd>
22232244
</dl>
22242245

22252246
<p>
@@ -2410,7 +2431,7 @@ <h3 title="The position-area Property">3.1. `position-area^p ~prop</h3>
24102431
<a href="#position-area-computed">§ `position-area^t の算出d値と直列化</a>
24112432
を見よ
24122433
◎順 文法に従う
2413-
◎ア (未策定)
2434+
◎ア 離散的
24142435
◎表終
24152436
24162437
Name: position-area
@@ -2421,7 +2442,7 @@ <h3 title="The position-area Property">3.1. `position-area^p ~prop</h3>
24212442
Percentages: n/a
24222443
Computed value: the keyword none or a pair of keywords, see § 3.1.3 Computed Value and Serialization of &lt;position-area&gt;
24232444
Canonical order: per grammar
2424-
Animation type: TBD
2445+
Animation type: discrete
24252446
</div>
24262447

24272448
<p>
@@ -3273,11 +3294,16 @@ <h3 title="Anchor-relative Insets: the anchor() function">3.2. ~anchorに相対
32733294
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.
32743295
</p>
32753296

3297+
<figure>
32763298
<iframe
32773299
src="css-anchor-position/calc-anchor.html"
32783300
style="width: 40em; aspect-ratio: 5 / 3; margin: 1em"
32793301
></iframe>
3280-
3302+
<figcaption>
3303+
`全部的な例@css-anchor-position/calc-anchor.html$
3304+
3305+
Full Example
3306+
</figcaption></figure>
32813307
<p>
32823308
これを成遂げるための重要な~code片は:
32833309
@@ -3854,13 +3880,11 @@ <h3 title="Centering on the Anchor: the anchor-center alignment value">4.2. ~anc
38543880

38553881
<div id="_propdef-for-anchor-center">
38563882
◎名 `justify-self$p,
3857-
`align-self$p,
3858-
`justify-items$p,
3859-
`align-items$p
3883+
`align-self$p
38603884
◎新値 `anchor-center$vS
38613885
◎表終
38623886
3863-
Name: justify-self, align-self, justify-items, align-items
3887+
Name: justify-self, align-self
38643888
New values: anchor-center
38653889
</div>
38663890

@@ -4188,15 +4212,20 @@ <h2 title="Overflow Management">6. ~overflowの管理</h2>
41884212
<div>
41894213
<p>
41904214
例えば,次の~CSSは、
4191-
ある “~popover”† ( `#myPopover^css )を
4192-
まずは,[
4215+
ある “~popover”† ( `#myPopover^css )を,まずは[
41934216
ある~anchor要素( `--button^v )の下に位置させ,
41944217
当の[
41954218
~popover, ~anchor
41964219
]の始端どうしを整列させる
41974220
]よう試みるが、
41984221
~screenに収まらない場合には,他の組合nに切替える:
41994222
</p>
4223+
4224+
<p class="trans-note">【†
4225+
何らかの動作(この例では、~button上の~hoverなど)に呼応して,
4226+
他のものの上層に表示される様な~UI。
4227+
</p>
4228+
42004229
<ul>
42014230
<li>
42024231
<p>
@@ -4263,10 +4292,6 @@ <h2 title="Overflow Management">6. ~overflowの管理</h2>
42634292
</li>
42644293
</ol>
42654294

4266-
<p class="trans-note">【†
4267-
何らかの動作(この例では、~button上の~hoverなど)に呼応して,
4268-
他のものの上層に表示される様な~UI。
4269-
</p>
42704295
42714296
For example, the following CSS will first attempt to position a "popover" below the element, but if it doesn’t fit on-screen will switch to being above. It defaults to start-aligning with the anchor, but will switch to end-aligning if that doesn’t fit. If it doesn’t fit on either side, it will take the whole horizontal space, while centering on the anchor as much as possible (thanks to § 4.1 Area-specific Default Alignment).
42724297
</div>
@@ -6088,6 +6113,35 @@ <h2 title="Privacy Considerations">~privacyの考慮点</h2>
60886113
<h2 title="Changes">変更点</h2>
60896114

60906115
<dl>
6116+
<dt>
6117+
`2026年 1月 30日 作業草案@~TR/2026/WD-css-anchor-position-1-20260130/$
6118+
からの有意な変更点
6119+
6120+
Significant changes since the 30 January 2026 Working Draft:
6121+
</dt>
6122+
<dd>
6123+
`position-area$p 用の値として `match-parent$vA を追加した。
6124+
( `8913$issue )
6125+
6126+
Added match-parent value to position-area. (Issue 8913)
6127+
</dd>
6128+
<dd>
6129+
`position-area$p を離散的に~animate可能になるものとした。
6130+
( `13577$issue )
6131+
6132+
Marked position-area as discretely animatable. (Issue 13577)
6133+
</dd>
6134+
<dd>
6135+
6136+
`align-items$p, `justify-items$p
6137+
]用の値から `anchor-center$vS を除去した
6138+
— これらの~propには、
6139+
絶対的に位置された~boxに対する効果は無いので。
6140+
( `13514$issue )
6141+
6142+
Removed anchor-center from align-items and justify-items because those properties have no effect on absolutely-positioned boxes anyway. (Issue 13514)
6143+
</dd>
6144+
60916145
<dt>
60926146
`2025年 12月 22日 作業草案@~TR/2025/WD-css-anchor-position-1-20251222/$
60936147
からの有意な変更点

0 commit comments

Comments
 (0)