Condizioni CSS con la nuova funzione if()

Una Kravets

Pubblicato: 1° luglio 2025

A partire da Chrome 137, puoi provare le condizioni in linea CSS con la funzione if(). if() consente un'interfaccia per sviluppatori più pulita 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 di stile
• media(): query supporti
• supports(): Supporta le query

Vediamo alcuni esempi:

Demo: query supporti in linea

L'utilizzo di if() è un ottimo modo per includere query supporti inline negli stili. Ad esempio, puoi controllare la preferenza di tema di un utente (chiaro o scuro) o eseguire query supporti in linea per la larghezza dell'area visibile. L'esempio seguente mostra la query supporti per i dispositivi di puntamento. La dimensione predefinita del pulsante sarebbe di 30 px su un dispositivo con un puntatore preciso, come un mouse, ma per i dispositivi touchscreen, come quelli con un puntatore grossolano, la dimensione del pulsante sarebbe di 44 px, la dimensione minima consigliata per una spaziatura appropriata per un accesso più semplice.

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

Il codice precedente restituisce lo stesso risultato della seguente media query:

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

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

L'utilizzo del formato if() consente di avere la logica incorporata, senza richiedere la logica di stile in due posizioni diverse.

Demo: query di assistenza in linea

Un altro modo per utilizzare if() è creare query di assistenza inline. Ad esempio, per verificare il supporto del colore ad ampia gamma, 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 dei colori oklch, l'utente vedrà il colore più vivido e riceverà anche il messaggio "Il tuo browser supporta OKLCH" nello pseudo-contenuto ::after.

Per saperne di più e vedere la differenza tra RGB e spazi dei colori più avanzati, consulta il selettore colori e le risorse all'indirizzo oklch.com.

Demo: visualizzazione dello stato della UI

Puoi anche utilizzare if() per lo stile basato sullo stato. Ad esempio, lo stile delle schede di avanzamento in base al loro stato dell'interfaccia utente (in attesa o completato). Memorizza lo stato in un attributo dati o in una proprietà personalizzata direttamente, poi 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 di destinazione, 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 ai CSS. Uno dei vantaggi dell'utilizzo delle proprietà personalizzate CSS rispetto alle classi è la facilità di aggiornamento in CSS. Ad esempio, potrebbero essere aggiornati utilizzando query supporti o pseudo stati come :hover.

Passaggi successivi

L'aggiunta di if() offre una nuova opportunità architetturale per gli sviluppatori CSS. Man mano che le tecnologie come le query di stile si evolvono, è probabile che le query di intervallo saranno possibili all'interno delle funzioni if() e saranno utili anche se combinate con la proposta di funzioni personalizzate in arrivo (CSS @function).

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

• Video di 3 minuti sulla procedura dettagliata della demo n. 3
• Articolo di Lea Verou