Comment obtenir un style conditionnel en CSS ?

Style conditionnel en CSS : exploration des alternatives

Traditionnellement, les conditions if/else ne sont pas prises en charge nativement en CSS. Cependant, il existe différentes approches pour obtenir un style conditionnel.

Classes CSS

Une méthode consiste à utiliser des classes CSS pour définir différents styles pour différentes conditions. Par exemple, vous pouvez créer deux classes :

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

Cette approche est largement prise en charge et permet une évaluation des conditions à l'exécution.

Préprocesseurs CSS

Les préprocesseurs CSS tels que Sass fournissent des instructions conditionnelles qui vous permettent d'écrire du code comme :

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

Bien que cela offre une plus grande flexibilité, cela nécessite un prétraitement, ce qui peut avoir un impact performances.

Propriétés personnalisées (variables CSS)

Les propriétés personnalisées, prises en charge dans les navigateurs modernes, permettent l'évaluation des conditions au moment de l'exécution. Vous pouvez définir une propriété personnalisée comme :

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

Et puis l'utiliser dans votre CSS :

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

Prétraitement côté serveur

Les préprocesseurs côté serveur peuvent générer CSS conditionnel basé sur des valeurs dynamiques. Par exemple, vous pouvez écrire du code comme :

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

Cependant, cette approche peut avoir des implications sur les performances en raison de la nécessité d'un rendu côté serveur.

Techniques CSS pures

Enfin, l'article d'Ahmad Shadeed présente diverses techniques CSS pures pour traiter des scénarios d'interface utilisateur conditionnelles sans recourir à des mécanismes externes.

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!