Chrome 137はif（）css関數(shù)を出荷したため、他のブラウザが実裝するのを見(jiàn)ることは完全に可能ですが、いつ正確に知るのは難しいです。いずれにせよ、場(chǎng)合、（）が條件付きで値を使用できる場(chǎng)合は、クエリやその他の機(jī)能（メディアクエリやライトダーク（）関數(shù)などで既に行うことができます。

Sunkanmiは、昨日、この機(jī)能の素晴らしい概要を教えてくれました。この記事では、実際の使用の可能性のある使用に陥り、もう少し難しくなりたいと思います。

要約すると、if（）は、CSS変數(shù)の値に基づいてプロパティに値を條件付きで割り當(dāng)てます。たとえば、-theme：の値に基づいて、色と背景のプロパティに異なる値を割り當(dāng)てることができます。

• - テーマ：「シャムロック」
  • 色：?HSL（146 50％3％）
  • 背景：HSL（146 50％40％）
• -Theme：それ以外のこと
  • 色：HSL（43 74％3％）
  • 背景：HSL（43 74％64％）

 ：根 {
  / *「else」値に戻るために変更 */
  -Theme：「Shamrock」;

  體 {
    色：if（style（ - テーマ： "shamrock"）：hsl（146 50％3％）; else：hsl（43 74％3％））;
    背景：if（style（ - テーマ： "shamrock"）：hsl（146 50％40％）; else：hsl（43 74％64％））;
  }
}

私は構(gòu)文（あまりにも多くのコロン、ブラケットなど）が好きではありませんが、このようにフォーマットすることができます（これは少し明確だと思います）：

色：if（
  スタイル（ - テーマ：「シャムロック」）：HSL（146 50％3％）;
  その他：HSL（43 74％3％）
）;

if（）でクレイジーな數(shù)のことをすることができるはずです。最終的にはそうなることを願(yuàn)っていますが、私はテストを行い、上記の構(gòu)文が機(jī)能する唯一のものであることを知りました。通常のCSSプロパティの値（カスタムプロパティの代わりに）、HTML屬性（ATTR（）を使用して）、またはその他の値に基づいて條件を基づいていません。少なくとも今のところ、條件はカスタムプロパティ（CSS変數(shù)）の値に基づいている必要があります。

if（）で何ができるかを探る

その最初の例から判斷すると、テーマ（および設(shè)計(jì)システム全體）にif（）を使用できることは明らかです。このためにLight-Dark（）関數(shù)を利用することはできますが、テーマが厳密に明るく暗くない場(chǎng)合、または各テーマに3つ以上のテーマまたは明るいモードと暗いモードが必要な場(chǎng)合はどうなりますか？まあ、それは（）を使用できる場(chǎng)合です。

まず、より多くのテーマ/その他の條件を作成しましょう。

 ：根 {
  /*シャムロック|サフラン|アメジスト */
   - テーマ：「サフラン」; /* ...私はあなたを選びます！ */

  體 {
    色：if（
      スタイル（ - テーマ：「シャムロック」）：HSL（146 50％3％）;
      スタイル（ - テーマ：「サフラン」）：HSL（43 74％3％）;
      スタイル（ - テーマ：「アメジスト」）：HSL（282 47％3％）
    ）;
    背景：if（
      スタイル（ - テーマ：「シャムロック」）：HSL（146 50％40％）;
      スタイル（ - テーマ：「サフラン」）：HSL（43 74％64％）;
      スタイル（ - テーマ：「アメジスト」）：HSL（282 47％56％）
    ）;
    遷移：300ms;
  }
}

本當(dāng)にシンプルですが、いくつかの簡(jiǎn)単なことがあります。第一に、今回は「他の條件」はありません。つまり、テーマがシャムロック、サフラン、またはアメジストでない場(chǎng)合、デフォルトのブラウザスタイルが使用されます。それ以外の場(chǎng)合、if（）関數(shù)は、この場(chǎng)合のサフランのテーマである最初の真のステートメントの価値に解決します。第二に、遷移はすぐに動(dòng)作します。以下のデモでは、-themeを切り替えるためのユーザーインターフェイスを追加しました。遷移のために、文字通り遷移：300ms：if（）関數(shù)とともに次のようになりました。

