Funzioni

The CSS Podcast - 020: Functions

Finora in questo corso hai visto diverse funzioni CSS. Nel modulo sulla griglia, abbiamo introdotto minmax() e fit-content(), che ti aiutano a impostare le dimensioni degli elementi. Nel modulo color, abbiamo introdotto rgb() e hsl(), che ti aiutano a definire i colori.

Come molti altri linguaggi di programmazione, CSS ha molte funzioni integrate a cui puoi accedere ogni volta che ne hai bisogno.

Ogni funzione CSS ha uno scopo specifico. In questa lezione viene fornita una panoramica generale che ti consentirà di comprendere meglio dove e come utilizzarle.

Che cos'è una funzione?

Una funzione è un frammento di codice autonomo denominato che completa un'attività specifica. Una funzione è denominata in modo da poterla chiamare all'interno del codice e passare i dati al suo interno. Questa operazione è nota come passaggio di argomenti.

Molte funzioni CSS sono funzioni pure, il che significa che se le passi gli stessi argomenti, ti restituiranno sempre lo stesso risultato, indipendentemente da cosa sta succedendo nel resto del codice. Queste funzioni vengono spesso ricalcolate quando i valori cambiano nel CSS, come accade per altri elementi del linguaggio, come i valori con valori in cascata calcolati come currentColor.

In CSS, puoi utilizzare solo le funzioni fornite, invece di scriverne di tue, ma le funzioni possono essere nidificate l'una nell'altra in alcuni contesti, offrendo maggiore flessibilità. Lo esamineremo più dettagliatamente più avanti in questo modulo.

Selettori funzionali

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Hai appreso a conoscere i selettori funzionali nel modulo sulle pseudoclassi, che descrivono funzioni come :is() e :not(). Gli argomenti passati a queste funzioni sono selettori CSS, che vengono poi valutati. Se viene trovata una corrispondenza con gli elementi, viene applicato il resto della regola CSS.

Proprietà personalizzate e var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Una proprietà personalizzata è una variabile che ti consente di tokenizzare i valori nel codice CSS. Anche le proprietà personalizzate sono interessate dalla ricorsione, il che significa che possono essere manipolate o ridefinite in base al contesto. Una proprietà personalizzata deve essere preceduta da due trattini (--) ed è sensibile alle maiuscole.

La funzione var() accetta un argomento obbligatorio: la proprietà personalizzata che stai tentando di restituire come valore.

Nello snippet precedente, la funzione var() ha --base-color passato come argomento. Se --base-color è definito, var() restituirà il valore.

.my-element {
    background: var(--base-color, hotpink);
}

Puoi anche passare un valore di dichiarazione di riserva alla funzione var(). Ciò significa che se non è possibile trovare --base-color, verrà utilizzata la dichiarazione passata, che in questo caso è il colore hotpink.

Funzioni che restituiscono un valore

La funzione var() è solo una delle funzioni CSS che restituiscono un valore. Funzioni come attr() e