Pouvez-vous utiliser des conditions if / else dans CSS?

Je voudrais utiliser des conditions dans mon CSS.

L'idée est que j'ai une variable que je remplace lorsque le site est exécuté pour générer la bonne feuille de style.

Je le veux pour qu'en fonction de cette variable la feuille de style change!

On dirait:

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

Cela peut-il être fait? Comment est-ce que tu fais ça?

Pas dans le sens traditionnel, mais vous pouvez utiliser des classes pour cela, si vous avez accès au HTML. Considère ceci:

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

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

et dans votre fichier CSS:

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

C'est la manière CSS de le faire.

Ensuite, il y a les préprocesseurs CSS comme Sass . Vous pouvez utiliser des conditions là-bas, qui ressemblent à ceci:

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

Les inconvénients sont que vous êtes obligé de prétraiter vos feuilles de style et que la condition est évaluée au moment de la compilation, pas au moment de l'exécution.

Une nouvelle fonctionnalité de CSS proprement dite est les propriétés personnalisées (alias les variables CSS). Ils sont évalués au moment de l'exécution (dans les navigateurs les prenant en charge).

Avec eux, vous pouvez faire quelque chose dans le sens:

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

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

.two {
  background-color: black;
}

Enfin, vous pouvez prétraiter votre feuille de style avec votre langage serveur préféré. Si vous utilisez PHP, diffusez un style.css.phpfichier qui ressemble à ceci:

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

Dans ce cas, vous aurez cependant un impact sur les performances, car la mise en cache d'une telle feuille de style sera difficile.

Voici mon ancienne réponse qui est toujours valable mais j'ai une approche plus opiniâtre aujourd'hui:

L'une des raisons pour lesquelles le CSS est si nul est précisément qu'il n'a pas de syntaxe conditionnelle. CSS est en soi totalement inutilisable dans la pile Web moderne. Utilisez SASS pendant un petit moment et vous saurez pourquoi je dis cela. SASS a une syntaxe conditionnelle ... et BEAUCOUP d'autres avantages par rapport au CSS primitif.

Ancienne réponse (toujours valide):

Cela ne peut pas être fait en CSS en général!

Vous avez les conditions du navigateur comme:

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

Mais personne ne vous empêche d'utiliser Javascript pour modifier le DOM ou attribuer des classes dynamiquement ou même concaténer des styles dans votre langage de programmation respectif.

J'envoie parfois des classes css sous forme de chaînes à la vue et les renvoie dans le code comme ça (php):

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

Vous pouvez utiliser calc()en combinaison avec var()pour trier des conditionnelles mimiques:

: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

Vous pouvez créer deux feuilles de style distinctes et en inclure une en fonction du résultat de la comparaison

Dans l'un des vous pouvez mettre

background-position : 150px 8px;

Dans l'autre

background-position : 4px 8px;

Je pense que le seul contrôle que vous pouvez effectuer en CSS est la reconnaissance du navigateur:

Conditionnel-CSS

Je suis surpris que personne n'ait mentionné les pseudo-classes CSS, qui sont également une sorte de conditionnelles en CSS. Vous pouvez faire des choses assez avancées avec cela, sans une seule ligne de JavaScript.

Quelques pseudo-classes:

• : active - Un clic est-il effectué sur l'élément?
• : coché - La radio / case / option est-elle cochée? (Cela permet un style conditionnel grâce à l'utilisation d'une case à cocher!)
• : vide - L'élément est-il vide?
• : plein écran - Le document est-il en mode plein écran?
• : focus - L'élément a-t-il le focus clavier?
• : focus-within - L'élément, ou l'un de ses enfants, a-t-il le focus clavier?
• : has ([selector]) - L'élément contient-il un enfant qui correspond à [selector]? (Malheureusement, non pris en charge par les principaux navigateurs.)
• : hover - La souris survole-t-elle cet élément?
• : in-range /: out-of-range - La valeur d'entrée est-elle comprise entre / hors limites min et max?
• : invalid /: valid - L'élément de formulaire a-t-il un contenu invalide / valide?
• : lien - Est-ce un lien non visité?
• : not () - Inverse le sélecteur.
• : target - Cet élément est-il la cible du fragment d'URL?
• : visité - L'utilisateur a-t-il déjà visité ce lien?

