Condizioni CSS con la nuova funzione if()

Una Kravets

Data di pubblicazione: 1° luglio 2025

A partire da Chrome 137 puoi provare i condizionali in linea CSS con la funzione if(). if() consente un'interfaccia utente più chiara per gli stili dinamici come le query di stile e le query supporti, con alcune differenze chiave che puoi scoprire in questo post.

La funzione CSS if() funziona utilizzando una serie di coppie condizione-valore, strutturate come segue:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

Puoi fornire un'istruzione else, che viene utilizzata se nessuna delle altre condizioni è soddisfatta:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Al momento, if() funziona con tre diversi tipi di query:

• style(): query sugli stili
• media(): query sui contenuti multimediali
• supports(): supporta le query

Vediamo qualche esempio:

Demo: query sui media in linea

L'utilizzo di if() è un ottimo modo per includere query sui contenuti multimediali in linea negli stili. Ad esempio, puoi verificare la preferenza di tema (chiaro o scuro) di un utente o eseguire query sui media in linea per la larghezza della visualizzazione. L'esempio seguente mostra la query sui media per i dispositivi di puntamento. Le dimensioni predefinite del pulsante sono 30 px su un dispositivo con un cursore preciso, come un mouse, ma per i dispositivi touchscreen, come quelli con un cursore approssimativo, le dimensioni del pulsante devono essere di almeno 44 px per una spaziatura appropriata per il tocco e un accesso più facile.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Il codice precedente restituisce lo stesso risultato della seguente query sui contenuti multimediali:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

L'utilizzo del formato if() ti consente di avere la logica in linea, senza dover inserire la logica di stile in due punti diversi.

Demo: query di assistenza in linea

Un altro modo per utilizzare if() è creare query di assistenza in linea. Ad esempio, per verificare il supporto dei colori a gamma estesa, come OKLCH, puoi utilizzare:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Con questo codice, se il browser supporta lo spazio di colore oklch, l'utente vedrà il colore più vivido e riceverà anche il messaggio "Il tuo browser supporta OKLCH" negli pseudocontenuti ::after.

Per scoprire di più e vedere la differenza tra lo spazio di colore RGB e altri spazi di colore più avanzati, dai un'occhiata al selettore dei colori e alle risorse su oklch.com.

Demo: visualizzazione dello stato dell'interfaccia utente

Puoi utilizzare if() anche per lo stile basato sullo stato. Ad esempio, puoi applicare uno stile alle schede di avanzamento in base allo stato della UI (in attesa o completata). Memorizza lo stato direttamente in un attributo dati o in una proprietà personalizzata, quindi applica gli stili in linea alla proprietà utilizzando if().

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Con style() all'interno di una funzione if(), puoi applicare direttamente lo stile all'elemento scelto come target, senza bisogno di un elemento principale come richiederebbero le query di stile CSS.

Questa demo mostra un caso di base di come puoi utilizzare if() per supportare un nuovo approccio architettonico al CSS. Un vantaggio dell'utilizzo delle proprietà CSS personalizzate rispetto ai CSS è la facilità con cui possono essere aggiornate in CSS. Ad esempio, potrebbero essere aggiornati utilizzando query sui media o pseudo stati come :hover.

Passaggi successivi

L'aggiunta di if() offre una nuova opportunità di architettura per gli sviluppatori CSS. Con l'evoluzione di tecnologie come le query sugli stili, è probabile che le query sull'intervallo saranno possibili all'interno delle funzioni if() e saranno utili anche se combinate con la prossima proposta di funzioni personalizzate (CSS @function).

Per scoprire di più su queste funzionalità, consulta:

• Procedura dettagliata video di 3 minuti della demo 3
• Articolo di Lea Verou