Funzioni

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

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 url() seguono una struttura simile a var(): puoi passare uno o più argomenti e utilizzarli sul lato destro della dichiarazione CSS.

a::after {
  content: attr(href);
}

La funzione attr() qui preleva i contenuti dell'attributo href dell'elemento <a> e li imposta come content dell'elemento pseudo ::after. Se il valore dell'attributo href dell'elemento <a> dovesse cambiare, questo verrebbe applicato automaticamente a questo attributo content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

La funzione url() accetta un URL stringa e viene utilizzata per caricare immagini, caratteri e contenuti. Se non viene passato un URL valido o se non è possibile trovare la risorsa a cui rimanda l'URL, la funzione url() non restituirà nulla.

Funzioni di colore

Hai imparato tutto sulle funzioni di colore nel modulo color. Se non l'hai ancora fatto, ti consigliamo vivamente di leggerlo.

Alcune funzioni di colore disponibili in CSS sono rgb(), hsl(), lab(), lch(), oklab(), oklch() e color(). Tutti hanno una forma simile in cui vengono passati gli argomenti di configurazione e viene restituito un colore.

Espressioni matematiche

Come molti altri linguaggi di programmazione, Il CSS fornisce funzioni matematiche utili per eseguire vari tipi di calcolo.

Funzioni aritmetiche

calc()

La funzione calc() utilizza come parametro una singola espressione matematica. Questa espressione matematica può essere una combinazione di tipi, come lunghezza, numero, angolo e frequenza. Anche le unità possono essere mescolate.

.my-element {
    width: calc(100% - 2rem);
}

In questo esempio, la funzione calc() viene utilizzata per impostare la larghezza di un elemento come il 100% dell'elemento contenitore principale, quindi rimuovendo 2rem dal valore calcolato.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

La funzione calc() può essere nidificata all'interno di un'altra funzione calc(). Puoi anche passare proprietà personalizzate in una funzione var() come parte di un'espressione.

min() e max()

La funzione min() restituisce il valore calcolato più piccolo di uno o più argomenti passati. La funzione max() fa l'opposto: restituisce il valore più grande di uno o più argomenti passati.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

