Kun je if/else-voorwaarden gebruiken in CSS?

Ik wil graag voorwaarden gebruiken in mijn CSS.

Het idee is dat ik een variabele heb die ik vervang wanneer de site wordt uitgevoerd om de juiste style-sheet te genereren.

Ik wil dat volgens deze variabele de stylesheet verandert!

Het ziet eruit als:

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

Kan dit worden gedaan? Hoe doe je dit?


Antwoord 1, autoriteit 100%

Niet in de traditionele zin, maar je kunt hiervoor klassen gebruiken, als je toegang hebt tot de HTML. Overweeg dit:

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

en in uw CSS-bestand:

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

Dat is de CSS-manier om het te doen.


Dan zijn er CSS-preprocessors zoals Sass. U kunt daar voorwaardengebruiken, die er als volgt uitzien:

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

Nadelen zijn dat u uw stylesheets vooraf moet verwerken en dat de voorwaarde wordt geëvalueerd tijdens het compileren, niet tijdens de runtime.


Een nieuwere functie van CSS zelf zijn aangepaste eigenschappen( oftewel CSS-variabelen). Ze worden tijdens runtime geëvalueerd (in browsers die ze ondersteunen).

Met hen zou je iets langs de lijn kunnen doen:

:root {
  --main-bg-color: brown;
}
.one {
  background-color: var(--main-bg-color);
}
.two {
  background-color: black;
}

Ten slotte kunt u uw stylesheet voorbewerken met uw favoriete servertaal. Als je PHP gebruikt, dien dan een style.css.phpbestand in, dat er ongeveer zo uitziet:

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

In dit geval heeft u echter een prestatie-impact, aangezien het moeilijk zal zijn om zo’n stylesheet in de cache te plaatsen.


Antwoord 2, autoriteit 11%

Het verbaast me dat niemand CSS-pseudoklassen heeft genoemd, die ook een soort voorwaardelijke in CSS zijn. Je kunt hiermee behoorlijk geavanceerde dingen doen, zonder een enkele regel JavaScript.

Enkele pseudo-klassen:

  • :active – Wordt er op het element geklikt?
  • :checked – Is de radio/checkbox/optie aangevinkt? (Dit maakt voorwaardelijke styling mogelijk door het gebruik van een selectievakje!)
  • :empty – Is het element leeg?
  • :fullscreen – Staat het document in de modus voor volledig scherm?
  • :focus – Heeft het element toetsenbordfocus?
  • :focus-within – Heeft het element, of een van de onderliggende elementen, toetsenbordfocus?
  • :has([selector]) – Bevat het element een kind dat overeenkomt met [selector]? (Helaas, niet ondersteund door een van de belangrijkste browsers.)
  • :hover – Beweegt de muis over dit element?
  • :in-range/:out-of-range – Ligt de invoerwaarde tussen/buiten de min en max limieten?
  • :invalid/:valid – Heeft het formulierelement ongeldige/geldige inhoud?
  • :link – Is dit een niet-bezochte link?
  • :not() – Keer de selector om.
  • :target – Is dit element het doel van het URL-fragment?
  • :visited – Heeft de gebruiker deze link eerder bezocht?

Voorbeeld:

div { color: white; background: red }
input:checked + div { background: green }
<input type=checkbox>Click me!
<div>Red or green?</div>

Antwoord 3, autoriteit 9%

Hieronder staat mijn oude antwoord dat nog steeds geldig is, maar ik heb vandaag een meer eigenzinnige benadering:

Een van de redenen waarom CSS zo slecht is, is dat het geen voorwaardelijke syntaxis heeft. CSS is op zich volledig onbruikbaar in de moderne webstack. Gebruik SASS maar een tijdje en je weet waarom ik dat zeg. SASS heeft voorwaardelijke syntaxis… en ook VEEL andere voordelen ten opzichte van primitieve CSS.


Oud antwoord (nog geldig):

Het kan in het algemeen niet in CSS!

Je hebt de browservoorwaarden zoals:

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

Maar niemand weerhoudt u ervan Javascript te gebruiken om de DOM te wijzigen of om klassen dynamisch toe te wijzen of zelfs om stijlen in uw respectieve programmeertaal aan elkaar te koppelen.

Ik stuur soms CSS-klassen als strings naar de view en echo ze zo in de code (php):

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

