Você pode usar as condições if / else no CSS?

120

Eu gostaria de usar condições no meu CSS.

A ideia é que eu tenho uma variável que substituo quando o site é executado para gerar a folha de estilo certa.

Eu quero que de acordo com esta variável a folha de estilo mude!

Parece:

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

Isso pode ser feito? Como você faz isso?

Haim Evgi
fonte
O que diabos você está tentando fazer para exigir condicionais CSS?
Sapphire_Brick

Respostas:

138

Não no sentido tradicional, mas você pode usar classes para isso, se tiver acesso ao HTML. Considere isto:

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

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

e em seu arquivo CSS:

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

Essa é a maneira CSS de fazer isso.


Depois, há pré-processadores CSS como o Sass . Você pode usar condicionais lá, que seriam assim:

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

As desvantagens são que você precisa pré-processar suas folhas de estilo e que a condição é avaliada em tempo de compilação, não em tempo de execução.


Um recurso mais recente do CSS adequado são as propriedades personalizadas (também conhecidas como variáveis ​​CSS). Eles são avaliados em tempo de execução (em navegadores que os suportam).

Com eles, você poderia fazer algo ao longo da linha:

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

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

.two {
  background-color: black;
}

Finalmente, você pode pré-processar sua folha de estilo com sua linguagem de servidor favorita. Se estiver usando PHP, forneça um style.css.phparquivo parecido com este:

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

Nesse caso, você terá, no entanto, um impacto no desempenho, já que armazenar em cache essa folha de estilo será difícil.

Boldewyn
fonte
11
Boa resposta, só quero acrescentar um ponto sobre o cache: uma vez que os navegadores armazenam em cache as folhas de estilo e normalmente não as baixam novamente para cada página, é difícil confiar nas folhas de estilo "dinâmicas" geradas por PHP / [linguagem de programação de escolha] . Não é assim que deveria funcionar. Se você precisar alterar o CSS, pode incorporá-lo na página, é claro, mas isso começa a ir contra a separação de conteúdo / apresentação.
deceze
3
Em relação ao que deceze disse, isso não significa que você não pode ter um site que muda dinamicamente. As folhas de estilo podem permanecer estáticas, e você pode alterar as classes dos elementos usando javascript com ou sem jquery ou PHP, de forma que o estilo dos elementos pode ser alterado.
csga5000
e se você quiser estilizar as barras de rolagem? (você não consegue encontrar :: - webkit-scrollbar-button em html)
Jerry
Sim, sim? Que tal? Sass, variáveis ​​CSS e processamento do lado do servidor não dependem do HTML. Ou estou perdendo alguma coisa aqui?
Boldewyn 01 de
15

Abaixo está minha resposta antiga que ainda é válida, mas hoje tenho uma abordagem mais opinativa:

Uma das razões pelas quais o CSS é tão ruim é exatamente que ele não tem sintaxe condicional. CSS é por si só completamente inutilizável na pilha da web moderna. Use o SASS por apenas um tempo e você saberá por que digo isso. O SASS tem sintaxe condicional ... e muitas outras vantagens sobre o CSS primitivo também.


Resposta antiga (ainda válida):

Isso não pode ser feito em CSS em geral!

Você tem as condicionais do navegador como:

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

Mas ninguém impede você de usar Javascript para alterar o DOM ou atribuir classes dinamicamente ou mesmo concatenar estilos em sua respectiva linguagem de programação.

