このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSSPositionTryRule: style プロパティ

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.

styleCSSPositionTryRule インターフェイスの読み取り専用プロパティで、CSSPositionTryDescriptors オブジェクトが入ります。これは @position-try ルールの本体で利用可能な記述子を表します。

CSSPositionTryDescriptors オブジェクトです。

style プロパティ自体は、CSSPositionTryDescriptors オブジェクトを置き換えることができないという意味で読み取り専用ですが、style プロパティに直接代入することは可能です。これは、その cssText プロパティへの代入と同等です。同時に、その CSSPositionTryDescriptors オブジェクトを setProperty()removeProperty() メソッドを用いて変更することもできます。

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

css
@position-try --custom-bottom {
  top: anchor(bottom);
  min-width: 100px;
  margin-top: 10px;
}
js
const myRules = document.styleSheets[0].cssRules;
const tryOption = myRules[0]; // CSSPositionTryRule
console.log(tryOption.style.top); // "anchor(bottom)"
console.log(tryOption.style["min-width"]); // "100px"
console.log(tryOption.style.positionArea); // ""。 position-area は指定されていない

仕様書

Specification
CSS Anchor Positioning Module Level 1
# dom-csspositiontryrule-style

ブラウザーの互換性

関連情報