Le funzioni CSS

Come sappiamo tutti, il CSS NON è un linguaggio di programmazione. Il suo scopo infatti non è quello di controllare il comportamento di una macchina, bensì quello di definire lo stile grafico delle pagine HTML.

Se vogliamo aggiungere alcune caratteristiche proprie dei linguaggi di programmazione, dobbiamo avvalerci di SASS o LESS, dei preprocessori CSS il cui compito è quello di aggiungere alcune features utili a velocizzare la scrittura CSS. Se volete approfondire questo argomento vi lascio il link all’articolo dedicato.

In queste righe voglio concentrare l’attenzione sulle funzioni CSS. Nonostante il CSS non sia un linguaggio di programmazione ha sempre messo a disposizione degli utenti una serie di funzioni pronte all’uso da poter utilizzare come valori delle nostre proprietà o in qualche caso anche nei selettori.

Cos’è una funzione

Per chi non è avvezzo a questo termine, è doveroso spendere qualche riga per spiegarle meglio. Le funzioni sono un costrutto sintattico che raggruppa una sequenza d’istruzioni in un unico blocco. Queste funzioni possono essere eseguite richiamandone il nome, seguito da delle parentesi tonde. All’interno di queste possono esserci uno o più parametri (opzioni) che saranno passate alla funzione stessa.

In CSS il più conosciuto esempio di funzione è url(); che serve a richiamare un file esterno e che viene usato come valore nella proprietà “background-image”. Dentro alle parentesi tonde inseriamo l’indirizzo del file da richiamare. Ecco, quello è un parametro della funzione.

background-image: url(‘../img/cane.jpg’);

Se ho più parametri, questi vengono separati dalla virgola. Questo ad esempio avviene con la funzione CSS rgba(); utilizzata per richiamare un colore con uno preciso grado di trasparenza. L’ordine dei parametri è importante, quindi prima vanno le componenti Red, Green e Blue e come quarto parametro il valore Alpha (la trasparenza):

background-color: rgba(1, 84, 149, 0.5);

A differenze dei linguaggi di programmazione, nel CSS non possiamo creare nuove funzioni, bensì utilizzare quelle messe a disposizione dagli standard CSS e implementate dai diversi browser.

Le funzioni CSS: una vecchia conoscenza

Le funzioni CSS non sono una prerogativa degli ultimi anni ma ci sono sempre state. Come visto poco fa url(); è sicuramente una delle prime funzioni che abbiamo imparato quando ci siamo avvicinati al CSS.

Esistono un sacco di funzioni e molto spesso sono prerogativa di particolari proprietà. Ad esempio abbiamo un set di funzioni apposite per la proprietà filter, transform, clip-path ma anche per le grid CSS e molte altre.

L’obiettivo di questo articolo non è quello di fare una carrellata tra queste funzioni: sicuramente le conoscerete già e trattarle tutte richiederebbe una vera e propria dispensa. Voglio quindi concentrarmi su quelle che non sempre si conoscono e che a mio parere meritano un’attenzione particolare.

Funzione var()

Questa funzione ormai viene usata tantissimo anche dai framework CSS, come Bootstrap, per permettere a tutti gli utenti di personalizzare la struttura (senza quindi ricorrere ai file sorgenti sviluppati in SASS).

In pratica, applica il concetto di “variabili” al CSS. Per chi non le conosce, le variabili sono come delle scatole che contengono un valore e a cui possiamo dare un nome. Creare ad esempio una variabile chiamata “rosso” e contenente un preciso codice esadecimale, ci permette di richiamare sempre lo stesso colore all’interno del nostro CSS. Allo stesso tempo migliora la mantenibilità del codice, perché in qualsiasi momento possiamo cambiare il valore della variabile e questo si ripercuoterà in tutto il foglio CSS. Figo vero?

A livello sintattico, per creare una o più variabili dovete aprire il selettore html e dichiarare il nome della variabile, preceduto da 2 trattini:

html { 
  --rosso: #FF0000; 
}

Una volta dichiarata la variabile, potrete richiamarla come valore di qualsiasi proprietà CSS, utilissando la funzione var(); con all’interno il nome della variabile:

h1 {
  color: var(--rosso);
}

Funzione calc()

Altra funzione molto interessante è la funzione calc(); che permette di eseguire calcoli matematici direttamente sul codice CSS, attraverso gli operatori +, -, * e /.

.col {
  width: calc(100% / 4);
}

