これがスプラット – コードペン

まあ…私は推測します 可能性のある未来 とにかくスタイルクエリ。私はこれを想像しています：

blockquote {
  font-style: italic;
}

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

明確にするために：それはうまくいきません。ただ書くことはできません style() のクエリ どんなスタイルでも。 しかし、おそらく、可能であればそれがどのように役立つかを見ることができます。のための特定のセレクターはありません @container、それはその斜体を持っている要素を「選択」するだけです。 em 内部を使用していますが、結合します。

うまくいかない理由は、スタイルクエリが現在カスタムプロパティのみを扱っているためです。したがって、カスタムプロパティを使用してすべてのフォントスタイルを作成した場合、それを行うことができます。

blockquote {
  --fontStyle: italic;
  &, em {
    font-style: var(--fontStyle);
  }
}

@container style(--fontStyle: italic) {
  em {
    --fontStyle: normal;
  }
}

まあ – それは私にはあまりにも気が狂っています。スタイルクエリがまったく役に立つとは思わないというわけではありません。特に、1つのカスタムプロパティを設定することで、「Mixin」のように、1つの変更で他のCSS全体を設定できることが特に気に入っています。それでも 「本物」ミキシン 確かにさらに良いでしょう。

この種のスタイルクエリ、 クロスブラウザーのサポートがあります （Firefoxを除く）、「交互」スタイルの効果を作成するために使用できます。これは、私がイタリック体で行ってきたのと同じ種類です。親が一方の方法である場合、チェーンの下で他の方法を実行します。

それはローマコマロフのイメージです 交互のスタイルクエリ ポイントを作る。このように機能します：

.el {
  background: var(--bg);
  --bg: var(--PINK);

  @container style(--bg: var(--PINK)) {
    --bg: var(--THEME_BG);
  }
}

つまり、背景はピンクです。 …背景がすでにピンク色である容器にいる場合を除き、背景は異なる色です。それだけで、交互のネスト効果が生まれます。これはかなりクールです！ローマンは、それが2つだけである必要があるだけでなく、必要なほど複雑である可能性があることを示しています。 ::marker 実際に使用していると想像できる交互の方法で。