注：オプションの選択など、テーマスワッピングがユーザー制御されている場(chǎng)合、実際にはif（）はまったく必要ありません。デモの冒頭で使用したロジックを使用できます（：root：has（#shamrock：checked）{ / * styles * /}）。 Amit Sheenは、Smashing Magazineで優(yōu)れたデモンストレーションを行っています。

ただし、コードをより保守可能にするために、色をCSS変數(shù)にスライドさせ、if（）関數(shù)で使用し、if（）関數(shù)をCSS変數(shù)にスライドさせることができます。

 /* 設(shè)定 */
：根 {
  /*シャムロック|サフラン|アメジスト */
  -Theme：「Shamrock」; /* ...私はあなたを選びます！ */

  / *ベースカラー */
  -Shamrock：HSL（146 50％40％）;
   - サフロン：HSL（43 74％64％）;
  -AMETHYST：HSL（282 47％56％）;

  / *ベースカラーですが、3％の軽さ */
  -Shamrock-Complementary：HSL（var（ -  shamrock）HS 3％から）;
   - サフロン - 修飾：HSL（var（ - サフラン）HS 3％から）;
  -Methyst-Complementary：HSL（var（ -  amethyst）HS 3％）;

   - バックグラウンド：if（
    スタイル（ - テーマ： "Shamrock"）：var（ -  shamrock）;
    スタイル（ - テーマ：「サフラン」）：var（ - サフラン）;
    スタイル（ - テーマ：「アメジスト」）：var（ - アメジスト）
  ）;

   - 色：if（
    スタイル（ - テーマ： "Shamrock"）：var（ -  shamrock-complementary）;
    スタイル（ - テーマ： "Saffron"）：var（ -  Saffron-Complementary）;
    スタイル（ - テーマ：「アメジスト」）：var（ - アメジスト要約）
  ）;

  /* 使用法 */
  體 {
    /* 1つの変數(shù)、すべてifs！ */
    背景：var（ - 背景）;
    色：var（ - 色）;
    アクセントカラー：var（ -  color）;

    /*これを忘れることはできません！ */
    遷移：300ms;
  }
}

if（）関數(shù)內(nèi)のCSS変數(shù)を使用するだけでなく、他の関數(shù)をネストすることもできます。以下の例では、そこにLight-Dark（）を投げました。これは基本的に暗いモードの色を反転させます。

 - バックグラウンド：if（
  スタイル（ - テーマ： "Shamrock"）：Light-Dark（var（ -  shamrock）、var（ -  shamrock-complementary））;
  スタイル（ - テーマ： "Saffron"）：Light-Dark（var（ -  Saffron）、var（ -  Saffron-Complementary））;
  スタイル（ - テーマ：「アメジスト」）：ライトダーク（var（ - アメジスト）、var（ - アメジスト補(bǔ)完））
）;

if（）vs。コンテナスタイルのクエリ

