CSS'de if / else koşullarını kullanabilir misiniz?

CSS'mdeki koşulları kullanmak istiyorum.

Buradaki fikir, site çalıştırıldığında doğru stil sayfasını oluşturmak için değiştirdiğim bir değişkenim olmasıdır.

Bunu, bu değişkene göre stil sayfasının değişmesini istiyorum!

Şöyle görünüyor:

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

Bu yapılabilir mi? Bunu nasıl yapıyorsun?

Geleneksel anlamda değil, ancak HTML erişiminiz varsa bunun için sınıfları kullanabilirsiniz. Bunu düşün:

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

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

ve CSS dosyanızda:

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

Bunu yapmanın CSS yolu budur .

Sonra Sass gibi CSS ön işlemcileri var . Orada aşağıdaki gibi görünen koşul ifadelerini kullanabilirsiniz :

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

Dezavantajları, stil sayfalarınızı önceden işlemek zorunda olmanız ve koşulun çalışma zamanında değil derleme zamanında değerlendirilmesidir.

CSS'nin daha yeni bir özelliği, özel özelliklerdir (aka CSS değişkenleri). Çalışma zamanında değerlendirilirler (bunları destekleyen tarayıcılarda).

Onlarla, çizgide bir şeyler yapabilirsiniz:

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

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

.two {
  background-color: black;
}

Son olarak, stil sayfanızı favori sunucu tarafı dilinizle önceden işleyebilirsiniz. PHP kullanıyorsanız style.css.php, şuna benzer bir dosya sunun :

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

Bu durumda, böyle bir stil sayfasını önbelleğe almak zor olacağından, performans üzerinde bir etkiye sahip olacaksınız.

Aşağıda hala geçerli olan eski cevabım var ama bugün daha kararlı bir yaklaşımım var:

CSS'nin bu kadar berbat olmasının nedenlerinden biri, koşullu sözdizimine sahip olmamasıdır. CSS, modern web yığınında kendi başına tamamen kullanılamaz. SASS'yi bir süre kullanın ve neden bunu söylediğimi anlayacaksınız. SASS koşullu sözdizimine sahiptir ... ve ilkel CSS'ye göre birçok başka avantajı da vardır.

Eski cevap (hala geçerli):

Genel olarak CSS'de yapılamaz!

Aşağıdaki gibi tarayıcı koşullarına sahipsiniz:

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

Ancak, DOM'u değiştirmek için Javascript'i kullanmaktan veya sınıfları dinamik olarak atamaktan ve hatta kendi programlama dilinizde stilleri birleştirmekten kimse sizi alıkoyamaz.

Bazen css sınıflarını görünüme dizeler olarak gönderiyorum ve bunları şu şekilde koda ekliyorum (php):

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

Koşulları taklit etmek için calc()ile kombinasyon halinde kullanabilirsiniz var():

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

kavram

İki ayrı stil sayfası oluşturabilir ve karşılaştırma sonucuna göre bunlardan birini dahil edebilirsiniz.

Birine koyabilirsin

background-position : 150px 8px;

Diğerinde

background-position : 4px 8px;

CSS'de yapabileceğiniz tek kontrolün tarayıcı tanıma olduğunu düşünüyorum:

Şartlı-CSS

Hiç kimsenin CSS'de bir tür koşullu olan CSS sözde sınıflarından bahsetmemesine şaşırdım. Bununla, tek bir JavaScript satırı olmadan oldukça gelişmiş şeyler yapabilirsiniz.

Bazı sözde sınıflar:

• : active - Öğe tıklanıyor mu?
• : işaretlendi - Radyo / onay kutusu / seçenek işaretlendi mi? (Bu, bir onay kutusu kullanılarak koşullu şekillendirmeye izin verir!)
• : empty - Öğe boş mu?
• : tam ekran - Belge tam ekran modunda mı?
• : focus - Elemanın klavye odağı var mı?
• : odak içinde - Öğe veya alt öğelerinden biri klavye odağına sahip mi?
• : has ([selector]) - Öğe, [selector] ile eşleşen bir alt öğe içeriyor mu? (Ne yazık ki, büyük tarayıcıların hiçbiri tarafından desteklenmiyor.)
• : hover - Fare bu öğenin üzerine geliyor mu?
• : aralık içi /: aralık dışı - Giriş değeri minimum ve maksimum limitler arasında / dışında mı?
• : geçersiz /: geçerli - Form öğesinin içeriği geçersiz / geçerli mi?
• : link - Bu ziyaret edilmemiş bir bağlantı mı?
• : not () - Seçiciyi ters çevirin.
• : target - Bu öğe, URL parçasının hedefi mi?
• : ziyaret edildi - Kullanıcı bu bağlantıyı daha önce ziyaret etti mi?

