Czy możesz używać warunków if / else w CSS?

Chciałbym używać warunków w moim CSS.

Chodzi o to, że mam zmienną, którą zastępuję, gdy witryna jest uruchamiana, aby wygenerować odpowiedni arkusz stylów.

Chcę, żeby zmienił się arkusz stylów zgodnie z tą zmienną!

To wygląda jak:

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

Czy można to zrobić? Jak Ty to robisz?

Nie w tradycyjnym sensie, ale możesz użyć do tego klas, jeśli masz dostęp do HTML. Rozważ to:

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

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

aw pliku CSS:

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

To jest sposób CSS, aby to zrobić.

Są też preprocesory CSS, takie jak Sass . Możesz tam użyć warunków warunkowych , które wyglądałyby tak:

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

Wadą jest to, że jesteś zobowiązany do wstępnego przetwarzania swoich arkuszy stylów i że warunek jest oceniany w czasie kompilacji, a nie w czasie wykonywania.

Nowszą cechą właściwego CSS są właściwości niestandardowe (inaczej zmienne CSS). Są one oceniane w czasie wykonywania (w obsługujących je przeglądarkach).

Dzięki nim możesz zrobić coś wzdłuż linii:

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

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

.two {
  background-color: black;
}

Na koniec możesz wstępnie przetworzyć swój arkusz stylów za pomocą ulubionego języka po stronie serwera. Jeśli używasz PHP, podaj style.css.phpplik, który wygląda mniej więcej tak:

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

W takim przypadku będziesz miał jednak wpływ na wydajność, ponieważ buforowanie takiego arkusza stylów będzie trudne.

Poniżej znajduje się moja stara odpowiedź, która jest nadal aktualna, ale dziś mam bardziej uparte podejście:

Jednym z powodów, dla których CSS jest tak bardzo do bani, jest to, że nie ma on składni warunkowej. CSS jest sam w sobie całkowicie bezużyteczny w nowoczesnym stosie internetowym. Użyj SASS tylko przez chwilę, a będziesz wiedział, dlaczego to mówię. SASS ma składnię warunkową ... i WIELE innych zalet w porównaniu z prymitywnym CSS.

Stara odpowiedź (nadal ważna):

W ogóle nie da się tego zrobić w CSS!

Masz warunki przeglądarki, takie jak:

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

Ale nikt nie powstrzymuje Cię przed używaniem Javascript do zmiany DOM lub dynamicznego przypisywania klas lub nawet łączenia stylów w Twoim języku programowania.

Czasami wysyłam klasy css jako ciągi do widoku i powtarzam je w kodzie w ten sposób (php):

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

Możesz używać calc()w połączeniu z, var()aby posortować naśladujące warunki:

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

pojęcie

Możesz utworzyć dwa oddzielne arkusze stylów i dołączyć jeden z nich na podstawie wyniku porównania

W jednym z możesz umieścić

background-position : 150px 8px;

W drugim

background-position : 4px 8px;

Myślę, że jedyne sprawdzenie, jakie możesz wykonać w CSS, to rozpoznawanie przeglądarki:

Warunkowy CSS

Dziwię się, że nikt nie wspomniał o pseudoklasach CSS, które są również rodzajem warunków w CSS. Dzięki temu możesz zrobić całkiem zaawansowane rzeczy bez ani jednej linii JavaScript.

Niektóre pseudoklasy:

• : active - Czy klikany element?
• : zaznaczone - Czy radio / pole wyboru / opcja są zaznaczone? (Pozwala to na warunkowe stylizowanie za pomocą pola wyboru!)
• : empty - Czy element jest pusty?
• : fullscreen - Czy dokument jest w trybie pełnoekranowym?
• : focus - czy element ma fokus klawiatury?
• : focus-within - czy element lub którekolwiek z jego elementów podrzędnych ma fokus klawiatury?
• : has ([selector]) - Czy element zawiera element potomny, który pasuje do [selector]? (Niestety, nie jest obsługiwany przez żadną z głównych przeglądarek).
• : hover - czy mysz znajduje się nad tym elementem?
• : in-range /: out-of-range - Czy wartość wejściowa znajduje się między / poza minimalnymi i maksymalnymi limitami?
• : nieważne /: poprawne - Czy element formularza ma nieprawidłową / prawidłową zawartość?
• : link - Czy to nie odwiedzony link?
• : not () - Odwróć selektor.
• : target - czy ten element jest celem fragmentu adresu URL?
• : odwiedzone - Czy użytkownik odwiedził już ten link?

