web-dev-qa-db-fra.com

Pouvez-vous utiliser les conditions if/else en 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 que, selon cette variable, la feuille de style change!

Ça ressemble à:

[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?

cssstylesheetcondition
93
Haim Evgi

Pas au sens traditionnel du terme, 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 le moyen CSS de le faire.

Ensuite, il y a des pré-processeurs CSS comme Sass . Vous pouvez utiliser conditionals there, qui ressemblerait à 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 tenu 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.

Les nouvelles fonctionnalités de CSS proprement dites sont custom properties (variables a.k.a. CSS). Ils sont évalués au moment de l'exécution (dans les navigateurs les prenant en charge).

Avec eux, vous pourriez faire quelque chose le long de la ligne:

: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, servez un fichier style.css.php, 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.

111
Boldewyn

Ci-dessous mon ancienne réponse qui est toujours valable, mais j’ai une approche plus éclairée aujourd’hui:

Une des raisons pour lesquelles CSS craint tellement, c'est justement qu'il n'a pas de syntaxe conditionnelle. CSS est en soi complètement inutilisable dans la pile Web moderne. Utilisez SASS pendant un petit moment et vous saurez pourquoi je le dis. SASS a une syntaxe conditionnelle ... et BEAUCOUP d'autres avantages par rapport aux CSS primitives.

Ancienne réponse (toujours valable):

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, ni assigner des classes de manière dynamique, ni 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 répercute dans le code comme ceci (php):

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

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 tu peux mettre

background-position : 150px 8px;

Dans l'autre

background-position : 4px 8px;

Je pense que la seule vérification que vous pouvez effectuer en CSS est la reconnaissance du navigateur:

CSS conditionnel

8
RaYell

Configurez le serveur pour qu'il analyse les fichiers css comme PHP, puis définissez la variable avec une simple instruction PHP.

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

6
beggs

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

Ajouter 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";
}
4
Johan

Vous pouvez utiliser pas au lieu de si comme 

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

(Oui, mon ancien fil de discussion. Mais il apparaissait au-dessus d'une recherche Google afin que d'autres puissent être intéressés également)

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

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

3
josteinaj

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

3
Michiel Buddingh

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

Ajoutez la valeur de la condition en tant que classe au conteneur div. (vous pouvez le configurer 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 maintenant utiliser la classe de conteneur comme variable globale pour tous les éléments de la div à l'aide d'un sélecteur imbriqué, sans ajouter la classe à chaque élément.

.true-value p{
   backgrounf-color:green;
}
.false-value p{
   backgrounf-color:red;
}
3
amichai

Pour autant que je sache, il n'y a pas de if/then/else en CSS. Alternativement, vous pouvez utiliser la fonction javascript pour modifier la propriété background-position d'un élément.

3
hadi teo

Vous pouvez utiliser calc() en combinaison avec var() pour trier les conditions:

: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

2
yeedle

CSS est un paradigme bien conçu, et beaucoup de ses fonctionnalités ne sont pas très utilisées.

Si par une condition et une variable, vous entendez un mécanisme permettant de distribuer une modification d'une valeur quelconque à l'ensemble du document, ou sous la portée d'un élément, alors voici comment procéder:

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 . Ceci est similaire à ce que @amichai et @SeReGa proposent, mais plus polyvalent.

Une autre astuce consiste à distribuer l’ID d’un élément actif dans l’ensemble du document, par exemple. à nouveau lors de la mise en surbrillance 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 que pour un ensemble limité d’articles, comme les catégories ou les états, et non d’ensembles illimités comme les produits de e-shop, sinon le CSS généré serait trop volumineux. Mais cela 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 plateforme 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>

1
Ondra Žižka

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

  1. d'abord, vous définissez le CSS pour la classe 'normale' et pour la classe 'active'
  2. alors vous donnez à votre élément le id 'MyElement'
  3. et maintenant vous créez votre condition en JavaScript, comme dans l'exemple ci-dessous ... (vous pouvez l'exécuter, changer la valeur de myVar en 5 et vous verrez comment ça marche)

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>

1
SeReGa

Si vous êtes prêt à utiliser jquery, vous pouvez définir des instructions conditionnelles à l'aide de javascript dans le code HTML:

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

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

1
Kyle Lillie

Vous pouvez utiliser php si vous écrivez css dans la balise

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