it-swarm.com.de

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

Ich möchte es so, dass sich das Stylesheet gemäß dieser Variablen ä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?

93
Haim Evgi

Nicht im klassischen Sinne, aber Sie können Klassen dafür verwenden, wenn Sie auf HTML zugreifen können. Bedenken Sie:

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

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

und in deiner CSS-Datei:

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

Das ist der CSS Weg, dies zu tun.


Dann gibt es CSS-Präprozessoren wie Sass . Sie können conditionals dort verwenden, was so aussehen würde:

$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 die Bedingung zur Kompilierungszeit und nicht zur Laufzeit ausgewertet wird.


Eine neuere Funktion der eigentlichen CSS-Eigenschaft sind benutzerdefinierte Eigenschaften (a.k.a. CSS-Variablen). Sie werden zur Laufzeit ausgewertet (in unterstützenden Browsern).

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

: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.php-Datei bereit, die ungefähr wie folgt 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.

111
Boldewyn

Hier ist meine alte Antwort, die immer noch gültig ist, aber ich habe heute einen meinungsmäßigeren Ansatz:

Einer der Gründe, warum CSS so schlecht ist, ist, dass es keine bedingte Syntax gibt. CSS ist im modernen Web-Stack an sich völlig unbrauchbar. Verwenden Sie kurz SASS und Sie wissen, warum ich das sage. SASS hat eine bedingte Syntax ... und viele andere Vorteile gegenüber primitivem CSS.


Alte Antwort (noch gültig):

Im Allgemeinen ist dies nicht in CSS möglich!

Sie haben die Browser-Bedingungen wie:

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

Aber niemand hindert Sie daran, Javascript zu verwenden, um das DOM zu ändern oder Klassen dynamisch zuzuordnen oder sogar Stile in Ihrer jeweiligen Programmiersprache zu verketten.

Ich sende manchmal CSS-Klassen als Zeichenfolgen an die Ansicht und füge sie so in den Code (php) ein:

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

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

In einen der kannst du setzen

background-position : 150px 8px;

In der anderen

background-position : 4px 8px;

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

Bedingtes CSS

8
RaYell

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

6
beggs

Dies ist eine kleine Zusatzinformation zur obigen Boldewyn-Antwort.

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

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

Sie können nicht statt wenn verwenden 

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

(Ja, alter Thread. Aber es wurde auf einer Google-Suche angezeigt, so dass auch andere daran interessiert sein könnten.]

Ich denke, die if/else-Logik könnte mit Javascript gemacht werden, das wiederum Stylesheets dynamisch laden/entladen kann. Ich habe das nicht für Browser usw. getestet, aber es sollte funktionieren. Dies wird dich anfangen lassen:

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

3
josteinaj

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

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 als globale Variable für alle Elemente im div mit verschachteltem Selektor verwenden, ohne die Klasse jedem Element hinzuzufügen.

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

Soweit ich weiß, gibt es kein if/then/else in css. Alternativ können Sie die JavaScript-Funktion verwenden, um die Hintergrundposition eines Elements zu ändern.

3
hadi teo

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

: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

2
yeedle

CSS ist ein schön gestaltetes Paradigma, und viele seiner Funktionen werden nicht viel genutzt.

Wenn Sie mit einer Bedingung und einer Variablen einen Mechanismus zum Verteilen einer Änderung eines bestimmten Werts auf das gesamte Dokument oder unter einem bestimmten Element eines Elements meinen, 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 von @amichai und @SeReGa vorgeschlagenen, ist jedoch vielseitiger.

Ein anderer Trick besteht darin, die ID eines aktiven Elements im gesamten Dokument zu verteilen, z. erneut beim Markieren eines Menüs: (verwendete Freemarker-Syntax)

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>

Natürlich ist dies nur mit einer begrenzten Anzahl von Elementen, wie Kategorien oder Zuständen, und nicht unbegrenzten Mengen wie E-Shop-Waren praktisch, da sonst das generierte CSS zu groß wäre. Dies ist jedoch besonders praktisch, wenn statische Offline-Dokumente erstellt werden.

Ein weiterer Trick, um "Bedingungen" mit CSS in Kombination mit der generierenden Plattform zu tun, 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>

1
Ondra Žižka

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, etwa das folgende Beispiel ... (Sie können es ausführen, den Wert von myVar in 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>

1
SeReGa

Wenn Sie offen für die Verwendung von Jquery sind, können Sie bedingte Anweisungen mithilfe von Javascript in der HTML-Datei festlegen:

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

Dies ändert die Textfarbe von .class in grün, wenn der Wert von Variable größer als 0 ist.

1
Kyle Lillie

Sie können PHP verwenden, wenn Sie im Tag css schreiben

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