Funzioni

Podcast CSS - 020: Funzioni

Finora in questo corso ti abbiamo illustrato diverse funzioni CSS. Nel modulo grid, ti sono stati presentati minmax() e fit-content(), che consentono di dimensionare gli elementi. Nel modulo color, ti sono stati presentati rgb() e hsl(), che ti aiutano a definire i colori.

Come molti altri linguaggi di programmazione, il 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 otterrai una panoramica generale che ti consentirà di capire meglio dove e come utilizzarle.

Che cos'è una funzione?

Una funzione è una porzione di codice indipendente e denominata che completa un'attività specifica. Una funzione viene denominata in modo che tu possa chiamarla all'interno del tuo codice e passare dati alla funzione. Questo è noto come passaggio di argomenti.

Molte funzioni CSS sono funzioni pure; ciò significa che se trasferisci gli stessi argomenti alle funzioni, ti restituiranno sempre lo stesso risultato, indipendentemente da ciò che accade nel resto del codice. Queste funzioni vengono spesso ricalcolate man mano che i valori cambiano nel tuo CSS, in modo simile ad altri elementi del linguaggio, ad esempio valori a cascata calcolati come currentColor.

In CSS puoi utilizzare solo le funzioni fornite, anziché scriverne di personalizzate, ma possono essere nidificate l'una all'interno dell'altra in alcuni contesti, per una maggiore flessibilità. Approfondiremo l'argomento più avanti nel modulo.

Selettori funzionali

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

Hai imparato a conoscere i selettori funzionali nel modulo pseudo-classi, in cui sono dettagliate funzioni come :is() e :not(). Gli argomenti passati a queste funzioni sono selettori CSS, che vengono poi valutati. In caso di corrispondenza con gli elementi, a questi verrà applicata la 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 tuo codice CSS. Anche le proprietà personalizzate sono influenzate dalla cascata, il che significa che possono essere manipolate o ridefinite in base al contesto. Una proprietà personalizzata deve essere preceduta da due trattini (--) e fare distinzione tra maiuscole e minuscole.

La funzione var() prende un argomento richiesto: la proprietà personalizzata che stai cercando di restituire come valore. Nello snippet riportato sopra, la funzione var() ha superato --base-color 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 nel caso di questo esempio è 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() hanno una struttura simile a var(): passi uno o più argomenti e li utilizzi sul lato destro della tua dichiarazione CSS.

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

La funzione attr() qui prende il contenuto dell'attributo href dell'elemento <a> e lo imposta come content dello pseudo-elemento ::after. Se il valore dell'attributo href dell'elemento <a> dovesse cambiare, la modifica verrebbe visualizzata automaticamente in questo attributo content.

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

La funzione url() prende un URL string e viene utilizzata per caricare immagini, caratteri e contenuti. Se non viene trasmesso un URL valido o se non è possibile trovare la risorsa a cui punta l'URL, la funzione url() non restituisce nulla.

Funzioni colore

Hai imparato tutto ciò che riguarda le funzioni colore nel modulo color. Ti consigliamo vivamente di leggere un articolo, se non l'hai ancora fatto.

Alcune funzioni colore disponibili in CSS sono rgb(), rgba(), hsl(), hsla(), hwb(), lab() e lch(). Tutte queste configurazioni hanno un formato simile, in cui vengono trasmessi gli argomenti della configurazione e viene restituito un colore.

Espressioni matematiche

Come tanti altri linguaggi di programmazione, CSS offre funzioni matematiche utili per i vari tipi di calcolo.

calc()

La funzione calc() prende una singola espressione matematica come parametro. Questa espressione matematica può essere una combinazione di tipi, ad es. lunghezza, numero, angolo e frequenza. Puoi anche combinare le unità.

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

In questo esempio, la funzione calc() viene utilizzata per ridimensionare la larghezza di un elemento al 100% dell'elemento principale contenitore, quindi rimuovere 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 il contrario: ottiene il valore più alto 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ù basso tra 20vw (20% della larghezza dell'area visibile) e 30rem. L'altezza deve essere il valore massimo tra 20vh (20% dell'altezza dell'area visibile) e 20rem.

clamp()

La funzione clamp() accetta tre argomenti: la dimensione minima, la dimensione ideale e la massima.

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 perché, indipendentemente dal livello di zoom, un'unità vw avrà le stesse dimensioni. Moltiplicando per un'unità rem, in base alla dimensione del carattere principale, la funzione clamp() fornisce un punto di calcolo relativo.

Per saperne di più sulle funzioni min(), max() e clamp(), consulta questo articolo.

Forme

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

Esistono funzioni di forma che possono essere utilizzate con entrambe le proprietà. Forme semplici come circle(), ellipse() e inset() adottano argomenti di configurazione per ridimensionarle. Le forme più complesse, ad esempio polygon(), utilizzano coppie di valori degli assi X e Y separate da virgole 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 utilizza una regola di riempimento SVG come argomento. In questo modo è possibile creare forme molto complesse che possono essere disegnate in uno strumento di grafica come Illustrator o Inkscape e poi copiate nel CSS.

Trasformazioni

Infine, in questa panoramica sulle funzioni CSS ci sono le funzioni di trasformazione che distorcono, ridimensionano e modificano persino 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 ruoterà un elemento sul suo asse centrale. Inoltre, puoi utilizzare le funzioni rotateX(), rotateY() e rotateZ() per ruotare un elemento su un asse specifico. Puoi passare le unità di gradi, rotazione 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 tre argomenti sono numeri, che definiscono le coordinate X, Y e Z. Il quarto argomento è la rotazione che, come le altre funzioni, accetta gradi, angoli e svolte.

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

Scalabilità

Puoi modificare il ridimensionamento di un elemento con transform e la funzione scale(). La funzione accetta uno o due numeri come valore che determina una scala positiva o negativa. Se definisci un solo argomento numerico, entrambi gli assi X e Y saranno scalati allo stesso modo e la definizione di entrambi è un'abbreviazione per X e Y. Come rotate(), esistono funzioni scaleX(), scaleY() e scaleZ() per scalare un elemento su un asse specifico.

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

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

Traduci

Le funzioni translate() spostano un elemento mentre questo mantiene la sua posizione nel flusso del documento. Accettano valori di lunghezza e percentuale come argomenti. La funzione translate() traduce un elemento sull'asse X se è stato definito un argomento e traduce un elemento sull'asse X e Y se sono stati definiti entrambi gli argomenti.

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

Come con altre funzioni di trasformazione, puoi usare funzioni specifiche per un asse specifico usando translateX, translateY e translateZ. Puoi anche utilizzare translate3d per definire la traduzione di X, Y e Z in una sola funzione.

Inclinata

Puoi distorcere 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 e, se definisci entrambi, influirà sugli assi X e Y. Puoi anche utilizzare skewX e skewY per influire su 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 puoi creare una sensazione di distanza e creare una profondità di campo nei tuoi progetti.

L'esempio dell'utilissimo articolo di David Desandro mostra come utilizzarlo, insieme alle proprietà perspective-origin-x e perspective-origin-y, per creare esperienze davvero 3D.

Funzioni di animazione, gradienti e filtri

CSS fornisce anche funzioni che consentono di animare gli elementi, applicare gradienti e utilizzare filtri grafici per modificarne l'aspetto. Per rendere questo modulo il più conciso possibile, vengono illustrati nei moduli collegati. Hanno tutte una struttura simile alle funzioni mostrate in questo modulo.

Verifica le tue conoscenze

Verifica la tua conoscenza delle funzioni