CSS: è in arrivo il supporto per if()?

Una delle principali critiche nei confronti di CSS riguarda il fatto che tale linguaggio non supporta la logica. Questo significa, ad esempio, che non è possibile sfruttare dei costrutti condizionali nativi. Chiaramente si ha sempre la possibilità di introdurre delle condizioni, legate ad esempio ai nomi delle classi, ma il loro verificarsi dipende da un linguaggio di terze parti, come HTML.

CSS e condizioni

Si ipotizzi di voler determinare il colore di una linea a seconda della classe CSS associata ad essa. Il codice di stile potrebbe essere quindi il seguente:

.linea-blu {
    color: blue;
}
.linea-nera {
    color: black;
}

Mentre il markup HTML in cui richiamare le classi dovrebbe essere simile a quello proposto di seguito:

<p class="linea-blu">Apu Nahasapeemapetilon</p>
<p class="linea-nera">Apu Nahasapeemapetilon</p>

È quindi presente una logica, i colori delle linee sono differenti a seconda delle classe utilizzata, essa dipende però dai tag HTML, non da una condizione stabilita a priori. Ora le cose potrebbero cambiare, anche se non a breve.

Supporto per if()

Il CSS Working Group ha recentemente formulato una risoluzione dedicata all'introduzione delle condizioni inline nel linguaggio. Non si tratta della prima proposta di questo tipo ma tutto farebbe pensare che l'intenzione di andare oltre ad una semplice ipotesi di lavoro sia realmente presente. Esistono già delle possibili sintassi, naturalmente non confermate, grazie alle quali il costrutto if() dovrebbe supportare anche l'annidamento. Come per esempio:

background-color: if(
	style(--variant: success), var(--color-success-60),
	if(style(--variant: warning), var(--color-warning-60),
		if(style(--variant: danger), var(--color-danger-60),
			if(style(--variant: primary), var(--color-primary))
		),
	)
);

e

background-color: if(
	style(--variant: success), var(--color-success-60),
	style(--variant: warning), var(--color-warning-60),
	style(--variant: danger), var(--color-danger-60),
	style(--variant: primary), var(--color-primary)
);

A questo punto ci si potrebbe chiedere se if() sia destinato a sostituire le style query ma, al contrario, esso dovrebbe essere complementare rispetto a queste ultime. In sostanza tutto quello che potrà essere fatto con le style query dovrà essere fatto con le style query. if(), invece, dovrebbe entrare in gioco ogni volta che non è possibile ottenere lo stesso risultato utilizzandole.

Rimane un'ultima domanda: quando arriverà il supporto nei browser? È sicuramente troppo presto per rispondere, si consideri infatti che, come sottolineato dalla sviluppatrice Lea Verou, l'ipotesi più ottimistica a riguardo è pari ad almeno 2 anni.

🔥 New blog post!

I recently posted about driving the CSS WG resolution to add if() to CSS last week.
But this is still a long way away. What can we do meanwhile?

In this mammoth article, I rounded up the state of the art right now wrt inline conditionals.

One thing is for…

— Lea Verou (@LeaVerou) June 21, 2024