CSS - anchor-scope

• トップ
• CSSリファレンス
• anchor-scope

概要

説明

アンカーポジショニングにおいてアンカー名のスコープを定義します。詳細は「とほほのアンカーポジショニング入門」を参照してください。

none

スコープを定義しません。

all

この要素、またはこの要素の子孫要素で定義されたすべてのアンカー名は、子孫要素の anchor-scope で上書きされない限り、この要素の子孫要素でのみ参照可能であることを示します。

<dashed-ident>

この要素、またはこの要素の子孫要素で定義されたアンカー名で <dashed-ident> にマッチするものは、子孫要素の anchor-scope で上書きされない限り、この要素の子孫要素でのみ参照可能であることを示します。

使用例

.my-anchor-and-positioned-box {
  anchor-scope: --my-anchor;
  .my-anchor {
    anchor-name: --my-anchor;      /* 自身または子孫要素のアンカー名は */
  }
  .my-positioned-box {
    position-anchor: --my-anchor;  /* 子孫要素からのみ参照可能なアンカー名となる */
  }
}

リンク

• https://drafts.csswg.org/css-anchor-position-1/#anchor-scope