Misal:

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

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

Sunucuyu css dosyalarını PHP olarak ayrıştıracak şekilde ayarlayın ve ardından değişken değişkeni basit bir PHP ifadesiyle tanımlayın.

Elbette bu, PHP kullandığınızı varsayar ...

İstersen yerine kullanamazsın

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

Bildiğim kadarıyla css'de if / then / else yok. Alternatif olarak, bir öğenin arka plan konumu özelliğini değiştirmek için javascript işlevini kullanabilirsiniz.

Yine başka bir seçenek (if ifadesinin dinamik olarak değerlendirilmesini isteyip istemediğinize bağlı olarak) burada açıklandığı gibi C ön işlemcisini kullanmaktır .

(Evet, eski ileti dizisi. Ancak bir Google aramasının üstüne çıktı, böylece başkaları da ilgilenebilir)

Sanırım if / else mantığı javascript ile yapılabilir, bu da stil sayfalarını dinamik olarak yükleyebilir / kaldırabilir. Bunu tarayıcılarda vs. test etmedim ama işe yaramalı. Bu, başlamanıza yardımcı olacak:

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

Bu, yukarıdaki Boldewyn cevabına biraz ek bilgi.

If / else yapmak için biraz php kodu ekleyin

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

Tüm koşul kapsamınız için kapsayıcı div ekleyebilirsiniz.

Koşul değerini, kapsayıcı div öğesine bir sınıf olarak ekleyin. (sunucu tarafı programlama ile ayarlayabilirsiniz - php / asp ...)

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

Artık kapsayıcı sınıfını, her öğeye sınıf eklemeden, iç içe yerleştirilmiş bir seçici kullanarak div'deki tüm öğeler için genel bir değişken olarak kullanabilirsiniz.

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

Bu amaçla javascript'i şu şekilde kullanabilirsiniz:

1. önce CSS'yi 'normal' sınıf ve 'etkin' sınıf için ayarlarsınız
2. sonra öğenize 'MyElement' kimliğini verirsiniz
3. ve şimdi durumunuzu JavaScript'te oluşturuyorsunuz, aşağıdaki örnekte olduğu gibi ... (çalıştırabilir, myVar'ın değerini 5 olarak değiştirebilir ve nasıl çalıştığını göreceksiniz)

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 güzel tasarlanmış bir paradigmadır ve özelliklerinin çoğu pek kullanılmaz.

Bir koşul ve değişken derken, bir değer değişikliğini tüm belgeye veya bir öğenin kapsamı altında dağıtmak için bir mekanizmayı kastediyorsanız, bunu şu şekilde yapabilirsiniz:

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>

Bu şekilde, değişkenin etkisini CSS stillerine dağıtırsınız. Bu, @amichai ve @SeReGa'nın önerdiği şeye benzer, ancak daha çok yönlüdür.

Bu tür bir başka numara da, bazı aktif öğelerin kimliğini belge boyunca dağıtmaktır, örneğin yine bir menüyü vurgularken: (Freemarker sözdizimi kullanıldı)

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>

Elbette, bu yalnızca kategoriler veya eyaletler gibi sınırlı sayıda öğe için pratiktir ve e-mağaza ürünleri gibi sınırsız setler için pratik değildir, aksi takdirde oluşturulan CSS çok büyük olacaktır. Ancak, statik çevrimdışı belgeler oluştururken özellikle kullanışlıdır.

Oluşturma platformuyla birlikte CSS ile "koşullar" yapmanın bir başka numarası da şudur:

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

Jquery kullanmaya açıksanız, html içinde javascript kullanarak koşullu ifadeler belirleyebilirsiniz:

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

.classDeğişken'in değeri değerinden büyükse bu , metin rengini yeşile değiştirecektir 0.

bunu yalnızca html'de üçlü operatör kullanarak yapın, aksi takdirde

class = "{{koşul? 'sınıf1': 'sınıf2'}}"

veya

[ngClass] = "koşul? 'sınıf1': 'sınıf2'"

Etikete css yazarsanız php kullanabilirsiniz

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