Antwoord 4, autoriteit 9%

Je kunt calc()in combinatie met var()gebruiken om conditionals na te bootsen:

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

concept


Antwoord 5, autoriteit 5%

Je zou twee aparte stylesheets kunnen maken en er één van kunnen toevoegen op basis van het vergelijkingsresultaat

In een van de kun je zetten

background-position : 150px 8px;

In de andere

background-position : 4px 8px;

Ik denk dat de enige controle die u in CSS kunt uitvoeren, browserherkenning is:

Voorwaardelijk-CSS


Antwoord 6, autoriteit 3%

Stel de server in om css-bestanden te parseren als PHP en definieer vervolgens de variabele variabele met een eenvoudige PHP-instructie.

Natuurlijk veronderstelt dit dat je PHP gebruikt…


Antwoord 7, autoriteit 3%

Je kunt not gebruiken in plaats van if like

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

Antwoord 8, autoriteit 3%

CSS is een mooi ontworpen paradigma en veel van zijn functies worden niet veel gebruikt.

Als je met een voorwaarde en variabele een mechanisme bedoelt om een verandering van een bepaalde waarde naar het hele document te distribueren, of onder een bereik van een bepaald element, dan is dit hoe je het doet:

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>

Antwoord 9, autoriteit 2%

Dit is een beetje extra informatie voor het bovenstaande Boldewyn-antwoord.

Voeg wat php-code toe om de if/else te doen

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

Antwoord 10

Voor zover ik weet, is er geen if/then/else in css. Als alternatief kunt u de javascript-functie gebruiken om de eigenschap background-position van een element te wijzigen.


Antwoord 11

Nog een andere optie (afhankelijk van of je wilt dat de if-statement dynamisch wordt geëvalueerd of niet) is om de C-preprocessor te gebruiken, zoals beschreven hier.


Antwoord 12

U kunt voor dit doel op deze manier javascript gebruiken:

  1. eerst stel je de CSS in voor de ‘normale’ klasse en voor de ‘actieve’ klasse
  2. vervolgens geef je je element de id‘MyElement’
  3. en nu maak je je voorwaarde in JavaScript, zoiets als het onderstaande voorbeeld… (je kunt het uitvoeren, verander de waarde van myVar in 5 en je zult zien hoe het werkt)
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>

Antwoord 13

U kunt container-div toevoegen voor al uw conditiebereik.

Voeg de voorwaardewaarde als een klasse toe aan de container-div. (u kunt het instellen door programmering aan de serverzijde – php/asp…)

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

Je kunt nu de containerklasse gebruiken als een globale variabele voor alle elementen in de div met behulp van een geneste selector, zonder de klasse aan elk element toe te voegen.

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

Antwoord 14

(Ja, oud draadje. Maar het kwam boven aan een Google-zoekopdracht, zodat anderen misschien ook geïnteresseerd zijn)

Ik denk dat de if/else-logica gedaan kan worden met javascript, dat op zijn beurt stylesheets dynamisch kan laden/verwijderen. Ik heb dit niet in verschillende browsers enz. getest, maar het zou moeten werken. Hiermee kunt u aan de slag:

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


Antwoord 15

CSS heeft een functie: Voorwaardelijke regels. Deze functie van CSS wordt toegepast op basis van een specifieke voorwaarde. Voorwaardelijke regelszijn:

  • @supports
  • @media
  • @document

Syntaxis:

@supports ("condition") {
   /* your css style */
}

Voorbeeld codefragment:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Supports Rule</title> 
    <style>      
        @supports (display: block) { 
            section h1 { 
                background-color: pink; 
                color: white; 
            } 
            section h2 { 
                background-color: pink; 
                color: black; 
            } 
        } 
    </style> 
</head> 
<body> 
    <section> 
        <h1>Stackoverflow</h1> 
        <h2>Stackoverflow</h2> 
    </section> 
</body> 
</html> 

Antwoord 16

Als u openstaat voor het gebruik van jQuery, kunt u voorwaardelijke instructies instellen met javascript in de html:

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

Hierdoor verandert de tekstkleur van .classin groen als de waarde van Variabele groter is dan 0.


Antwoord 17

Je kunt php gebruiken als je css in de tag schrijft

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

Other episodes