Können Sie if / else-Bedingungen in CSS verwenden?

Ich möchte Bedingungen in meinem CSS verwenden.

Die Idee ist, dass ich eine Variable habe, die ich ersetze, wenn die Site ausgeführt wird, um das richtige Stylesheet zu generieren.

Ich möchte, dass sich gemäß dieser Variablen das Stylesheet ändert!

Es sieht aus wie:

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

Kann das gemacht werden? Wie machst Du das?

Nicht im herkömmlichen Sinne, aber Sie können Klassen dafür verwenden, wenn Sie Zugriff auf HTML haben. Bedenken Sie:

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

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

und in Ihrer CSS-Datei:

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

Das ist die CSS- Methode.

Dann gibt es CSS-Präprozessoren wie Sass . Sie können dort Bedingungen verwenden , die folgendermaßen aussehen würden:

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

Nachteile sind, dass Sie Ihre Stylesheets vorverarbeiten müssen und dass die Bedingung zur Kompilierungszeit und nicht zur Laufzeit ausgewertet wird.

Eine neuere Funktion von CSS sind benutzerdefinierte Eigenschaften (auch als CSS-Variablen bezeichnet). Sie werden zur Laufzeit ausgewertet (in Browsern, die sie unterstützen).

Mit ihnen könnten Sie etwas entlang der Linie tun:

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

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

.two {
  background-color: black;
}

Schließlich können Sie Ihr Stylesheet mit Ihrer bevorzugten serverseitigen Sprache vorverarbeiten. Wenn Sie PHP verwenden, stellen Sie eine style.css.phpDatei bereit, die ungefähr so ​​aussieht:

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

In diesem Fall haben Sie jedoch Auswirkungen auf die Leistung, da das Zwischenspeichern eines solchen Stylesheets schwierig ist.

Unten ist meine alte Antwort, die immer noch gültig ist, aber ich habe heute einen eher einfühlsamen Ansatz:

Einer der Gründe, warum CSS so nervt, ist genau, dass es keine bedingte Syntax hat. CSS ist im modernen Webstack per se völlig unbrauchbar. Verwenden Sie SASS nur für eine kurze Zeit und Sie werden wissen, warum ich das sage. SASS hat eine bedingte Syntax ... und viele andere Vorteile gegenüber primitivem CSS.

Alte Antwort (noch gültig):

Dies ist im Allgemeinen nicht in CSS möglich!

Sie haben folgende Browserbedingungen:

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

Aber niemand hält Sie davon ab, Javascript zu verwenden, um das DOM zu ändern oder Klassen dynamisch zuzuweisen oder sogar Stile in Ihrer jeweiligen Programmiersprache zu verketten.

Manchmal sende ich CSS-Klassen als Zeichenfolgen an die Ansicht und gebe sie wie folgt in den Code zurück (php):

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

Sie können calc()in Kombination mit verwenden var(), um Bedingungen zu imitieren:

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

Konzept

Sie können zwei separate Stylesheets erstellen und basierend auf dem Vergleichsergebnis eines davon einfügen

In einen kann man setzen

background-position : 150px 8px;

In der anderen

background-position : 4px 8px;

Ich denke, dass die einzige Überprüfung, die Sie in CSS durchführen können, die Browsererkennung ist:

Bedingtes CSS

Ich bin überrascht, dass niemand CSS-Pseudoklassen erwähnt hat, die auch eine Art Bedingung in CSS sind. Sie können damit einige ziemlich fortgeschrittene Dinge tun, ohne eine einzige Zeile JavaScript.

Einige Pseudoklassen:

• : active - Wird auf das Element geklickt?
• : markiert - Ist das Radio / Kontrollkästchen / die Option aktiviert? (Dies ermöglicht ein bedingtes Styling mithilfe eines Kontrollkästchens!)
• : leer - Ist das Element leer?
• : Vollbild - Befindet sich das Dokument im Vollbildmodus?
• : focus - Hat das Element einen Tastaturfokus?
• : focus-inside - Hat das Element oder eines seiner untergeordneten Elemente einen Tastaturfokus?
• : has ([Selektor]) - Enthält das Element ein untergeordnetes Element, das mit [Selektor] übereinstimmt? (Leider von keinem der gängigen Browser unterstützt.)
• : hover - Schwebt die Maus über diesem Element?
• : in-range /: out-of-range - Liegt der Eingabewert zwischen / außerhalb der Min- und Max-Grenzen?
• : ungültig /: gültig - Hat das Formularelement ungültigen / gültigen Inhalt?
• : link - Ist das ein nicht besuchter Link?
• : not () - Wählt den Selektor um.
• : target - Ist dieses Element das Ziel des URL-Fragments?
• : visit - Hat der Benutzer diesen Link schon einmal besucht?