コンテナスタイルのクエリを以前に使用したことがない場(chǎng)合、基本的にコンテナに特定のCSS変數(shù)があるかどうかを確認(rèn)します（IF（）関數(shù)とよく似ています）。これはまったく同じ例/デモですが、if（）関數(shù)の代わりにコンテナスタイルのクエリを使用しています。

 ：根 {
  /*シャムロック|サフラン|アメジスト */
  -Theme：「Shamrock」; /* ...私はあなたを選びます！ */

  -Shamrock：HSL（146 50％40％）;
   - サフロン：HSL（43 74％64％）;
  -AMETHYST：HSL（282 47％56％）;

  -Shamrock-Complementary：HSL（var（ -  shamrock）HS 3％から）;
   - サフロン - 修飾：HSL（var（ - サフラン）HS 3％から）;
  -Methyst-Complementary：HSL（var（ -  amethyst）HS 3％）;

  體 {
    /* ContainerがShamrockを選択しました！ */
    @Containerスタイル（ - テーマ： "Shamrock"）{
       - バックグラウンド：ライトダーク（var（ -  shamrock）、var（ -  shamrock-complementary））;
      -color：light-dark（var（ -  shamrock-complementary）、var（ -  shamrock））;
    }

    @Containerスタイル（ - テーマ：「サフラン」）{
       - バックグラウンド：ライトダーク（var（ - サフラン）、var（ - サフラン補(bǔ)完））;
      -color：light-dark（var（ -  Saffron-Complementary）、var（ -  Saffron））;
    }

    @Containerスタイル（ - テーマ：「アメジスト」）{
       - バックグラウンド：ライトダーク（var（ - アメジスト）、var（ -  amethyst-complementary））;
      -color：light-dark（var（ -  amethyst-complementary）、var（ -  amethyst））;
    }

    背景：var（ - 背景）;
    色：var（ - 色）;
    アクセントカラー：var（ -  color）;
    遷移：300ms;
  }
}

ご覧のとおり、if（）が條件付き値を促進(jìn)する場(chǎng)合、コンテナスタイルのクエリは條件付きプロパティと値を促進(jìn)します。それ以外は、本當(dāng)に別の構(gòu)文です。

if（）でできる追加のこと（しかし、気付かないかもしれません）

CSS変數(shù)が存在するかどうかを確認(rèn)します。

 / *変數(shù)が設(shè)定されていない場(chǎng)合にアイコンを非表示 */
.icon {
  表示：if（
    スタイル（ - アイコンファミリー）：インラインブロック;
    その他：なし
  ）;
}

より複雑な條件ステートメントを作成します：

 H1 {
  font-size：if（
    スタイル（ - より大きな頭：true）：xxx-large;
    スタイル（ - テーマ： "themewithlargerheadings"）：xxx-large
  ）;
}

2つのCSS変數(shù)が一致するかどうかを確認(rèn)します。

 / *＃s2が＃s1と同じ背景を持っている場(chǎng)合、境界線を追加 */
＃s2 {
  ボーダートップ：if（
    スタイル（ -  s2バックグラウンド：var（ -  s1-background））：薄い固體赤
  ）;
}

if（）and calc（）：數(shù)學(xué)が數(shù)學(xué)でない場(chǎng)合

これはうまくいきません（誰(shuí)かが私を特定するのを助けることができるかもしれません）：

 div {
  / * 3/3 = 1 */
   -  calc：calc（3/3）;
  / *青、if（）が-calc */
  背景：if（style（ -  calc：1）：red; else：blue）;
}

if（）を計(jì)算するには、-calcを計(jì)算するには、最初に @propertyを使用してCSS変數(shù)を登録する必要があります。

 @property  -  calc {
  構(gòu)文： "<number> ";
  初期値：0;
  継承：false;
}</number>

閉じる考え

私は構(gòu)文に熱心ではなく、時(shí)には読みにくいことがありますが（特に1つのラインでフォーマットされている場(chǎng)合）、（）がどのように進(jìn)化するかを見(jiàn)て興奮しています。私はそれを通常のプロパティ（例：color：if（style（background：white）：black：background：black）：white）;）で使用できるようにしたいと思います。

また、変數(shù)を登録せずにCalc（）計(jì)算をその場(chǎng)で計(jì)算できれば、それは素晴らしいことです。

そうは言っても、私はまだ（）が現(xiàn)在行っているwhatに非常に満足しており、さらにシンプルな設(shè)計(jì)システムを構(gòu)築するのが待ちきれません。

以上がCSSでの突出if（）機(jī)能もう少し：條件付き色のテーマの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。