Puoi usare le condizioni if ​​/ else nei CSS?

Vorrei utilizzare le condizioni nel mio CSS.

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

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

Sembra:

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

Può essere fatto? Come fai a fare questo?

Non nel senso tradizionale, ma puoi usare le classi per questo, se hai accesso all'HTML. Considera questo:

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

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

e nel tuo file CSS:

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

Questo è il modo CSS per farlo.

Poi ci sono preprocessori CSS come Sass . Puoi usare i condizionali lì, che assomigliano a questo:

$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 sei obbligato a pre-elaborare i tuoi fogli di stile e che la condizione viene valutata in fase di compilazione, non in fase di esecuzione.

Una caratteristica più recente del CSS vero e proprio sono le proprietà personalizzate (note anche come variabili CSS). Vengono valutati in fase di esecuzione (nei browser che li supportano).

Con loro potresti fare qualcosa del genere:

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

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

.two {
  background-color: black;
}

Infine, puoi preelaborare il tuo foglio di stile con la tua lingua lato server preferita. Se stai usando PHP, pubblica un style.css.phpfile simile a questo:

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

In questo caso, tuttavia, avrai un impatto sulle prestazioni, poiché la memorizzazione nella cache di un tale foglio di stile sarà difficile.

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

Uno dei motivi per cui i CSS fanno così schifo è esattamente che non ha la sintassi condizionale. Il CSS è di per sé completamente inutilizzabile nel moderno stack web. Usa SASS solo per un po 'e saprai perché lo dico. SASS ha una sintassi condizionale ... e molti altri vantaggi rispetto ai CSS primitivi.

Vecchia risposta (ancora valida):

Non può essere fatto in CSS in generale!

Hai le condizioni del browser come:

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

Ma nessuno ti impedisce di usare Javascript per alterare il DOM o assegnare classi dinamicamente o addirittura concatenare stili nel tuo rispettivo linguaggio di programmazione.

A volte invio classi CSS come stringhe alla vista e le faccio eco nel codice in questo modo (php):

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

Puoi usare calc()in combinazione con var()per una sorta di condizionali mimici:

: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;
}

concetto

Puoi creare due fogli di stile separati e includerne uno in base al risultato del confronto

In uno dei puoi mettere

background-position : 150px 8px;

Nell'altro

background-position : 4px 8px;

Penso che l'unico controllo che puoi eseguire in CSS sia il riconoscimento del browser:

Conditional-CSS

Sono sorpreso che nessuno abbia menzionato le pseudo-classi CSS, che sono anche una sorta di condizionali nei CSS. Puoi fare cose piuttosto avanzate con questo, senza una sola riga di JavaScript.

Alcune pseudo-classi:

• : attivo - L'elemento su cui si fa clic?
• : selezionato - La radio / casella di controllo / opzione è selezionata? (Ciò consente uno stile condizionale tramite l'uso di una casella di controllo!)
• : vuoto - L'elemento è vuoto?
• : fullscreen - Il documento è in modalità a schermo intero?
• : focus - L'elemento ha il focus della tastiera?
• : focus-within - L'elemento, o uno dei suoi figli, ha il focus della tastiera?
• : has ([selector]) - L'elemento contiene un elemento secondario che corrisponde a [selector]? (Purtroppo, non supportato da nessuno dei principali browser.)
• : hover - Il mouse passa sopra questo elemento?
• : in-range /: out-of-range - Il valore di ingresso è compreso tra / al di fuori dei limiti minimo e massimo?
• : invalid /: valid - L'elemento form ha contenuti non validi / validi?
• : link - È un link non visitato?
• : not () - Inverte il selettore.
• : target - Questo elemento è l'obiettivo del frammento di URL?
• : visitato - L'utente ha già visitato questo collegamento?

Esempio:

div { color: white; background: red }
input:checked + div { background: green }

<input type=checkbox>Click me!
<div>Red or green?</div>

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

Ovviamente questo presuppone che tu stia usando PHP ...

Puoi usare non invece di se mi piace

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

Per quanto ne so, non ci sono if / then / else in CSS. In alternativa, puoi utilizzare la funzione javascript per modificare la proprietà background-position di un elemento.

Un'altra opzione (in base al fatto che si desideri che l'istruzione if sia valutata dinamicamente o meno) è usare il preprocessore C, come descritto qui .

(Sì, vecchio thread. Ma è apparso in cima a una ricerca su Google, quindi anche altri potrebbero essere interessati)

Immagino che la logica if / else possa essere eseguita con javascript, che a sua volta può caricare / scaricare dinamicamente i fogli di stile. Non l'ho testato su browser ecc. Ma dovrebbe funzionare. Questo ti farà iniziare:

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

Questa è una piccola informazione in più per la risposta di Boldewyn sopra.

Aggiungi del codice php per eseguire l'operazione if / else

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

Puoi aggiungere div contenitore per tutto l'ambito della tua condizione.

Aggiungi il valore della condizione come classe al div contenitore. (puoi impostarlo tramite 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 puoi utilizzare la classe contenitore come variabile globale per tutti gli elementi nel div utilizzando un selettore nidificato, senza aggiungere la classe a ogni elemento.

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

Puoi usare javascript per questo scopo, in questo modo:

1. per prima cosa si imposta il CSS per la classe "normale" e per la classe "attiva"
2. quindi dai al tuo elemento l' id "MyElement"
3. e ora crei la tua condizione in JavaScript, qualcosa di simile all'esempio qui sotto ... (puoi eseguirlo, cambiare il valore di myVar a 5 e vedrai 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>

CSS è un paradigma ben progettato e molte delle sue funzionalità non sono molto utilizzate.

Se per condizione e variabile intendi un meccanismo per distribuire una modifica di un valore all'intero documento o nell'ambito di un elemento, allora ecco 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, distribuisci l'impatto della variabile in tutti gli stili CSS. È simile a quello che propongono @amichai e @SeReGa, ma più versatile.

Un altro trucco di questo tipo è distribuire l'ID di un elemento attivo in tutto il documento, ad esempio di nuovo quando si evidenzia un menu: (sintassi freemarker utilizzata)

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 è pratico solo con un set limitato di elementi, come categorie o stati, e non set illimitati come i prodotti dell'e-shop, altrimenti il ​​CSS generato sarebbe troppo grande. Ma è particolarmente conveniente quando si generano documenti offline statici.

Un altro trucco per fare "condizioni" con 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>

Se sei aperto all'uso di jquery, puoi impostare istruzioni condizionali utilizzando javascript all'interno dell'html:

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

Questo cambierà il colore del testo .classin verde se il valore di Variabile è maggiore di 0.

basta farlo in html usando l'operatore ternario non se altro

class = "{{condition? 'class1': 'class2'}}"

o

[ngClass] = "condition? 'class1': 'class2'"

Puoi usare php se scrivi css nel Tag

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style