Comment pouvez-vous simuler la logique conditionnelle dans votre CSS ?

Pouvez-vous utiliser la logique conditionnelle en CSS ?

Les conditions If-else ne sont pas prises en charge nativement en CSS. Cependant, il existe plusieurs méthodes pour obtenir des fonctionnalités similaires.

Classes CSS :

Si vous contrôlez le HTML, vous pouvez utiliser des classes CSS pour appliquer différents styles en fonction sur une variable. Par exemple :

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

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

Préprocesseurs CSS (par exemple, Sass) :

Les préprocesseurs CSS permettent l'utilisation de structures de contrôle, y compris les conditions. Par exemple, dans Sass :

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

Propriétés personnalisées CSS :

Les propriétés personnalisées peuvent être évaluées au moment de l'exécution dans les navigateurs pris en charge. Vous pouvez les utiliser pour définir des styles en fonction de conditions :

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

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

.two {
  background-color: black;
}

Prétraitement côté serveur :

Vous pouvez également prétraiter votre feuille de style avec un langage côté serveur. Par exemple, en PHP :

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

Autres techniques :

Pour des scénarios plus complexes, vous pouvez explorer les astuces et techniques CSS mentionnées dans des articles tels que "Si/ Sinon en CSS" par Ahmad Shadeed.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!