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 ciò che accade 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 riportato sopra, 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() hanno 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(), rgba(), hsl(), hsla(), hwb(), lab() e lch(). 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 calcoli.

calc()

Browser Support

• 26
• 12
• 16
• 7

Source

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()

Browser Support

• 79
• 79
• 75
• 11.1

Source

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.

Nota: copriamo unità come vw e vh nel modulo delle unità di dimensionamento.

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

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.

Per scoprire 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 attorno alla quale far scorrere i contenuti.

Esistono funzioni di forma 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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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.

Browser Support

• 12
• 12
• 10
• 4

Source

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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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 ridimensionare 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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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 sola funzione.

Skewing

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

Browser Support

• 36
• 12
• 16
• 9

Source

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 usare questa tecnica per 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 veramente 3D.

Funzioni di animazione, gradienti e filtri

Il CSS fornisce anche funzioni che ti aiutano ad animate 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

Le funzioni CSS possono essere identificate da quali caratteri?

[]

Questi caratteri sono destinati agli array in JavaScript.

{}

Questi caratteri inseriscono un a capo nelle regole CSS.

()

Le funzioni utilizzano questi caratteri per inserire gli argomenti in un a capo.

::

Questi caratteri sono destinati agli pseudo-elementi in CSS.

:

Questi caratteri sono destinati alle pseudoclassi in CSS.

Il CSS ha funzioni matematiche integrate?

Vero

Ce ne sono molti e ne vengono aggiunti altri alle specifiche e ai browser.

Falso

Riprova.

Una funzione calc() può essere inserita all'interno di un'altra calc() come font-size: calc(10px + calc(5px * 3));

Vero

🎉

Falso

Riprova.

Quali delle seguenti sono funzioni di forma CSS?

ellipse()

🎉

square()

Riprova.

circle()

🎉

rect()

Riprova.

inset()

🎉

polygon()

🎉