In questo esempio, la larghezza deve essere il valore più piccolo tra 20vw (ovvero il 20% della larghezza dell'area visibile) e 30rem. L'altezza deve essere il valore maggiore tra 20vh, ovvero il 20% dell'altezza dell'area visibile, e 20rem.

clamp()

La funzione clamp() accetta tre argomenti: le dimensioni minime, le dimensioni ideali e quelle massime.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

In questo esempio, font-size sarà fluido in base alla larghezza dell'area visibile. L'unità vw viene aggiunta a un'unità rem per facilitare lo zoom dello schermo, in quanto, indipendentemente dal livello di zoom, un'unità vw avrà le stesse dimensioni. La moltiplicazione per un'unità rem, in base alle dimensioni del carattere principale, fornisce alla funzione clamp() un punto di calcolo relativo.

Puoi scoprire di più sulle funzioni min(), max() e clamp() in questo articolo dedicato.

Funzioni trigonometriche

Le funzioni trigonometriche ti consentono di trovare qualsiasi punto su un cerchio in base a un angolo, modellare fenomeni ciclici come le onde sonore, descrivere orbite e altro ancora. In CSS, puoi utilizzare le funzioni trigonometriche per impostare proprietà in base alla rotazione, impostare il tempo delle animazioni, ruotare gli elementi in base a un punto e per altri utilizzi.

Per ulteriori informazioni ed esempi, consulta il nostro articolo sulle funzioni trigonometriche.

sin(), cos() e tan()

Le funzioni sin(), cos() e tan() accettano un argomento angolo e restituiscono rispettivamente il seno, il coseno e la tangente. Le funzioni sin() e cos() restanno un numero compreso tra -1 e 1. La funzione tan() restituisce un numero tra -Infinity e +Infinity. L'argomento angolare può essere qualsiasi unità di misura dell'angolo supportata.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

Nell'esempio precedente, --sine-degrees e --sine-radians hanno lo stesso valore (in questo caso 0.7071).

Nell'esempio precedente, le funzioni sin() e cos() vengono utilizzate per creare animazioni oscillanti sugli assi x e y moltiplicando il risultato per il raggio specificato. L'utilizzo di entrambe le funzioni contemporaneamente consente un'animazione in orbita. Utilizziamo una proprietà personalizzata, --angle, per animare senza interruzioni l'angolo per tutte le chiamate di funzione.

asin(), acos() e atan()

asin(), acos() e atan() sono le funzioni inverse di sin(), cos() e tan(), che prendono un numero come argomento e restituiscono un valore di angolo compreso tra -90deg e 90deg. Le funzioni asin() e acos() accettano un numero compreso tra -1 e 1, mentre la funzione atan() accetta un numero compreso tra -Infinity e +Infinity.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

La funzione atan2() accetta due argomenti che rappresentano un punto rispetto all'origine e restituisce l'angolo che rappresenta la direzione verso quel punto. Puoi utilizzarla per ruotare gli elementi in modo che siano rivolti verso un punto specifico. Gli argomenti possono essere numeri, unità di misura o una percentuale, ma entrambi devono essere dello stesso tipo.

Nell'esempio riportato sopra, la funzione atan2() viene utilizzata per determinare l'angolo tra il centro del viewport e la posizione corrente del mouse. Tieni presente che il valore y è il primo argomento e il valore x è il secondo. L'angolo viene poi utilizzato per posizionare le "pupille" rispetto al centro degli "occhi", in modo che seguano il mouse.

hypot()

La funzione hypot() accetta due argomenti lunghezza che rappresentano i lati di un triangolo rettangolo e restituisce la lunghezza dell'ipotenusa. Puoi utilizzarla come scorciatoia per il calcolo utilizzando le funzioni esponenziali. Entrambi gli argomenti devono essere dello stesso tipo di unità e hypot() restituirà lo stesso tipo.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Funzioni esponenziali

pow() e exp()

La funzione pow() accetta due argomenti numerici, la base e l'esponente, e eleva la base alla potenza dell'esponente. Entrambi gli argomenti devono essere numeri senza unità di misura. La funzione exp() accetta un singolo argomento ed è equivalente alla chiamata della funzione pow() con una base di e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

La funzione sqrt() prende un argomento numerico e restituisce la relativa radice quadrata. L'argomento non può includere unità di misura.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

La funzione log() restituisce il logaritmo di un valore numerico. Se viene passato un argomento, restituisce il logaritmo naturale. Se viene passato un secondo argomento, la funzione log() lo utilizzerà come base per il logaritmo.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Funzioni relative al segno

abs()

La funzione abs() accetta un argomento numerico e restituisce il valore assoluto (positivo) del valore dell'argomento.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

Nell'esempio precedente, un valore alpha di -1 produrrebbe un testo trasparente, ma la funzione abs() restituisce il valore assoluto di 1, che genera un testo completamente opaco.

sign()

La funzione sign() accetta un argomento numerico e restituisce il segno dell'argomento. I valori positivi restituiscono 1 e i valori negativi restituiscono -1. I valori zero restituiscono 0.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

Negli esempi precedenti, se --value è positivo, il valore superiore sarà 75vh. Se è negativo, il valore superiore sarà 25vh. Se è zero, il valore superiore sarà 50vh.

Forme

Le proprietà CSS clip-path, offset-path e shape-outside utilizzano le forme per ritagliare visivamente la casella o fornire una forma attorno alla quale far scorrere i contenuti.

Esistono funzioni per le forme che possono essere utilizzate con entrambe queste proprietà. Forme semplici come circle(), ellipse() e inset() accettano argomenti di configurazione per impostarne le dimensioni. Forme più complesse, come polygon() utilizzano coppie di valori degli assi X e Y separati da virgola per creare forme personalizzate.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Come polygon(), esiste anche una funzione path() che accetta come argomento una regola di riempimento SVG. In questo modo puoi creare forme molto complesse che possono essere disegnate in uno strumento grafico come Illustrator o Inkscape e poi copiate nel CSS.

Trasformazioni

Infine, in questa panoramica delle funzioni CSS sono presenti le funzioni di trasformazione, che inclinano, ridimensionano e persino modificano la profondità di un elemento. Tutte le seguenti funzioni vengono utilizzate con la proprietà transform.

Rotazione

Puoi ruotare un elemento utilizzando la funzione rotate(), che ruota un elemento sull'asse centrale. Puoi anche utilizzare le funzioni rotateX(), rotateY() e rotateZ() per ruotare un elemento su un asse specifico. Puoi passare unità di gradi, giri e radianti per determinare il livello di rotazione.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

La funzione rotate3d() accetta quattro argomenti.

I primi 3 argomenti sono numeri che definiscono le coordinate X, Y e Z. Il quarto argomento è la rotazione che, come le altre funzioni di rotazione, accetta gradi, angolo e giri.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Scala

Puoi modificare la scalatura di un elemento con transform e la funzione scale(). La funzione accetta uno o due numeri come valore che determinano una scalatura positiva o negativa. Se definisci un solo argomento numerico, gli assi X e Y avranno la stessa scala e la definizione di entrambi è una scorciatoia per X e Y. Come per rotate(), esistono le funzioni scaleX(), scaleY() e scaleZ() per scalare un elemento su un asse specifico.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Come per la funzione rotate, esiste anche la funzione scale3d(). È simile a scale(), ma accetta tre argomenti: i fattori di scala X, Y e Z.

Traduci

Le funzioni translate() muovono un elemento mantenendone la posizione nel flusso del documento. Accettano come argomenti valori di lunghezza e percentuale. La funzione translate() trasla un elemento lungo l'asse X se è definito un argomento e trasla un elemento lungo gli assi X e Y se sono definiti entrambi gli argomenti.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Come per le altre funzioni di trasformazione, puoi utilizzare funzioni specifiche per un asse specifico utilizzando translateX, translateY e translateZ. Puoi anche utilizzare translate3d che ti consente di definire la traslazione X, Y e Z in una funzione.

Distorsione

Puoi inclinare un elemento utilizzando le funzioni skew() che accettano gli angoli come argomenti. La funzione skew() funziona in modo molto simile a translate(). Se definisci un solo argomento, questo influirà solo sull'asse X. Se ne definisci entrambi, influirà sugli assi X e Y. Puoi anche utilizzare skewX e skewY per modificare ciascun asse in modo indipendente.

.my-element {
  transform: skew(10deg);
}

Prospettiva

Infine, puoi utilizzare la proprietà perspective che fa parte della famiglia di proprietà di trasformazione per modificare la distanza tra l'utente e il piano Z. In questo modo si crea la sensazione di distanza e puoi creare una profondità di campo nei tuoi progetti.

Questo esempio di David Desandro, tratto dal suo articolo molto utile, mostra come può essere utilizzato, insieme alle proprietà perspective-origin-x e perspective-origin-y, per creare esperienze davvero 3D.

Funzioni di animazione, gradienti e filtri

Il CSS fornisce anche funzioni che ti aiutano ad animare gli elementi, applicare sfumature e utilizzare filtri grafici per modificarne l'aspetto. Per mantenere questo modulo il più conciso possibile, vengono trattati nei moduli collegati. Seguono tutte una struttura simile a quella delle funzioni mostrate in questo modulo.

Verificare di aver compreso

Verifica le tue conoscenze sulle funzioni