CSS Equivalente dell'istruzione "if"

Question

Esiste un modo per utilizzare le istruzioni condizionali nei CSS?

Answer 1

No. Ma puoi dare un esempio di ciò che hai in mente? Che cosa condizione vuoi controllare?

Forse Sass o Compass sono interessanti per voi.

Citazione di Sass:

Sass rende nuovo divertente CSS. Sass è CSS, oltre a regole nidificate, variabili, mixin e altro, il tutto in una sintassi concisa e leggibile.

Answer 2

Le uniche condizioni disponibili nei CSS sono selectors e @media. Alcuni browser supportano alcuni degli CSS 3 selectors e media queries.

È possibile modificare un elemento con JavaScript da modificare se corrisponde a un selettore o meno (ad esempio aggiungendo una nuova classe).

Answer 3

I file css non supportano le istruzioni condizionali.

Se si desidera che qualcosa appaia in due modi, a seconda delle condizioni, assegnargli una classe appropriata utilizzando il linguaggio di scripting lato server o javascript. ad esempio

<div class="oh-yes"></div> 
<div class="hell-no"></div> 

Answer 4

Il tuo foglio di stile deve essere pensato come una tabella statica di variabili disponibili che il documento HTML possono telefonare in base a ciò che è necessario visualizzare. La logica dovrebbe essere nel tuo javascript e html, usare javascript per applicare in modo dinamico gli attributi in base alle condizioni se davvero ne hai bisogno. I fogli di stile non sono il posto per la logica.

Answer 5

No, non si può fare se in CSS, ma si può scegliere quale foglio di stile si usa

Ecco un esempio:

<!--[if IE 6]> 
Special instructions for IE 6 here 
<![endif]--> 

userà solo per IE 6 Ecco il sito dove è da http://www.quirksmode.org/css/condcom.html, solo IE ha commenti condizionali. Altro browser non lo fa, anche se ci sono alcune proprietà che puoi usare per Firefox che inizia con -moz o per safari che inizia con -webkit. Puoi utilizzare javascript per rilevare il browser che stai utilizzando e utilizzare javascript se per le azioni che desideri eseguire, ma questa è una cattiva idea, poiché può essere disattivata.

Answer 6

Non è disponibile alcun IF/ELSE nativo per CSS. I preprocessori CSS come SASS (e Compass) possono essere d'aiuto, ma se stai cercando altre condizioni specifiche per le funzionalità/dovresti dare una prova a Modernizr. Fa il rilevamento delle caratteristiche e quindi aggiunge le classi all'elemento HTML per indicare quale CSS3 & HTML5 supporta il browser e non supporta.È quindi possibile scrivere molto if/else-come CSS direttamente nel tuo CSS senza alcun pre-elaborazione, in questo modo:

.geolocation #someElem { 
    /* only apply this if the browser supports Geolocation */ 
} 
.no-geolocation #someElem { 
    /* only apply this if the browser DOES NOT support Geolocation */ 
} 

Tenete a mente che si deve sempre migliorare progressivamente, in modo piuttosto che l'esempio di cui sopra (che illustra il punto migliore), si dovrebbe scrivere qualcosa di più simile a questo:

#someElem { 
    /* default styles, suitable for both Geolocation support and lack thereof */ 
} 
.geolocation #someElem { 
    /* only properties as needed to overwrite the default styling */ 
} 

Nota che Modernizr non si basano su JavaScript, quindi se JS è disabilitato non si otterrebbe nulla. Da qui l'approccio progressivo di miglioramento di #someElem, come no-js foundation.

Answer 7

Direi che la cosa più vicina a "IF" nei CSS sono le query multimediali, come quelle che è possibile utilizzare per la progettazione reattiva. Con le query sui media, stai dicendo cose come "Se lo schermo è tra 440px e 660px di larghezza, fai questo". Per saperne di più media query qui: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, ed ecco un esempio di come si guardano:

@media screen and (max-width: 300px) { 
body { 
    background-color: lightblue; 
} 

che è praticamente l'estensione di "IF" all'interno di CSS, se non per passare al SASS/SCSS (come detto sopra) .

Penso che la soluzione migliore sia modificare le classi/ID all'interno del linguaggio di scripting e quindi trattare ciascuna delle opzioni di classe/ID nel CSS. Per esempio, in PHP, potrebbe essere qualcosa di simile:

<?php 
    IF(A>B){ 
echo '<div class="option-a">'; 
} 
    ELSE { 
echo '<div class="option-b">'; 
} 
?> 

Poi il CSS può essere come

.option a { 
background-color:red; 
} 
.option b { 
background-color:blue; 
} 

Answer 8

direi che è possibile utilizzare se le dichiarazioni in CSS. Sebbene non siano formulate come tali. Nell'esempio seguente, ho detto che se la casella è selezionata, voglio che lo sfondo sia bianco. Se vuoi vedere un esempio funzionante, controlla www.armstrongdes.com. L'ho costruito per un cliente. Ridimensiona la finestra in modo che la navigazione mobile riprenda e fai clic sul pulsante di navigazione. Tutto il CSS. Penso che sia sicuro dire che questo concetto potrebbe essere usato per molte cose.

 #sidebartoggler:checked + .page-wrap .hamb { 
     background: #fff; 
     } 

// example set as if statement sudo code. 

if (sidebaretoggler is checked == true) { 
set the background color of .hamb to white; 
} 

Answer 9

Il @supports regola (il supporto del browser 92% luglio 2017) regola può essere utilizzato per la logica condizionale sulle proprietà CSS:

@supports (display: -webkit-box) { 
    .for_older_webkit_browser { display: -webkit-box } 
} 

@supports not (display: -webkit-box) { 
    .newer_browsers { display: flex } 
} 

Answer 10

CSS per sé non ha istruzioni condizionali, ma ecco a hack involving custom properties (aka "variabili CSS").

In questo semplice esempio, si desidera applicare una spaziatura basata su una determinata condizione, ad esempio un'istruzione "se".

:root { --is-big: 0; } 

.is-big { --is-big: 1; } 

.block { 
    padding: calc(
    4rem * var(--is-big) + 
    1rem * (1 - var(--is-big)) 
); 
} 

Quindi, qualsiasi .block che è un .is-big o che è un discendente di uno avrà un'imbottitura di 4rem, mentre tutti gli altri blocchi avranno solo 1rem. Ora lo chiamo un esempio "banale" perché può essere fatto senza l'hack.

.block { 
    padding: 1rem; 
} 

.is-big .block, 
.block.is-big { 
    padding: 4rem; 
} 

Ma lascerò le sue applicazioni alla vostra immaginazione.