CSS/@position-try (実験的)

@position-try

@position-tryは、まだ仕様が確定していない実験的なCSSルールで、要素の配置に関する柔軟な指定を試みるために提案されています。このルールを使用すると、要素が複数の候補位置に配置される際の動作を制御できます。現在、このルールは一部のブラウザでのみサポートされているか、もしくは未サポートの可能性があります。

構文

基本的な@position-tryの構文は以下の通りです：

@position-try {
  <セレクタ> {
    position: <候補位置1>, <候補位置2>, ...;
  }
}

<セレクタ>: スタイルを適用する要素を指定します。
<候補位置>: 要素を配置する際の候補となる位置をカンマ区切りで指定します。

使用例

要素の配置を複数試みる

@position-try {
  .example {
    position: top, bottom, center;
  }
}

この例では、.exampleクラスに適用される要素が、上部 (top)、下部 (bottom)、または中央 (center) に配置されるように試みます。ブラウザは、指定された位置から順に適用可能な位置を探します。

別のレイアウト戦略を指定

@position-try {
  .box {
    position: left, right, center;
  }
}

この例では、.box要素が、左 (left)、右 (right)、もしくは中央 (center) に配置されるよう試みます。

注意事項

@position-tryは実験的な仕様であり、仕様変更や削除される可能性があります。そのため、慎重に使用することが推奨されます。
このルールを使用する場合は、必ずフォールバックのスタイルを用意してください。
実験的なルールのため、ブラウザの実装状況に応じて動作が異なる場合があります。

ブラウザ対応状況

@position-tryは、現在のところ多くのモダンブラウザでは未サポート、または限定的にサポートされています。最新のブラウザ対応状況は以下を参考にしてください：

サポートあり: 現時点で特定のブラウザでのサポートは不明。
サポート未対応: ほとんどのブラウザ。