Przykład:

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

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

Ustaw serwer tak, aby parsował pliki css jako PHP, a następnie zdefiniuj zmienną zmienną za pomocą prostej instrukcji PHP.

Oczywiście zakłada się, że używasz PHP ...

Możesz użyć not zamiast if like

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

O ile wiem, w css nie ma if / then / else. Alternatywnie możesz użyć funkcji javascript do zmiany właściwości background-position elementu.

Jeszcze inną opcją (w zależności od tego, czy chcesz, aby instrukcja była obliczana dynamicznie, czy nie) jest użycie preprocesora C, jak opisano tutaj .

(Tak, stary wątek. Ale pojawił się w wyszukiwarce Google, więc inni też mogą być zainteresowani)

Wydaje mi się, że logikę if / else można wykonać za pomocą javascript, który z kolei może dynamicznie ładować / usuwać arkusze stylów. Nie testowałem tego w różnych przeglądarkach itp., Ale powinno działać. To pozwoli Ci zacząć:

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

To trochę dodatkowych informacji do powyższej odpowiedzi Boldewyn.

Dodaj trochę kodu PHP, aby wykonać if / else

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

Możesz dodać element div kontenera dla całego zakresu warunku.

Dodaj wartość warunku jako klasę do elementu div kontenera. (można to ustawić przez programowanie po stronie serwera - php / asp ...)

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

Teraz możesz użyć klasy kontenera jako zmiennej globalnej dla wszystkich elementów w div za pomocą zagnieżdżonego selektora, bez dodawania klasy do każdego elementu.

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

W tym celu możesz użyć javascript w ten sposób:

1. najpierw ustawiasz CSS dla „normalnej” klasy i dla „aktywnej” klasy
2. następnie nadajesz swojemu elementowi identyfikator „MyElement”
3. a teraz ustawiasz swój warunek w JavaScript, jak na poniższym przykładzie ... (możesz go uruchomić, zmienić wartość myVar na 5 i zobaczysz, jak to działa)

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 to ładnie zaprojektowany paradygmat, a wiele z jego funkcji jest rzadko używanych.

Jeśli przez warunek i zmienną masz na myśli mechanizm rozprowadzania zmiany jakiejś wartości na cały dokument lub w zakresie jakiegoś elementu, to tak to zrobić:

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>

W ten sposób rozkładasz wpływ zmiennej na style CSS. Jest to podobne do tego, co proponują @amichai i @SeReGa, ale bardziej wszechstronne.

Inną taką sztuczką jest rozprowadzenie identyfikatora jakiejś aktywnej pozycji w całym dokumencie, np. Ponownie podczas podświetlania menu: (używana składnia Freemarker)

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>

Jasne, jest to praktyczne tylko w przypadku ograniczonego zestawu elementów, takich jak kategorie lub stany, a nie nieograniczonych zestawów, takich jak towary ze sklepu internetowego, w przeciwnym razie wygenerowany CSS byłby zbyt duży. Jest to jednak szczególnie wygodne przy generowaniu statycznych dokumentów offline.

Jeszcze jedna sztuczka umożliwiająca wykonanie „warunków” za pomocą CSS w połączeniu z platformą generującą to:

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

Jeśli jesteś otwarty na używanie jquery, możesz ustawić instrukcje warunkowe za pomocą javascript w html:

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

Spowoduje to zmianę koloru tekstu .classna zielony, jeśli wartość zmiennej jest większa niż 0.

po prostu zrób to w html za pomocą operatora trójargumentowego, a nie if else

class = "{{warunek? 'klasa1': 'klasa2'}}"

lub

[ngClass] = "stan? 'klasa1': 'klasa2'"

Możesz użyć php, jeśli napiszesz css w tagu

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