Comment puis-je implémenter un style conditionnel en CSS sans utiliser d'instructions if/else ?

<p>

<p>Style conditionnel en CSS : au-delà de if/else

<p>En CSS, les instructions if/else traditionnelles peuvent sembler séduisantes pour le style conditionnel. Cependant, cela n’est pas pris en charge nativement. Envisagez plutôt des approches alternatives :

<p>Style basé sur les classes :

<p>Attribuez des classes aux éléments HTML et définissez des règles de style en conséquence. Par exemple :

<p>

<p>Dans votre CSS :

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

<p>Préprocesseurs CSS :

<p>Utilisez des préprocesseurs comme Sass pour introduire des instructions conditionnelles :

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

<p>Notez que les préprocesseurs nécessitent un prétraitement et que les conditions sont évaluées au moment de la compilation.

<p>Propriétés personnalisées :

<p>Exploitez les propriétés CSS personnalisées (variables CSS ) pour l'évaluation au moment de l'exécution :

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

<p>Prétraitement côté serveur :

<p>Prétraitez votre feuille de style à l'aide d'un langage côté serveur tel que PHP :

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

<p>Autres techniques :

<p>Référez-vous à l'article d'Ahmad Shadeed pour connaître les techniques CSS avancées permettant d'aborder le style conditionnel sans if/else.

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!