A differenza dei preprocessori CSS, come LESS e SASS, qui possiamo mischiare unità di misure differenti (anche assolute e relative), creando soluzioni molto interessanti. Un esempio su tutti è quando vogliamo calcolare la larghezza di un margin “auto” applicato ad un contenitore fisso (ad esempio di 1200px). Per farlo ci basterà scrivere questo:

calc((100vw – 100%) / 2);

Come potete vedere, ho mischiato unità differenti tra loro e soprattutto posso eseguire più calcoli, con l’unica accortezza di utilizzare le parentesi tonde per separarli tra loro.

N.B.: Come avrete notato, bisogna separare gli operatori dai numeri con uno spazio vuoto. Questo è d’obbligo per + e -, mentre diventa solo un consiglio per gli operatori * e /

Funzioni max() e min()

Le funzioni max() e min() come potrete intuire, permette di scegliere rispettivamente il valore massimo e minimo tra quelli passati come parametri (2 o più parametri). Posso inserire come parametri anche valori con unità di misura differenti. Queste funzioni tornano quindi molto utili in ambito responsive, permettendoci ad esempio d’impostare un valore fisso di larghezza di un elemento, a patto che non venga superata la dimensione massima del suo contenitore. Per fare questo ci basterà scrivere:

.box {
  width: min(500px, 100%);
}

Funzione :not()

Le funzioni CSS non si usano solo per i valori delle proprietà, ma possono essere usate anche nei selettori. Questo è il caso della funzione :not(), che ha lo scopo di selezionare un elemento che non sia uguale a ciò che è specificato come parametro. Ad esempio:

p:not(.intro) { … }

Selezionerà tutti i parametri a patto che non abbiano come class “intro”. Il parametro all’interno della funzione può essere un elemento, un ID, una Class o anche una pseudoclasse. Ad esempio, un utilizzo interessante di questa funzione può essere il seguente:

p:not(:last-child) {
  margin-bottom: 16px;
}

In questo caso sto dicendo di applicare un margine sotto ad ogni paragrafo, ad eccezione dell’ultimo di ogni gruppo. Questo evita di avere il classico margine che sommandosi al padding del padre crea lo spazio aggiuntivo a fine contenuto.

Funzione :is()

Rimanendo nell’ambito delle funzioni “selettore”, troviamo un’altra funzione utile a semplificare la scrittura dei selettori. In pratica permette di selezionare qualsiasi elemento che fa parte dei parametri inseriti nella funzione. La sua utilità si ha quando abbiamo più selettori da intecettare con la stessa regola, ad esempio:

.intro > h1, .intro > h2, .intro > h3, .intro > h4, .intro > h5, .intro > h6 { … }

In questo caso, utilizzando la funzione :is(), il tutto si ridurrebbe in:

.intro > :is(h1, h2, h3, h4, h5, h6) { … }

Non una svolta epocale, ma un miglioramento considerevole nella scrittura di codice.

Funzioni sperimentali

Come per ogni linguaggio sono presenti nuove funzionalità che sono dichiarate sperimentali, in quanto non ancora compatibili su tutti i browser e soprattutto non sono state dichiarate standard dal W3C. Di seguito una breve carrelata:

:has()

Funzione interessante, che permette di selezionare un elemento se presenta un altro elemento come figlio, indicato tramite parametro. Potreste ad esempio voler selezionare i tag <a> solamente se hanno al loro interno un’immagine:

a:has(> img) { … }

Ovviamente la compatibilità è praticamente assente attualmente, quindi occorre attendere prima di poterla utilizzare.

:nth-col e :nth-last-col()

Come per :nth-child(); nel prossimo future avremo la possibilità di selezionare una specifica colonna all’interno di un Grid CSS. Soluzione che si rileverà molto interessante a mio avviso.

Funzioni trigonometriche

Sono state aggiunte tutta una serie di funzioni trigonometriche, come sin();, cos(); e tan(); e tante altre. Per molti potranno sembrare funzioni inutili, ma risulteranno molto importanti per produrre animazioni avanzate.

Compatibilità

La compatibilità è sempre importantissima e va ricordata ogni volta che usate funzionalità innovative. Questo ovviamente vale per le funzioni sperimentali viste poco fa, ma vi ricordo di verificare anche le funzioni viste ad inizio articolo. Essere state dichiarate come standard dal W3C non garantisce una retrocompatibilità, quindi a seconda del progetto dovete capire se utilizzare o meno una features. Per farlo, come sempre vi consiglio l’uso del vecchio e caro Can i use (sito che fornisce una compatibilità aggiornata per ogni proprietà e funzionalità CSS).