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

119

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?

Haim Evgi
quelle
Was zum Teufel versuchen Sie zu tun, das CSS-Bedingungen erfordern würde?
Sapphire_Brick

Antworten:

137

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.

Boldewyn
quelle
10
Gute Antwort, ich möchte nur einen Punkt zum Caching hinzufügen: Da Browser Stylesheets zwischenspeichern und sie normalerweise nicht für jede Seite erneut herunterladen, ist es schwierig, sich auf "dynamische" Stylesheets zu verlassen, die von PHP / [Programmiersprache der Wahl] generiert wurden. . Es ist nicht so, wie es funktionieren soll. Wenn Sie CSS ändern müssen, können Sie es natürlich in die Seite einbetten, aber das widerspricht der Trennung von Inhalt und Präsentation.
Täuschung
3
In Bezug auf das, was Täuschung gesagt hat, heißt das nicht, dass Sie keine sich dynamisch ändernde Website haben können. Die Stylesheets können statisch bleiben, und Sie können Elementklassen mithilfe von Javascript mit oder ohne JQuery oder PHP ändern, sodass sich das Styling der Elemente ändern kann.
csga5000
Und was ist, wenn Sie Bildlaufleisten stilisieren möchten? (Sie können nicht finden :: - Webkit-Bildlaufleiste-Schaltfläche in HTML)
Jerry
Ähm, ja? Was ist damit? Sass, CSS-Variablen und serverseitige Verarbeitung hängen nicht vom HTML ab. Oder fehlt mir hier etwas?
Boldewyn
15

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>
Markus
quelle
14
Überrascht hat niemand angegeben, dass diese bedingte Syntax in CSS nicht existiert. Bedingte Kommentare existieren nur in HTML.
BoltClock
12

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

yeedle
quelle
8

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

RaYell
quelle
8

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>

Peter
quelle
6

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

bettelt
quelle
2
Sie können "PHP" durch "Ihre Programmier- oder Template-Sprache Ihrer Wahl" ersetzen
Quentin
1
Das Problem ist, wenn Ihr CSS 50 KB groß ist und Sie nur wenige Werte ändern, wäre es nicht besser, statisch und zwischengespeichert zu sein?
Alex
2
Ja, aber Sie könnten die Teile extrahieren, um Dynamik zu benötigen, und sie über wieder aufnehmen @import url('dynamic.css.php').
Boldewyn
Es hängt von den Bedingungen ab. Wenn sie auf Benutzerbasis stabil sind, können Sie die üblichen Cache-Steuerungsheader ausgeben.
Quentin
5

Sie können nicht anstelle von wenn wie verwenden

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

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.

hadi teo
quelle
3

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 .

Michiel Buddingh
quelle
3

(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

josteinaj
quelle
3

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";
}
Johan
quelle
3

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;
}
Amichai
quelle
2

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>

SeReGa
quelle
2

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>

Ondra Žižka
quelle
1

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.

Kyle Lillie
quelle
0

mach das einfach in html:

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

Gaurav Panwar
quelle
-1

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

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