Exemple:

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

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

Configurez le serveur pour analyser les fichiers css en PHP, puis définissez la variable variable avec une simple instruction PHP.

Bien sûr, cela suppose que vous utilisez PHP ...

Vous pouvez utiliser not au lieu de if like

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

Autant que je sache, il n'y a pas de if / then / else en css. Vous pouvez également utiliser la fonction javascript pour modifier la propriété background-position d'un élément.

Une autre option (selon que vous voulez que l'instruction if soit évaluée dynamiquement ou non) consiste à utiliser le préprocesseur C, comme décrit ici .

(Oui, ancien fil de discussion. Mais il est apparu en plus d'une recherche Google, donc d'autres pourraient aussi être intéressés)

Je suppose que la logique if / else pourrait être effectuée avec javascript, qui à son tour peut charger / décharger dynamiquement les feuilles de style. Je n'ai pas testé cela sur les navigateurs, etc. mais cela devrait fonctionner. Cela vous permettra de démarrer:

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

Ceci est une petite information supplémentaire à la réponse de Boldewyn ci-dessus.

Ajoutez du code php pour faire le if / else

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

Vous pouvez ajouter un conteneur div pour toute la portée de votre condition.

Ajoutez la valeur de la condition en tant que classe au div de conteneur. (vous pouvez le définir par programmation côté serveur - php / asp ...)

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

Vous pouvez désormais utiliser la classe conteneur comme variable globale pour tous les éléments du div à l'aide d'un sélecteur imbriqué, sans ajouter la classe à chaque élément.

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

Vous pouvez utiliser javascript à cette fin, de cette façon:

1. vous définissez d'abord le CSS pour la classe 'normale' et pour la classe 'active'
2. puis vous donnez à votre élément l' identifiant 'MyElement'
3. et maintenant vous faites votre condition en JavaScript, quelque chose comme l'exemple ci-dessous ... (vous pouvez l'exécuter, changer la valeur de myVar en 5 et vous verrez comment cela fonctionne)

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 est un paradigme bien conçu, et nombre de ses fonctionnalités ne sont pas très utilisées.

Si par une condition et une variable vous entendez un mécanisme pour distribuer un changement d'une certaine valeur à l'ensemble du document, ou sous une portée d'un élément, alors voici comment le faire:

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>

De cette façon, vous répartissez l'impact de la variable dans les styles CSS. C'est similaire à ce que proposent @amichai et @SeReGa, mais plus polyvalent.

Une autre astuce consiste à distribuer l'ID d'un élément actif dans tout le document, par exemple lors de la mise en évidence d'un menu: (syntaxe Freemarker utilisée)

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>

Bien sûr, cela n'est pratique qu'avec un ensemble limité d'articles, comme des catégories ou des états, et non des ensembles illimités comme des produits de boutique en ligne, sinon le CSS généré serait trop gros. Mais c'est particulièrement pratique lors de la génération de documents statiques hors ligne.

Une autre astuce pour faire des "conditions" avec CSS en combinaison avec la plate-forme génératrice est la suivante:

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

Si vous êtes prêt à utiliser jquery, vous pouvez définir des instructions conditionnelles en utilisant javascript dans le html:

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

Cela changera la couleur du texte de .classen vert si la valeur de Variable est supérieure à 0.

faites-le simplement en html en utilisant un opérateur ternaire pas sinon

class = "{{condition? 'class1': 'class2'}}"

ou

[ngClass] = "condition? 'classe1': 'classe2'"

Vous pouvez utiliser php si vous écrivez css dans le tag

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