Se puede utilizar if/else condiciones en CSS?

Question

Me gustaría que las condiciones de uso en mi CSS.

La idea es que tengo una variable que puedo reemplazar cuando el sitio para generar el derecho de hoja de estilos.

Yo lo quiero por lo que de acuerdo a esta variable de la hoja de estilo en los cambios!

Se parece a:

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px; 

Se puede hacer esto?¿Cómo hacer esto?

Answer 1

No en el sentido tradicional, pero se puede usar clases para esto, si tiene acceso al código HTML. Considere lo siguiente:

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

Esa es la forma CSS para hacerlo.

---

Luego están los preprocesadores CSS como Sass . Puede usar condicionales allí, which'd aspecto:

$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 usted está obligado a pre-proceso de hojas de estilo, y que la condición se evalúa en tiempo de compilación, no se ejecutan tiempo.

---

Una nueva característica del CSS adecuada son propiedades personalizadas ( aka las variables CSS). Ellos son evaluados en tiempo de ejecución (en los navegadores que los apoyan).

Con ellos se podría hacer algo a lo largo de la línea:

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

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

.two {
  background-color: black;
}

---

Por último, puede preprocesar su hoja de estilo con su lenguaje de servidor favorito. Si está usando PHP, servir un archivo style.css.php, que se ve algo como 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é una hoja de estilo, tales será difícil.

Answer 2

A continuación se muestra mi vieja respuesta que sigue siendo válido, pero tengo un enfoque más obstinado hoy:

Una de las razones por las CSS chupa tanto es exactamente que no tiene la sintaxis condicional. CSS es de por sí totalmente inutilizable en la pila web moderno. Utilice SASS por sólo un poco de tiempo y usted sabrá por qué digo esto. SASS tiene una sintaxis condicional ... y un montón de otras ventajas sobre CSS primitiva también.

---

Respuesta Viejo (siendo válida):

No se puede hacer de CSS en general!

Tiene las condicionales navegador como:

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

Pero nadie le impide el uso de Javascript para alterar el DOM o asignar dinámicamente clases o incluso la concatenación de estilos en su respectivo lenguaje de programación.

A veces mando clases CSS como cadenas a la vista y les echo en el código así (PHP):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

Answer 3

Se puede crear dos hojas de estilo independientes e incluyen uno de ellos basado en el resultado de la comparación

En una de las que puede poner

background-position : 150px 8px;

En el otro

background-position : 4px 8px;

Creo que el único freno que puede realizar en CSS es el reconocimiento del navegador:

condicional-CSS

Answer 4

Configurar el servidor hasta analizar los archivos CSS como PHP y luego definir la variable variable con una declaración simple PHP.

Por supuesto, esto supone que está utilizando PHP ...

Answer 5

Puede usar no en lugar de si como

.Container *:not(a)
{
    color: #fff;
}

Answer 6

Esto es un poco de información adicional a la Boldewyn respuesta anterior.

Agregue un poco de código PHP para hacer el if / else

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}

Answer 7

Se puede utilizar en combinación con calc() var() para ordenar de condicionales imitan:

:root {
--var-eq-two: 0;
}

.var-eq-two {
    --var-eq-two: 1;
}

.block {
    background-position: calc(
        150px * var(--var-eq-two) +
        4px * (1 - var(--var-eq-two))
    ) 8px;
}

concepto

Answer 8

Por lo que yo sé, no hay if / then / else en css. Como alternativa, puede utilizar la función JavaScript para alterar la propiedad background-position de un elemento.

Answer 9

Sin embargo, otra opción (en función de si desea que la sentencia if para ser evaluada de forma dinámica o no) es utilizar el preprocesador de C, tal como se describe aquí .

Answer 10

(Sí, pasado de rosca.Pero fue en la parte superior de Google de búsqueda para que otros pudieran estar interesados así)

Supongo que el if/else-lógica se podría hacer con javascript, que a su vez puede dinámicamente la carga/descarga de las hojas de estilo.Yo no he probado esto a través de navegadores, etc.pero se debe trabajar.Esto le ayudará a empezar:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Answer 11

Puede añadir div contenedor por toda su ámbito de condición.

Añadir el valor de condición como clase para el div contenedor. (Se puede configurar mediante la programación del lado del servidor - php / asp ...)

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

Ahora puede utilizar la clase de contenedor como variable global de todos los elementos en el div utilizando el selector anidado, sin añadir la clase a cada elemento.

.true-value p{
   backgrounf-color:green;
}
.false-value p{
   backgrounf-color:red;
}

Answer 12

CSS es un paradigma muy bien diseñado, y muchas de sus características no se utilizan mucho.

Si por una condición y la variable que se refiere a un mecanismo para distribuir un cambio de algún valor para todo el documento, o en virtud de un alcance de algún elemento, entonces esta es la forma de hacerlo:

var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");

body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}

<body>
<div class="menuItem"></div>
</body>

De esta manera, se distribuye el impacto de la variable a través de los estilos CSS. Esto es similar a lo que @amichai y @SeReGa proponen, pero más versátil.

Otra de tales truco es para distribuir el ID de algún elemento activo en todo el documento, por ejemplo, de nuevo al resaltar un menú: (sintaxis utilizada Freemarker)

var chosenCategory = 15;
document.body.className = "category" + chosenCategory;

<#list categories as cat >
    body.category${cat.id} .menuItem { font-weight: bold; }
</#list>

<body>
<div class="menuItem"></div>
</body>

Por supuesto, esto sólo es práctico con un conjunto limitado de artículos, como categorías o estados, y los conjuntos no ilimitadas como productos de la tienda online, de lo contrario el CSS generado sería demasiado grande. Pero es especialmente conveniente cuando la generación de documentos fuera de línea estática.

Un truco más que ver "condiciones" con CSS en combinación con la plataforma de generación es la siguiente:

.myList {
   /* Default list formatting */
}
.myList.count0 {
   /* Hide the list when there is no item. */
   display: none;
}
.myList.count1 {
   /* Special treatment if there is just 1 item */
   color: gray;
}

<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>

Answer 13

Si usted está abierto a usar jQuery, puede establecer sentencias condicionales usando javascript dentro del html:

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

Esto cambiará el color del texto de .class a verde si el valor de la variable es mayor que 0.

Answer 14

Puede usar javascript para este fin, de esta manera:

1. primero se establece el CSS para la clase 'normal' y para la clase 'activa'
2. a continuación, le da a su elemento de la id 'MyElement'
3. y ahora usted hace su condición en JavaScript, algo así como el ejemplo a continuación ... (se puede ejecutar, cambiar el valor de myVar a 5 y verá cómo funciona)

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}

.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }

<div id="MyElement">
  
  </div>

Answer 15

Usted puede utilizar php si escribir css en la Etiqueta

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style