Beispiel:

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

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

Richten Sie den Server so ein, dass CSS-Dateien als PHP analysiert werden, und definieren Sie dann die Variablenvariable mit einer einfachen PHP-Anweisung.

Dies setzt natürlich voraus, dass Sie PHP verwenden ...

Sie können nicht anstelle von wenn wie verwenden

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

Soweit ich weiß, gibt es kein Wenn / Dann / Sonst in CSS. Alternativ können Sie die Javascript-Funktion verwenden, um die Hintergrundpositionseigenschaft eines Elements zu ändern.

Eine weitere Option (basierend darauf, ob die if-Anweisung dynamisch ausgewertet werden soll oder nicht) ist die Verwendung des C-Präprozessors, wie hier beschrieben .

(Ja, alter Thread. Aber er tauchte über einer Google-Suche auf, sodass auch andere interessiert sein könnten.)

Ich denke, die if / else-Logik könnte mit Javascript durchgeführt werden, das wiederum Stylesheets dynamisch laden / entladen kann. Ich habe dies nicht über Browser usw. getestet, aber es sollte funktionieren. Damit können Sie loslegen:

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

Dies ist eine kleine zusätzliche Information zur obigen Boldewyn-Antwort.

Fügen Sie einen PHP-Code hinzu, um das if / else auszuführen

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

Sie können Container div für Ihren gesamten Bedingungsbereich hinzufügen.

Fügen Sie den Bedingungswert als Klasse zum Container div hinzu. (Sie können es durch serverseitige Programmierung einstellen - php / asp ...)

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

Jetzt können Sie die Containerklasse mithilfe eines verschachtelten Selektors als globale Variable für alle Elemente im div verwenden, ohne die Klasse jedem Element hinzuzufügen.

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

Sie können Javascript für diesen Zweck folgendermaßen verwenden:

1. Zuerst legen Sie das CSS für die 'normale' Klasse und für die 'aktive' Klasse fest
2. dann geben Sie Ihrem Element die ID 'MyElement'
3. und jetzt machen Sie Ihre Bedingung in JavaScript, so etwas wie das folgende Beispiel ... (Sie können es ausführen, den Wert von myVar auf 5 ändern und Sie werden sehen, wie es funktioniert)

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 ist ein gut gestaltetes Paradigma, und viele seiner Funktionen werden nicht häufig verwendet.

Wenn Sie unter einer Bedingung und einer Variablen einen Mechanismus verstehen, mit dem eine Änderung eines Werts auf das gesamte Dokument oder auf einen bestimmten Bereich verteilt werden kann, gehen Sie wie folgt vor:

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>

Auf diese Weise verteilen Sie die Auswirkungen der Variablen auf die CSS-Stile. Dies ähnelt dem, was @amichai und @SeReGa vorschlagen, ist jedoch vielseitiger.

Ein weiterer solcher Trick besteht darin, die ID eines aktiven Elements im gesamten Dokument zu verteilen, z. B. erneut, wenn ein Menü hervorgehoben wird: (Freemarker-Syntax verwendet)

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>

Sicher, dies ist nur mit einer begrenzten Anzahl von Artikeln wie Kategorien oder Status und nicht mit einer unbegrenzten Anzahl von Artikeln wie E-Shop-Waren praktisch, da sonst das generierte CSS zu groß wäre. Dies ist jedoch besonders praktisch, wenn statische Offline-Dokumente generiert werden.

Ein weiterer Trick, um "Bedingungen" mit CSS in Kombination mit der generierenden Plattform zu erfüllen, ist folgender:

.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>

Wenn Sie für die Verwendung von jquery offen sind, können Sie bedingte Anweisungen mithilfe von Javascript im HTML-Code festlegen:

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

Dadurch wird die Textfarbe von .classin Grün geändert , wenn der Wert von Variable größer als ist 0.

mach das einfach in html:

class = "{{Bedingung? 'Klasse1': 'Klasse2'}}"

Sie können PHP verwenden, wenn Sie CSS in das Tag schreiben

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