CSSでの突出if（）機能もう少し：条件付き色のテーマ

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

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

要約すると、if（）は、CSS変数の値に基づいてプロパティに値を条件付きで割り当てます。たとえば、-theme：の値に基づいて、色と背景のプロパティに異なる値を割り当てることができます。

• - テーマ：「シャムロック」
  • 色：‌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％））;
  }
}

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

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

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

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

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

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

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

  体 {
    色：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;
  }
}

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

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

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

 /* 設定 */
：根 {
  /*シャムロック|サフラン|アメジスト */
  -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つの変数、すべてifs！ */
    背景：var（ - 背景）;
    色：var（ - 色）;
    アクセントカラー：var（ -  color）;

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

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

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

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

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

 ：根 {
  /*シャムロック|サフラン|アメジスト */
  -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（ - サフラン補完））;
      -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（）が条件付き値を促進する場合、コンテナスタイルのクエリは条件付きプロパティと値を促進します。それ以外は、本当に別の構文です。

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

CSS変数が存在するかどうかを確認します。

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

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

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

2つのCSS変数が一致するかどうかを確認します。

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

if（）and calc（）：数学が数学でない場合

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

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

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

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

閉じる考え

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

また、変数を登録せずにCalc（）計算をその場で計算できれば、それは素晴らしいことです。

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

以上がCSSでの突出if（）機能もう少し：条件付き色のテーマの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。