custom properties | frontendfacile.it

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.