Puoi usare if / else in CSS?

Vorrei usare le condizioni nel mio CSS.

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

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:

 

Text

Text

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 i preprocessori CSS come Sass . Puoi usare i condizionali lì, che assomiglieresti 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 è necessario pre-elaborare i fogli di stile e che la condizione viene valutata in fase di compilazione, non in fase di esecuzione.


Una nuova funzionalità del CSS corretto sono le proprietà personalizzate (dette anche variabili CSS). Vengono valutati in fase di esecuzione (nei browser che li supportano).

Con loro potresti fare qualcosa sulla linea:

 :root { --main-bg-color: brown; } .one { background-color: var(--main-bg-color); } .two { background-color: black; } 

Infine, puoi pre-elaborare il tuo foglio di stile con la tua lingua lato server preferita. Se stai usando PHP, servi un file style.css.php , che assomiglia a qualcosa del genere:

 p { background-position: px 8px; } 

In questo caso, tuttavia, si avrà 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ù ponderato:

Uno dei motivi per cui CSS fa così schifo è esattamente che non ha una syntax 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 syntax condizionale … e molti altri vantaggi rispetto al CSS primitivo.


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 dynamicmente o addirittura concatenare stili nel tuo rispettivo linguaggio di programmazione.

A volte invio classi CSS come stringhe alla vista e le echo nel codice come quello (php):

 
content

È ansible 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 nei CSS sia il riconoscimento del browser:

Conditional-CSS

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 …

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

Aggiungi del codice php per fare il if / else

 if($x==1){ print "

Text

\n"; } else { print "

Text

\n"; }

Puoi usare non invece se piace

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

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

Un’altra opzione (basata sul fatto che si desideri che l’istruzione if sia valutata dynamicmente o meno) è quella di usare il preprocessore C, come descritto qui .

(Sì, thread precedente, ma è comparso in cima a una ricerca su Google in modo che anche altri possano essere interessati)

Immagino che la logica if / else potrebbe essere fatta con javascript, che a sua volta può caricare / scaricare dynamicmente i fogli di stile. Non ho provato questo attraverso i browser ecc. Ma dovrebbe funzionare. Questo ti farà iniziare:

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

Puoi aggiungere contenitore div per tutto il tuo ambito di condizioni.

Aggiungi il valore della condizione come class al div contenitore. (puoi impostarlo dalla programmazione lato server – php / asp …)

  

my content

my content

my content

Ora puoi usare la class contenitore come variabile globale per tutti gli elementi nel div usando il selettore annidato, senza aggiungere la class a ciascun elemento.

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

Puoi usare calc() in combinazione con var() per ordinare i condizionali imitativi:

 :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

Se sei libero di usare jquery, puoi impostare istruzioni condizionali usando javascript all’interno dell’html:

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

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

Puoi usare javascript per questo scopo, in questo modo:

  1. prima si imposta il CSS per la class ‘normale’ e per la class ‘triggers’
  2. poi dai al tuo elemento l’ id ‘MyElement’
  3. e ora fai la tua condizione in JavaScript, qualcosa come nell’esempio sotto … (puoi eseguirlo, cambiare il valore di myVar in 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; } 
 

Il CSS è un paradigma ben progettato e molte delle sue funzioni non sono molto usate.

Se per condizione e variabile si intende un meccanismo per distribuire un cambiamento di qualche valore all’intero documento o nell’ambito di un certo 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; } 
    

Puoi usare php se scrivi css nel Tag