Si può utilizzare if/else condizioni in CSS?

Question

Vorrei che le condizioni di utilizzo nel mio CSS.

L'idea è quella di avere una variabile che posso sostituire quando il sito è gestito per generare il diritto del foglio di stile.

Lo voglio così che, in base a questa variabile il foglio di stile che cambia!

Sembra che:

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

Questo può essere fatto?Come si fa a fare questo?

Answer 1

Non nel senso tradizionale, ma è possibile utilizzare le classi per questo, se si ha 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 preprocessore CSS come Sass . È possibile utilizzare condizionali 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 corrono il tempo.

---

Una caratteristica più recente di CSS corretta sono proprietà personalizzate ( aka variabili CSS). Essi sono valutati in fase di esecuzione (nei browser che li sostengono).

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

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

Una delle ragioni per le quali CSS succhia così tanto è esattamente che non ha la sintassi condizionale. CSS è di per sé del tutto inutilizzabile nel moderno pila web. Utilizzare SASS solo per un po 'e saprete perché dico che. SASS ha una sintassi condizionale ... e un sacco di altri vantaggi rispetto primitiva CSS troppo.

---

Old risposta (ancora valido):

Non può essere fatto in CSS in generale!

Sono disponibili le condizionali 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 nel vostro rispettivo linguaggio di programmazione.

A 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 3

È possibile 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;

In l'altro

background-position : 4px 8px;

Credo che l'unico controllo che è possibile eseguire in CSS è il riconoscimento del browser:

condizionale-CSS

Answer 4

Impostare il server fino a analizzare i file css come PHP e quindi definire la variabile variabile con una semplice dichiarazione di PHP.

Naturalmente questo presuppone che si sta utilizzando PHP ...

Answer 5

È possibile utilizzare non al posto di se come

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

Answer 6

Questo è un po 'di informazioni in più per il Boldewyn risposta precedente.

Aggiungere un po 'di 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

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

concetto

Answer 8

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

Answer 9

Ancora un'altra opzione (a seconda che si desidera che if per essere dinamicamente valutata o meno) è quello di utilizzare il preprocessore C, come descritto qui .

Answer 10

(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ò dinamicamente caricare / scaricare i fogli di stile. Non ho ancora testato questo tutti i browser ecc ma dovrebbe funzionare. Questo vi permetterà di cominciare:

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

Answer 11

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

Aggiungere il valore della condizione come una classe al div contenitore. (È possibile impostare per la 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 12

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

Se da una condizione e variabile si intende un meccanismo per distribuire una modifica di un valore per l'intero documento, o in un ambito di qualche elemento, quindi questo è il modo per 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, è possibile distribuire l'impatto della variabile in tutto il stili CSS.Questo è simile a ciò che @amichai e @SeReGa proporre, ma più versatile.

Un altro trucco è quello di distribuire l'ID di qualche elemento attivo in tutto il documento, ad es.di nuovo evidenziando un menu:(Freemarker sintassi usata)

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 è solo pratico, con un set limitato di elementi, come le categorie o gli stati e non illimitato imposta come e-shop di prodotti, altrimenti generato CSS sarebbe troppo grande.Ma è particolarmente utile quando la generazione statica documenti offline.

Ecco un trucco per fare le "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 13

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 14

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

1. prima di impostare il CSS per la classe 'normale' e per la classe 'attivo'
2. , allora si dà al vostro elemento id 'MyElement'
3. e adesso 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 15

È possibile utilizzare PHP se si scrive CSS nel tag

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