2026年1月13日、Firefox バージョン147がリリースされた。Apple Silicon搭載のMacでWebGPUのサポートなど、さまざまな改善が含まれている。
この記事ではCSS anchor-positioningのサポートが追加されたことを取り上げたい。Edge、Chrome、Safariではすでにサポートされているため、今回のFirefoxの対応により、主要なブラウザすべてで対応したことになる。
- CSS anchor positioning - MDN
- CSS anchor positioning - Can I use... Support tables for HTML5, CSS3, etc
CSSでは、gridやflexboxプロパティなどを使ってレイアウトをおこなうのとは別の話として、ある要素に対して別の要素を相対的な位置に自由に配置するために、たとえば親要素と子要素の関係にあれば、positionプロパティなどを使って配置することがこれまでも可能だった。
CSS anchor positioningも特定の要素
要素の配置は柔軟に制御できるため、レスポンシブデザインや動的なレイアウトに役立つという。そして、包含するタグを増やしたくないときなど、DOM構造を増やしたくない場合にも役立つ。また、基準となる要素のサイズ変更への追従がしやすいため、コンテンツ量が決まっていない要素やフォントサイズが変更できる要素と相性が良い。
要素同士に
このCSS anchor positioningを使うために、以下のような複数のプロパティが用意されている。
- anchor-name：アンカー要素
（基準要素） を定義するプロパティ。 - position-anchor：配置する要素がどのアンカー要素を参照するかを指定するプロパティ。基本的にposition: absolute
（またはfixed） と併用することになる。 - anchor()：アンカー要素のボックス辺の位置の値を示す関数。指定できる値はtop, right, bottom, left, center, block-start, block-end, inline-start, inline-endなどがある。anchor()内で別アンカーの位置の値を指定することもできる。topなどのプロパティの値としてanchor()を使うことで、アンカーの位置に基づいた具体的な位置指定が可能になる。
- position-area：アンカー要素の周囲のどこに配置するかを指定するプロパティ。アンカー要素の周りを区切った8か所
（上、右上、右、右下、下、左下、左、左上） の領域を （直線的に広げて、タイルを） 選択する。なお、指定した場所に配置できない場合の代わりの場所も指定できる。 - anchor-size()：アンカー要素のサイズを参照する関数で、対象のアンカー要素の指定された辺の長さを返す。なおanchor-size()は、配置する要素のwidth/
heightなどのサイズやtop/ right/ bottom/ leftなどの位置を指定するプロパティの値、marginプロパティの値でのみ有効となる。 - anchor-scope：どのアンカー要素
（anchor-name） が有効かを制御するプロパティ。アンカー要素とその配置要素の共通の親要素においてanchor-scopeでアンカーの名前を指定しておくことで、その範囲内でのみ有効なアンカーとして扱うことができる。allという指定もできる。その場合には、そのサブツリーに設定されたアンカー名の値に書くと、allを指定した要素外にある同名のアンカーを隠蔽できる。それにより、同じサブツリー内に配置された要素によってのみ参照されるようになる。 - position-visibility：アンカー要素が画面外になったに配置要素をどうするかを制御するプロパティ。配置要素を表示し続けるalways、アンカー要素がすこしでも見えてるときは表示するanchors-visible
（デフォルト）、配置要素がそれを含む要素の領域外または画面外にかかると非表示になるno-overflowといった値がある。 - position-try-fallbacks：配置する要素のレイアウトに失敗した場合に試すフォールバックを指定するプロパティ。包含ブロックや画面外にあふれる場合に、ここで指定された順序で配置しようとする。取れる値は、フォールバックを設定しないnone
（デフォルト）、position-arreaの値、try-tacticといわれる識別子 （アンカー要素のブロック軸に沿って位置を反転するflip-block、インライン軸に沿って位置を反転するflip-inline、インライン軸とブロック軸の両方の値を反転し、開始プロパティと終了プロパティを入れ替えるflip-start （flip-系ではmarginはミラーリングされる））、@position-tryで定義された代替配置ルールの名前となる。 - @position-try：代替配置ルールを定義する。
- position-try-order：代替配置ルールが複数ある場合、どの基準で最適な配置を選ぶかを指定するプロパティ
（Firefoxではまだ未サポート）。配置要素を最初に表示する際にposition-try-fallbacksを試さないnormal （デフォルト）、包含ブロックのサイズにあわせてposition-try-fallbackssを適用するmost-height、most-width、most-block-size、most-inline-sizeがある。 - position-try：position-try-orderとposition-try-fallbacksを一括で指定するためのプロパティ。
詳しくはMDNドキュメントなどを参照のこと