Saltar al contenido

hoja de estilo – ¿Puede usar condiciones if / else en CSS?

octubre 19, 2021
apple touch icon@2

No en el sentido tradicional, pero puede usar clases para esto, si tiene acceso al HTML. Considera esto:

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

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

y en su archivo CSS:

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

Eso es CSS manera de hacerlo.


Luego están los preprocesadores CSS como Hablar con descaro a. Puedes usar condicionales allí, que se vería así:

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

Las desventajas son que está obligado a preprocesar sus hojas de estilo y que la condición se evalúa en tiempo de compilación, no en tiempo de ejecución.


Una característica más nueva de CSS propiamente dicha son propiedades personalizadas (también conocidas como variables CSS). Se evalúan en tiempo de ejecución (en los navegadores que los admiten).

Con ellos podrías hacer algo en la línea:

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

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

.two {
  background-color: black;
}

Finalmente, puede preprocesar su hoja de estilo con su idioma del lado del servidor favorito. Si está utilizando PHP, proporcione un style.css.php archivo, que se parece a esto:

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

En este caso, sin embargo, tendrá un impacto en el rendimiento, ya que el almacenamiento en caché de una hoja de estilo de este tipo será difícil.

close