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?
css
stylesheet
conditional-statements
Haim Evgi
quelle
quelle
Antworten:
Nicht im herkömmlichen Sinne, aber Sie können Klassen dafür verwenden, wenn Sie Zugriff auf HTML haben. Bedenken Sie:
und in Ihrer CSS-Datei:
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:
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:
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 so aussieht:In diesem Fall haben Sie jedoch Auswirkungen auf die Leistung, da das Zwischenspeichern eines solchen Stylesheets schwierig ist.
quelle
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:
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):
quelle
Sie können
calc()
in Kombination mit verwendenvar()
, um Bedingungen zu imitieren:Konzept
quelle
Sie können zwei separate Stylesheets erstellen und basierend auf dem Vergleichsergebnis eines davon einfügen
In einen kann man setzen
In der anderen
Ich denke, dass die einzige Überprüfung, die Sie in CSS durchführen können, die Browsererkennung ist:
Bedingtes CSS
quelle
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:
Beispiel:
quelle
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 ...
quelle
@import url('dynamic.css.php')
.Sie können nicht anstelle von wenn wie verwenden
quelle
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.
quelle
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 .
quelle
(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
quelle
Dies ist eine kleine zusätzliche Information zur obigen Boldewyn-Antwort.
Fügen Sie einen PHP-Code hinzu, um das if / else auszuführen
quelle
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 ...)
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.
quelle
Sie können Javascript für diesen Zweck folgendermaßen verwenden:
quelle
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:
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)
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:
quelle
Wenn Sie für die Verwendung von jquery offen sind, können Sie bedingte Anweisungen mithilfe von Javascript im HTML-Code festlegen:
Dadurch wird die Textfarbe von
.class
in Grün geändert , wenn der Wert von Variable größer als ist0
.quelle
mach das einfach in html:
class = "{{Bedingung? 'Klasse1': 'Klasse2'}}"
quelle
Sie können PHP verwenden, wenn Sie CSS in das Tag schreiben
quelle