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
Con quali caratteri si possono identificare le funzioni CSS?
[]
:
::
{}
()
CSS ha funzioni matematiche integrate?
Una funzione calc()
può essere posizionata all'interno di un'altra funzione calc()
come font-size: calc(10px + calc(5px * 3));
Quali delle seguenti sono funzioni di forma CSS?
ellipse()
polygon()
rect()
circle()
inset()
square()