Às vezes, envio classes css como strings para o modo de exibição e as ecoo no código assim (php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>
Markus
fonte
14
Surpreso, ninguém indicou que essa sintaxe condicional não existe no CSS. Comentários condicionais existem apenas em HTML.
BoltClock
12

Você pode usar calc()em combinação com var()para simular condicionais:

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

conceito

yeedle
fonte
8

Você pode criar duas folhas de estilo separadas e incluir uma delas com base no resultado da comparação

Em um dos você pode colocar

background-position : 150px 8px;

No outro

background-position : 4px 8px;

Acho que a única verificação que você pode realizar no CSS é o reconhecimento do navegador:

CSS condicional

RaYell
fonte
8

Estou surpreso que ninguém tenha mencionado as pseudo classes CSS, que também são uma espécie de condicionais em CSS. Você pode fazer algumas coisas bastante avançadas com isso, sem uma única linha de JavaScript.

Algumas pseudo-classes:

  • : ativo - o elemento está sendo clicado?
  • : marcada - O rádio / caixa de seleção / opção está marcada? (Isso permite um estilo condicional por meio do uso de uma caixa de seleção!)
  • : vazio - o elemento está vazio?
  • : tela inteira - O documento está no modo de tela inteira?
  • : focus - O elemento tem foco de teclado?
  • : focus-within - O elemento, ou algum de seus filhos, tem o foco do teclado?
  • : has ([selector]) - O elemento contém um filho que corresponda a [selector]? (Infelizmente, não é compatível com nenhum dos principais navegadores.)
  • : hover - O mouse passa sobre este elemento?
  • : dentro da faixa /: fora da faixa - O valor de entrada está entre / fora dos limites mínimo e máximo?
  • : inválido /: válido - O elemento do formulário possui conteúdos inválidos / válidos?
  • : link - Este é um link não visitado?
  • : not () - Inverte o seletor.
  • : target - Este elemento é o destino do fragmento de URL?
  • : visitado - O usuário já visitou este link antes?

Exemplo:

div { color: white; background: red }
input:checked + div { background: green }
<input type=checkbox>Click me!
<div>Red or green?</div>

Peter
fonte
6

Configure o servidor para analisar arquivos css como PHP e, em seguida, defina a variável variável com uma instrução PHP simples.

Claro, isso assume que você está usando PHP ...

Beggs
fonte
2
Você pode substituir "PHP" por "Sua linguagem de programação ou modelo de escolha"
Quentin
1
O problema é que, se seu CSS tem 50kb e você está alterando apenas alguns valores, não seria melhor ficar estático e armazenado em cache?
alex
2
sim, mas você pode extrair as partes que precisam de dinâmica e incluí-las novamente via @import url('dynamic.css.php').
Boldewyn
Depende de quais são as condições. Se eles forem estáveis ​​por usuário, você pode gerar os cabeçalhos de controle de cache usuais.
Quentin
5

Você pode usar não em vez de se gostar

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

Pelo que eu sei, não há if / then / else no css. Alternativamente, você pode usar a função javascript para alterar a propriedade background-position de um elemento.

hadi teo
fonte
3

Ainda outra opção (com base em se você deseja que a instrução if seja avaliada dinamicamente ou não) é usar o pré-processador C, conforme descrito aqui .

Michiel Buddingh
fonte
3

(Sim, conversa antiga. Mas apareceu no topo de uma pesquisa do Google para que outras pessoas também possam se interessar)

Acho que a lógica if / else poderia ser feita com javascript, que por sua vez pode carregar / descarregar folhas de estilo dinamicamente. Não testei isso em navegadores, etc., mas deve funcionar. Isso o ajudará a começar:

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

Josteinaj
fonte
3

Esta é uma pequena informação extra para a resposta de Boldewyn acima.

Adicione algum código php para fazer o if / else

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

Você pode adicionar contêiner div para todo o seu escopo de condição.

Adicione o valor da condição como uma classe ao div do contêiner. (você pode configurá-lo pela programação do lado do servidor - php / asp ...)

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

Agora você pode usar a classe do contêiner como uma variável global para todos os elementos no div usando um seletor aninhado, sem adicionar a classe a cada elemento.

.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}
Amichai
fonte
2

Você pode usar javascript para essa finalidade, desta forma:

  1. primeiro você define o CSS para a classe 'normal' e para a classe 'ativa'
  2. então você dá ao seu elemento o id 'MyElement'
  3. e agora você faz sua condição em JavaScript, algo como o exemplo abaixo ... (você pode executá-lo, alterar o valor de myVar para 5 e você verá como 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>

SeReGa
fonte
2

CSS é um paradigma bem projetado e muitos de seus recursos não são muito usados.

Se por condição e variável você entende um mecanismo para distribuir uma mudança de algum valor para todo o documento, ou sob o escopo de algum elemento, então faça o seguinte:

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>

Dessa forma, você distribui o impacto da variável entre os estilos CSS. Isso é semelhante ao que propõem @amichai e @SeReGa, mas mais versátil.

Outro truque é distribuir o ID de algum item ativo por todo o documento, por exemplo, novamente ao destacar um menu: (sintaxe do Freemarker usada)

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>

Claro, isso só é prático com um conjunto limitado de itens, como categorias ou estados, e não conjuntos ilimitados como produtos de e-shop, caso contrário, o CSS gerado seria muito grande. Mas é especialmente conveniente ao gerar documentos offline estáticos.

Mais um truque para fazer "condições" com CSS em combinação com a plataforma de geração é este:

.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>

Ondra Žižka
fonte
1

Se você está aberto para usar jquery, pode definir declarações condicionais usando javascript no HTML:

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

Isso mudará a cor do texto de .classpara verde se o valor da variável for maior que 0.

Kyle Lillie
fonte
-1

apenas faça isso em html usando o operador ternário, caso contrário

classe = "{{condição? 'classe1': 'classe2'}}"

ou

[ngClass] = "condição? 'classe1': 'classe2'"

Gaurav Panwar
fonte
-2

Você pode usar php se escrever css na tag

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