Pas dans le sens traditionnel, 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 la manière CSS de le faire.
Ensuite, il y a les préprocesseurs CSS comme Sass . Vous pouvez utiliser des conditions là-bas, qui ressemblent à 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 obligé 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.
Une nouvelle fonctionnalité de CSS proprement dite est les propriétés personnalisées (alias les variables CSS). Ils sont évalués au moment de l'exécution (dans les navigateurs les prenant en charge).
Avec eux, vous pouvez faire quelque chose dans le sens:
: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, diffusez un style.css.php
fichier 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.