CSS Reference

anchor-size()

アンカーのサイズを基準に要素のサイズを指定する

anchor-size() 関数は、サイズを指定するプロパティ（width、height、min-width、min-height、max-width、max-height、block-size、inline-size、min-block-size、min-inline-size、max-block-size、max-inline-size など）内で使用することで、ターゲットとなるアンカー要素のサイズを基準に、要素のサイズを指定することが可能になる CSS 関数です。

anchor-size() 関数の基本的な構文は下記のようになります。

anchor-size() = anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

anchor-size() 関数は、anchor() 関数に似て、同じような引数を取ります。ただし、anchor() 関数で使用した <anchor-side> キーワードの代わりに、<anchor-size> キーワードを使用します。このキーワードは、アンカー要素の対向する2つの辺の間の距離（要するに幅や高さ）を指します。

<anchor-name>

ターゲットとなるアンカー要素の名前を指定します。anchor-name プロパティで指定したアンカー要素の名前を指定します。指定が省略された場合、その要素の既定のアンカー（position-anchor プロパティで指定されているアンカー要素）が使用されます。

<anchor-size>

<anchor-size> として指定可能な値（キーワード）は下記の通りです。

<anchor-size> = width | height | block | inline | self-block | self-inline

物理的な <anchor-size> キーワードとして、width および height が指定できます。これらは、それぞれターゲットとなるアンカー要素の幅と高さを指します。

論理的な <anchor-size> キーワードとして、block、inline、self-block、self-inline が指定できます。これらは、ボックスの書字モードに応じて（self-block と self-inline の場合）またはボックスを包含するブロックの書字モードに応じて（block と inline の場合）、物理的な <anchor-size> キーワード（width、height）のいずれかに対応します。

<anchor-size> キーワードが省略された場合、anchor-size() が使用されているプロパティの軸に一致するキーワードとして動作します。例えば、width: anchor-size() と指定された場合、width: anchor-size(width) と同じ意味になります。

<length-percentage>

カンマ（,）に続けて記述する <length-percentage> 値は、要素が位置指定されていない場合や、ターゲットとなるアンカー要素が存在しない場合に、フォールバックとして使用するサイズです。

calc() 関数内での使用

anchor-size() 関数は、calc() 関数内でも使用できるため、例えば下記のように、アンカー要素の横幅を基準にしながら、その4倍のサイズ、といった指定も可能です。

.sample {
  width: calc(anchor-size(--exampleAnchor width, 20px) * 4);
  position-anchor: --exampleAnchor;
  position: fixed;
}

anchor-size()のサンプルソース

.content {
  position-anchor: --exampleAnchor;
  position: fixed;
  position-area: right;
  margin-left: 5px;
  width: anchor-size(width);
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ×
Safari ×
iOS Safari ×
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome