CSS peut-il implémenter une logique conditionnelle sans instructions if/else ?

Le CSS peut-il incarner une logique conditionnelle ?

Le domaine du CSS, ou feuilles de style en cascade, ne prend pas en charge nativement les conditions if/else, comme indiqué dans les langages de programmation traditionnels. Cependant, cette limitation peut être contournée grâce à diverses approches :

1. Classes CSS :

En tirant parti des classes HTML, vous pouvez créer différentes règles de style pour différents scénarios. Par exemple, le code suivant attribue des positions d'arrière-plan distinctes en fonction de la classe :

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

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

2. Préprocesseurs CSS (par exemple, Sass) :

Les préprocesseurs CSS comme Sass fournissent des instructions conditionnelles qui permettent des conditions plus complexes :

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

3. Propriétés personnalisées CSS (variables) :

Les propriétés personnalisées en CSS se comportent de la même manière que les variables et sont évaluées au moment de l'exécution :

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

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

.two {
  background-color: black;
}

4. Prétraitement côté serveur :

En utilisant un langage côté serveur comme PHP, vous pouvez prétraiter les fichiers CSS en fonction de valeurs dynamiques :

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

5. Techniques CSS pour la logique de l'interface utilisateur :

Ahmad Shadeed présente de nouvelles techniques CSS pour résoudre la logique conditionnelle courante basée sur l'interface utilisateur sans utiliser if/else dans son article :
[CSS If/Else](https : //www.sitepoint.com/css-ifelse/)

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!