Puoi usare se/else condizioni nel CSS?

Question

Vorrei utilizzare le condizioni nel mio CSS.

L'idea è che ho una variabile che sostituisco quando si esegue il sito per generare il foglio di stile corretto.

Lo voglio in modo che, in base a questa variabile, il foglio di stile cambi!

Assomiglia:

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

si può fare? Come fai a fare questo?

Answer 1

Non nel senso tradizionale, ma è possibile utilizzare le classi per questo, se avete accesso al codice HTML. Considerate questo:

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

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

e nel vostro file CSS:

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

Questo è il CSS modo per farlo.

---

Poi ci sono i preprocessori CSS come Sass.È possibile utilizzare conditionals lì, which'd simile a questa:

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

Gli svantaggi sono, che voi siete tenuti a pre-processo i fogli di stile, e che la condizione viene valutata al momento della compilazione, non è il tempo di esecuzione.

---

Una caratteristica più recente di CSS corretta sono custom properties (variabili CSS note anche come). Vengono valutati in fase di esecuzione (nei browser che li supportano).

Con loro si potrebbe fare qualcosa lungo la linea:

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

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

.two { 
    background-color: black; 
} 

---

Infine, si può trattare il vostro foglio di stile con il linguaggio server-side preferito. Se stai usando PHP, servire un file style.css.php, che sembra qualcosa di simile:

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

In questo caso, sarà comunque avere un impatto sulle prestazioni, dal momento che il caching tale foglio di stile sarà difficile.

Answer 2

Per quanto ne so, non c'è se/then/else in css. In alternativa, è possibile utilizzare la funzione javascript per modificare la proprietà position-position di un elemento.

Answer 3

Impostare il server per analizzare i file css come PHP e quindi definire la variabile variabile con una semplice istruzione PHP.

Naturalmente questo presuppone che si sta utilizzando PHP ...

Answer 4

Qui di seguito è la mia risposta vecchia che è ancora valida, ma ho un approccio più supponente oggi:

Uno dei motivi per cui CSS fa schifo così tanto è esattamente che non ha sintassi condizionale. Il CSS è di per sé completamente inutilizzabile nel moderno stack web. Usa SASS per un po 'e capirai perché lo dico. SASS ha una sintassi condizionale ... e molti altri vantaggi rispetto al CSS primitivo.

---

Vecchio risposta (ancora valido):

Non può essere fatto in CSS in generale!

avete la condizionali del browser come:

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

Ma nessuno ti impedisce di utilizzare Javascript per alterare il DOM o l'assegnazione classi in modo dinamico o addirittura concatenando stili nei vostri rispettivi linguaggio di programmazione.

volte mi mando classi CSS come stringhe alla vista e li unisco nel codice del genere (PHP):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div> 

Answer 5

Si potrebbe creare due fogli di stile indipendente e includono uno di loro in base al risultato del confronto

In uno dei si può mettere

background-position : 150px 8px; 

Nella altro

background-position : 4px 8px; 

I pensa che l'unico controllo che puoi eseguire in CSS è il riconoscimento del browser:

Conditional-CSS

Answer 6

Questa è una piccola informazione aggiuntiva alla risposta di Boldewyn sopra.

aggiungere del codice php per fare il if/else

if($x==1){ 
    print "<p class=\"normal\">Text</p>\n"; 
} else { 
    print "<p class=\"active\">Text</p>\n"; 
} 

Answer 7

Ancora un'altra opzione (a seconda che si vuole che se dichiarazione da valutare in modo dinamico o no) è quello di utilizzare il preprocessore C, come descritto here .

Answer 8

(Sì, vecchio thread. Ma si è in cima a un Google-ricerca in modo che altri potrebbero essere interessati pure)

Credo che il if/else-logica potrebbe essere fatto con javascript, che a sua volta può caricare/scaricare dinamicamente i fogli di stile. Non ho provato questo attraverso i browser ecc. Ma dovrebbe funzionare. Questo vi permetterà di cominciare:

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

