159

CSS で条件を使用したいと考えています。

アイデアは、適切なスタイルシートを生成するためにサイトが実行されたときに置き換える変数があるということです。

この変数に応じてスタイルシートが変わるようにしたい！

次のようになります。

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px;

これはできますか？これどうやってやるの？

4

17 に答える 17

166

従来の意味ではありませんが、HTML にアクセスできる場合は、クラスを使用してこれを行うことができます。このことを考慮：

<p class="normal">Text</p>

<p class="active">Text</p>

そしてあなたのCSSファイルで：

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

それがCSSのやり方です。

次に、 Sassのような CSS プリプロセッサがあります。そこで条件を使用できます。これは次のようになります。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

欠点は、スタイルシートを前処理する必要があること、および条件が実行時ではなくコンパイル時に評価されることです。

CSS 固有の新しい機能は、カスタム プロパティ(別名 CSS 変数) です。それらは実行時に (それらをサポートするブラウザーで) 評価されます。

それらを使用すると、次のようなことができます。

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

最後に、お気に入りのサーバー側言語でスタイルシートを前処理できます。PHP を使用している場合はstyle.css.php、次のようなファイルを提供します。

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

ただし、この場合、そのようなスタイルシートをキャッシュするのは難しいため、パフォーマンスに影響があります。

于 2009-07-15T06:28:15.200 に答える
14

以下はまだ有効な私の古い答えですが、今日はより独断的なアプローチをとっています。

CSS がうまくいかない理由の 1 つは、まさに CSS に条件付き構文がないことです。CSS 自体は、最新の Web スタックではまったく使用できません。SASS を少しだけ使ってみれば、私がそう言う理由がわかるでしょう。SASSには条件付き構文があります...そして、プリミティブCSSよりも多くの利点があります。

古い答え（まだ有効）：

一般的なCSSではできません！

次のようなブラウザ条件があります。

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

しかし、Javascript を使用して DOM を変更したり、クラスを動的に割り当てたり、それぞれのプログラミング言語でスタイルを連結したりすることを妨げる人は誰もいません。

私は時々cssクラスを文字列としてビューに送り、それらをそのようなコードにエコーします(php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>
于 2009-07-15T06:26:59.697 に答える
7

2 つの個別のスタイルシートを作成し、比較結果に基づいてそのうちの 1 つを含めることができます。

あなたが置くことができるの1つに

background-position : 150px 8px;

もう一方では

background-position : 4px 8px;

CSS で実行できるチェックは、ブラウザの認識だけだと思います。

条件付き CSS

于 2009-07-15T06:33:23.520 に答える
5

if like の代わりに not を使用できます

.Container *:not(a)
{
    color: #fff;
}
于 2014-06-24T23:37:04.357 に答える
4

css ファイルを PHP として解析するようにサーバーを設定してから、単純な PHP ステートメントで variable variable を定義します。

もちろん、これはPHPを使用していることを前提としています...

于 2009-07-15T06:26:39.523 に答える
3

これは、上記の Boldewyn の回答に対する追加情報です。

if/else を実行するための PHP コードを追加します。

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}
于 2009-07-15T06:56:28.777 に答える
2

私の知る限り、CSS には if/then/else はありません。または、javascript 関数を使用して、要素の background-position プロパティを変更することもできます。

于 2009-07-15T06:24:14.677 に答える
2

この目的のために、次のように JavaScript を使用できます。

  1. まず、「通常」クラスと「アクティブ」クラスの CSS を設定します
  2. 次に、要素にID 'MyElement'を与えます
  3. 次に、JavaScript で条件を作成します。以下の例のようになります... (それを実行して、myVar の値を 5 に変更すると、それがどのように機能するかがわかります)

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}
.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }
<div id="MyElement">
  
  </div>

于 2016-09-19T07:51:58.967 に答える
2

すべての条件スコープにコンテナ div を追加できます。

条件値をクラスとしてコンテナー div に追加します。(サーバー側プログラミングで設定できます - php/asp...)

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

各要素にクラスを追加することなく、ネストされたセレクターを使用して、コンテナー クラスを div 内のすべての要素のグローバル変数として使用できるようになりました。

.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}
于 2015-03-03T14:49:40.450 に答える
2

さらに別のオプション (if ステートメントを動的に評価するかどうかに基づく) は、ここで説明されているように、C プリプロセッサを使用することです。

于 2009-07-15T08:33:03.747 に答える
2

CSS には条件付きルールという機能があります。CSS のこの機能は、特定の条件に基づいて適用されます。条件付きルールは次のとおりです。

  • @サポート
  • @メディア
  • @資料

構文：

@supports ("condition") {

   /* your css style */

}

コード スニペットの例:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Supports Rule</title> 
    <style>      
        @supports (display: block) { 
            section h1 { 
                background-color: pink; 
                color: white; 
            } 
            section h2 { 
                background-color: pink; 
                color: black; 
            } 
        } 
    </style> 
</head> 
<body> 
    <section> 
        <h1>Stackoverflow</h1> 
        <h2>Stackoverflow</h2> 
    </section> 
</body> 
</html>

于 2020-10-13T12:21:31.817 に答える
1

(はい、古いスレッドです。しかし、Google 検索の一番上に表示されたので、他の人も興味を持っている可能性があります)

if/else-logic は javascript で実行できると思います。これにより、スタイルシートを動的にロード/アンロードできます。ブラウザーなどでこれをテストしていませんが、動作するはずです。これで始められます：

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

于 2010-02-25T09:02:25.610 に答える