custom properties | frontendfacile.it

14 ottobre 2026

CSS alpha(): serve davvero o è solo zucchero sintattico?

In CSS oggi esistono più strategie per derivare versioni semi-trasparenti di un colore definito in una custom property. color-mix() e i colori relativi risolvono già bene il problema, ma alpha() introduce un approccio più diretto e leggibile: prende un colore “così com’è” e gli applica un’opacità, senza costringerti a ragionare su spazi colore o a ricostruire funzioni HSL/RGB. Vediamo perché può valere la pena adottarla (e quando invece no).

5 agosto 2026

Props (for that): la libreria che fa parlare JavaScript e CSS senza incollare tutto a mano

Coordinare JS e CSS di solito significa: listener, state, custom properties aggiornate a mano e (spesso) qualche compromesso di performance. Props (for that) cambia l’approccio: dichiari cosa ti serve su un elemento e ottieni variabili CSS già pronte, aggiornate in modo efficiente e solo quando l’elemento è realmente in gioco. Risultato: interazioni, glow, tilt e reveal su scroll con pochissimo codice e logica molto più pulita.

30 luglio 2026

Animare elementi lungo il bordo con CSS: offset-path: border-box

Con motion path in CSS puoi posizionare un elemento lungo il bordo di un contenitore e animarlo semplicemente variando offset-distance. Usando offset-path: border-box e qualche custom property ottieni effetti “whimsical” (stelline, particelle, indicatori) con pochissimo codice e con un controllo fine su ritardi, distanze e micro-spostamenti.

29 luglio 2026

Lascia che sia CSS a fare il lavoro: meno “numeri magici” in JavaScript, più componenti leggibili

Capita spesso di vedere UI “guidate” da JavaScript che impostano inline style con altezze e dimensioni calcolate a runtime (es. barre meteo, progressi, indicatori). Funziona, ma introduce numeri magici, logica di presentazione sparsa e manutenzione scomoda. Un approccio migliore è passare al CSS solo i dati grezzi (come custom property) e lasciare che sia CSS a trasformarli in dimensioni, percentuali e limiti visivi. In questo articolo vediamo un pattern pratico e riutilizzabile per farlo bene.

17 giugno 2026

CSS Style Queries: theming e “modifier” condizionali senza classi extra

Le CSS style queries permettono di applicare varianti di stile in base a proprietà (tipicamente custom properties) presenti nel contesto. Questo abilita due pattern molto pratici: il theming “dal genitore ai figli” e i modifier condizionali (es. card compatte solo in certe layout). Vediamo come strutturarle in modo pulito e scalabile, con esempi concreti.