CSS
funzioni

Sintassi

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Osservazioni

funzione calc ()

Accetta un'espressione matematica e restituisce un valore numerico.

È particolarmente utile quando si lavora con diversi tipi di unità (ad esempio, sottraendo un valore px da una percentuale) per calcolare il valore di un attributo.

È possibile utilizzare tutti gli operatori + , - , / , e * e è possibile aggiungere parentesi per specificare l'ordine delle operazioni, se necessario.

Usa calc() per calcolare la larghezza di un elemento div:

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

Usa calc() per determinare la posizione di un'immagine di sfondo:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Usa calc() per determinare l'altezza di un elemento:

height: calc(100% - 20px);

funzione attr ()

Restituisce il valore di un attributo dell'elemento selezionato.

Di seguito è riportato un elemento blockquote che contiene un carattere all'interno di un attributo data-* che il CSS può utilizzare (ad esempio all'interno dello pseudo-elemento ::before e ::after ) utilizzando questa funzione.

<blockquote data-mark='"'></blockquote>

Nel seguente blocco CSS, il carattere viene aggiunto prima e dopo il testo all'interno dell'elemento:

blockquote[data-mark]::before,
blockquote[data-mark]::after {
    content: attr(data-mark);
}

funzione linear-gradient ()

Crea un'immagine che rappresenta un gradiente lineare di colori.

linear-gradient( 0deg, red, yellow 50%, blue);

Questo crea una sfumatura che va dal basso verso l'alto, con i colori che iniziano con il rosso, poi il giallo al 50% e la finitura in blu.

funzione radial-gradient ()

Crea un'immagine che rappresenta un gradiente di colori che si irradiano dal centro del gradiente

radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/

funzione var ()

La funzione var () consente l'accesso alle variabili CSS.

/* set a variable */
:root {
    --primary-color: blue;
}

/* access variable */
selector {
    color: var(--primary-color);
}

Questa funzione è attualmente in fase di sviluppo. Controlla caniuse.com per l'ultimo supporto del browser.