Answer 9

è possibile utilizzare non invece di se come

.Container *:not(a) 
{ 
    color: #fff; 
} 

Answer 10

È possibile aggiungere div contenitore per tutte le vostre condizioni di portata.

Aggiungere il valore della condizione come classe al div contenitore. (puoi impostarlo dalla programmazione lato server - php/asp ...)

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

Ora è possibile utilizzare la classe contenitore come variabile globale per tutti gli elementi del div con selettore di nidificato, senza aggiungere alla classe di ogni elemento.

.true-value p{ 
    backgrounf-color:green; 
} 
.false-value p{ 
    backgrounf-color:red; 
} 

Answer 11

Se siete aperti a utilizzare jQuery, è possibile impostare istruzioni condizionali utilizzando JavaScript all'interno del codice HTML:

$('.class').css("color",((Variable > 0) ? "#009933":"#000")); 

Questo cambierà il colore del testo di .class al verde se il valore della variabile è maggiore di 0.

Answer 12

È possibile utilizzare JavaScript per questo scopo, in questo modo:

1. prima si imposta il CSS per la classe 'normale' e per la classe 'attivo'
2. poi si dà al vostro elemento del id 'MyElement'
3. e ora fate la vostra condizione in JavaScript, qualcosa come nell'esempio qui sotto ... (è possibile eseguire, modificare il valore di myVar a 5 e si vedrà come funziona)

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>

Answer 13

CSS è un paradigma ben progettato, e molte delle sue caratteristiche non sono molto utilizzati.

Se da una condizione e variabile si intende un meccanismo per distribuire un cambiamento di un certo valore per l'intero documento, o sotto un ambito di qualche elemento, allora questo è come farlo:

var myVar = 4; 
 
document.body.className = (myVar == 5 ? "active" : "normal");

body.active .menuItem { 
 
    background-position : 150px 8px; 
 
    background-color: black; 
 
} 
 
body.normal .menuItem { 
 
    background-position : 4px 8px; 
 
    background-color: green; 
 
}

<body> 
 
<div class="menuItem"></div> 
 
</body>

In questo modo, si distribuisce l'impatto della variabile in tutti gli stili CSS. Questo è simile a ciò che @amichai e @SeReGa propongono, ma più versatile.

Un altro trucco del genere consiste nel distribuire l'ID di un elemento attivo in tutto il documento, ad es. di nuovo quando evidenziando un menu: (sintassi Freemarker utilizzato)

var chosenCategory = 15; 
 
document.body.className = "category" + chosenCategory;

<#list categories as cat > 
 
    body.category${cat.id} .menuItem { font-weight: bold; } 
 
</#list>

<body> 
 
<div class="menuItem"></div> 
 
</body>

Certo, questo è utile solo con un numero limitato di elementi, come le categorie o Stati, e insiemi non illimitate, come e-shop merci, altrimenti il ​​CSS generato sarebbe troppo grande. Ma è particolarmente utile quando si generano documenti offline statici.

Un altro trucco per fare "condizioni" con i CSS in combinazione con la piattaforma di generazione è questo:

.myList { 
 
    /* Default list formatting */ 
 
} 
 
.myList.count0 { 
 
    /* Hide the list when there is no item. */ 
 
    display: none; 
 
} 
 
.myList.count1 { 
 
    /* Special treatment if there is just 1 item */ 
 
    color: gray; 
 
}

<ul class="myList count${items.size()}"> 
 
<!-- Iterate list's items here --> 
 
<li>Something...</div> 
 
</ul>

Answer 14

È possibile utilizzare calc() in combinazione con var() per ordinare dei condizionali mimica:

:root { 
--var-eq-two: 0; 
} 

.var-eq-two { 
    --var-eq-two: 1; 
} 

.block { 
    background-position: calc(
     150px * var(--var-eq-two) + 
     4px * (1 - var(--var-eq-two)) 
    ) 8px; 
} 

concept