Funzioni

Podcast CSS - 020: Funzioni .

Finora in questo corso hai scoperto diverse funzioni CSS. Nel modulo Griglia, ti sono stati presentati minmax() e fit-content(), che ti aiutano a dimensionare gli elementi. Nel modulo colore, ti sono stati presentati rgb() e hsl(), che ti aiutano a definire i colori.

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

Ogni funzione CSS ha uno scopo specifico, di questa lezione vedrete una panoramica generale, aiutandoti così a capire meglio dove e come utilizzarli.

Che cos'è una funzione?

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

Molte funzioni CSS sono funzioni pure, il che significa che se passi gli stessi argomenti, restituiranno sempre lo stesso risultato, a prescindere 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 usare solo le funzioni fornite, anziché scrivere i tuoi, ma le funzioni possono essere nidificate l'una all'altra in alcuni contesti, offrendo una maggiore flessibilità. Approfondiremo questo aspetto più avanti in questo modulo.

Selettori funzionali

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

Hai appreso cosa sono i selettori funzionali modulo pseudo-classi quali funzioni dettagliate, come :is() e :not(). Gli argomenti passati in queste funzioni sono selettori CSS, che vengono poi valutati. In caso di corrispondenza con gli elementi, verrà 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 tuo codice CSS. Anche le proprietà personalizzate sono interessate dalla cascata il che significa che possono essere manipolati o ridefiniti in base al contesto. Una proprietà personalizzata deve essere preceduta da due trattini (--) ed è sensibile alle maiuscole.

La var() prende un argomento richiesto: la proprietà personalizzata che stai cercando di restituire come valore. Nello snippet riportato sopra, per la funzione var() è stato passato --base-color come argomento. Se --base-color viene 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 del campione è 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() segue una struttura simile a var(): passi uno o più argomenti e li utilizzi sul lato destro della dichiarazione CSS.

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

La funzione attr() qui prende i contenuti dell'attributo href dell'elemento <a> e impostandolo come content dello pseudo-elemento ::after. Se il valore dell'attributo href dell'elemento <a> doveva cambiare, questo verrà applicato automaticamente all'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 la risorsa a cui rimanda non è presente, la funzione url() non restituirà nulla.

Funzioni colore

Hai appreso tutto quello che c'è da sapere sulle funzioni colore nel modulo colore. Se non l'hai ancora letto, ti consigliamo vivamente di leggerlo.

Alcune funzioni colore disponibili in CSS sono rgb(), rgba(), hsl(), hsla(), hwb(), lab() e lch(). Tutte queste caratteristiche hanno una forma simile in cui gli argomenti di configurazione vengono passati e viene restituito un colore.

Espressioni matematiche

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

calc()

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

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

In questo esempio, la funzione calc() viene utilizzata per dimensionare la larghezza di un elemento come 100% dell'elemento principale contenente, quindi rimuovendo lo sconto di 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 trasmettere proprietà personalizzate in una funzione var() come parte di un'espressione.

min() e max()

La min() restituisce il valore calcolato più piccolo di uno o più argomenti passati. La max() funziona al contrario: ottieni 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ù basso tra 20vw , che corrisponde al 20% della larghezza dell'area visibile, e 30rem. L'altezza deve essere il valore massimo compreso tra 20vh , che è il 20% dell'altezza dell'area visibile, e 20rem.

clamp()

La clamp() accetta tre argomenti: dimensione minima, la dimensione ideale e il massimo.

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 è stata aggiunta a un'unità rem per facilitare lo zoom dello schermo, poiché, indipendentemente dal livello di zoom, un'unità vw avrà le stesse dimensioni. 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.

Forme

La clip-path, offset-path e shape-outside Le proprietà CSS utilizzano forme per ritagliare visivamente la tua casella o per dare una forma ai contenuti che possano fluire.

Esistono funzioni di forma che possono essere utilizzate con entrambe le proprietà. Forme semplici come circle(), ellipse() e inset() prendono gli argomenti di configurazione per determinarne le dimensioni. Forme più complesse, ad esempio polygon() prendere coppie di valori degli assi X e Y separati 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(), è disponibile anche una funzione path() che accetta una regola di riempimento SVG come argomento. Ciò consente di realizzare forme altamente complesse che possono essere disegnate con uno strumento grafico come Illustrator o Inkscape e poi copiati nel CSS.

Trasformazioni

Infine, in questa panoramica delle funzioni CSS ci sono le funzioni di trasformazione, che disallineano, 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 rotate() , che ruoterà un elemento sul suo asse centrale. Puoi utilizzare anche rotateX(), rotateY() e rotateZ() per ruotare un elemento su un asse specifico. Puoi passare i gradi, le unità di rotazione e i radianti per determinare il livello di rotazione.

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

La 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 di rotazione, accetta gradi, angoli e giri.

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

Scala

Puoi modificare le proporzioni di un elemento con transform e Funzione scale(). La funzione accetta uno o due numeri come valore che determina una scala positiva o negativa. Se definisci un solo argomento numerico, la scala per gli assi X e Y sarà la stessa e definire entrambi è un'abbreviazione per X e Y. Proprio come rotate(), esistono scaleX(), scaleY() e scaleZ() per scalare un elemento su un asse specifico.

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

Inoltre, come la funzione rotate, è presente una Funzione scale3d(). È simile a scale(), ma richiede tre argomenti: il fattore di scala X, Y e Z.

Traduci

La translate() spostano un elemento mentre mantiene la sua posizione nel flusso del documento. Accettano valori di lunghezza e percentuale come argomenti. La funzione translate() traduce un elemento lungo l'asse X se viene definito un argomento, e traduce un elemento lungo gli assi X e Y se entrambi gli argomenti sono definiti.

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

Come per 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 di X, Y e Z in un'unica funzione.

Da schiacciare

Puoi inclinare un elemento utilizzando skew() che accettano gli angoli come argomenti. Il funzionamento della funzione skew() è molto simile a quello di translate(). Se definisci un solo argomento, questo interesserà solo l'asse X, mentre se li definisci entrambi, questo influirà sugli assi X e Y. Puoi anche utilizzare skewX e skewY per influire su ogni asse in modo indipendente.

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

Prospettiva

Infine, puoi utilizzare Proprietà perspective , che fa parte della famiglia di proprietà transform, per modificare la distanza tra l'utente e il piano Z. Questo dà la sensazione della distanza e può essere utilizzato per creare una profondità di campo nei tuoi progetti.

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

Funzioni di animazione, sfumature e filtri

Il codice CSS offre anche funzioni utili per animare elementi, e applicare gradienti e usare filtri grafici per manipolarne l'aspetto. Per mantenere questo modulo il più conciso possibile, sono trattati nei moduli collegati. Seguono una struttura simile alle funzioni mostrate in questo modulo.

Verifica le tue conoscenze

Verifica le tue conoscenze delle funzioni