CSSPositionTryDescriptors

Baseline 2026

Newly available

Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSSPositionTryDescriptors インターフェイスは、 @position-try アットルールの本体で設定可能な CSS 記述子のリストを表すプロパティを定義します。

対応する @position-try アットルール本体内のそれぞれの記述子は、プロパティ名のブラケット記法またはプロパティ名のキャメルケース表記 "propertyName" を用いたドット記法のどちらかを使用してアクセスできます。例えば、CSS プロパティ "property-name" には、style["property-name"] または style.propertyName のようにアクセスできます。ここで style は CSSPositionTryDescriptors のインスタンスです。単一の語によるプロパティ、例えば height は、style["height"] と style.height のどちらの記法を使用してアクセスすることもできます。

メモ: CSSPositionTryRule インターフェイスは @position-try アットルールを表し、CSSPositionTryRule.style プロパティはこのオブジェクトのインスタンスになります。

インスタンスプロパティ

祖先である CSSStyleDeclaration から継承したプロパティもあります。

以下のプロパティ名は、"snake-case" のようなスネークケース（ブラケット記法でアクセス）および "camelCase" のようなキャメルケース（ドット記法でアクセス）で、それぞれ対応する @position-try アットルール内の記述子の値を表します。

align-self または alignSelf: 文字列で、align-self 記述子の値を表します。
block-size または blockSize: 文字列で、block-size 記述子の値を表します。
bottom: 文字列で、bottom 記述子の値を表します。
height: 文字列で、height 記述子の値を表します。
inline-size または inlineSize: 文字列で、inline-size 記述子の値を表します。
inset: 文字列で、inset 記述子の値を表します。
position-area または positionArea: 文字列で、position-area 記述子の値を表します。
inset-block または insetBlock: 文字列で、inset-block 記述子の値を表します。
inset-block-end または insetBlockEnd: 文字列で、inset-block-end 記述子の値を表します。
inset-block-start または insetBlockStart: 文字列で、inset-block-start 記述子の値を表します。
inset-inline または insetInline: 文字列で、inset-inline 記述子の値を表します。
inset-inline-end または insetInlineEnd: 文字列で、inset-inline-end 記述子の値を表します。
inset-inline-start または insetInlineStart: 文字列で、inset-inline-start 記述子の値を表します。
justify-self または justifySelf: 文字列で、justify-self 記述子の値を表します。
left: 文字列で、left 記述子の値を表します。
margin: 文字列で、margin 記述子の値を表します。
margin-block または marginBlock: 文字列で、margin-block 記述子の値を表します。
margin-block-end または marginBlockEnd: 文字列で、margin-block-end 記述子の値を表します。
margin-block-start または marginBlockStart: 文字列で、margin-block-start 記述子の値を表します。
margin-bottom または marginBottom: 文字列で、margin-bottom 記述子の値を表します。
margin-inline または marginInline: 文字列で、margin-inline 記述子の値を表します。
margin-inline-end または marginInlineEnd: 文字列で、margin-inline-end 記述子の値を表します。
margin-inline-start または marginInlineStart: 文字列で、margin-inline-start 記述子の値を表します。
margin-left または marginLeft: 文字列で、margin-left 記述子の値を表します。
margin-right または marginRight: 文字列で、margin-right 記述子の値を表します。
margin-top または marginTop: 文字列で、margin-top 記述子の値を表します。
max-block-size または maxBlockSize: 文字列で、max-block-size 記述子の値を表します。
max-height または maxHeight: 文字列で、max-height 記述子の値を表します。
max-inline-size または maxInlineSize: 文字列で、max-inline-size 記述子の値を表します。
max-width または maxWidth: 文字列で、max-width 記述子の値を表します。
min-block-size または minBlockSize: 文字列で、min-block-size 記述子の値を表します。
min-height または minHeight: 文字列で、min-height 記述子の値を表します。
min-inline-size または minInlineSize: 文字列で、min-inline-size 記述子の値を表します。
min-width または minWidth: 文字列で、min-width 記述子の値を表します。
place-self または placeSelf: 文字列で、place-self 記述子の値を表します。
position-anchor または positionAnchor: 文字列で、position-anchor 記述子の値を表します。
right: 文字列で、right 記述子の値を表します。
top: 文字列で、top 記述子の値を表します。
width: 文字列で、width 記述子の値を表します。

インスタンスメソッド

固有のメソッドはありません。祖先である CSSStyleDeclaration から継承したメソッドがあります。

例

この CSS には @position-try アットルールがあり、--custom-right という名前と 3 つの記述子があります。

css

@position-try --custom-right {
  position-area: right;
  width: 100px;
  margin-left: 10px;
}

const myRules = document.styleSheets[0].cssRules;
const tryOption = myRules[0]; // CSSPositionTryRule
console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
console.log(tryOption.style.margin); // "0 0 0 10px"
console.log(tryOption.style["position-area"]); // "right"