CSS – 5 funzioni che, forse, non conosci
Oggi, nel consueto martedì dedicato ai CSS, parliamo di cinque funzioni che potresti non conoscere.
I fogli di stili nel tempo si sono evoluti molto per consentire una migliore e maggiore flessibilità, vediamo.
Puoi registrarti sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
calc(…)
Personalmente è una delle funzioni che più utilizzo, quando vogliamo calcolare la corretta dimensione di un oggetto, ci preoccupiamo sempre di determinare le unità di misura da utilizzare a priori, percentuale, in punti, ecc. La capacità di questa funzione è quella poter calcolare in modo dinamico, anche utilizzando unità diverse, la lunghezza di un valore in ingresso.
Sintassi:
calc(<valore> <operatore> <valore>...);Esempio:
calc(100% - 80px);
calc(100% / 4);L’espressione può essere qualsiasi espressione semplice che combina i operatori standard:
Addizione +
Sottrazione –
Moltiplicazione * (almeno uno degli operatori deve essere numerico)
Divisione / (il lato destro dell’operatore deve essere numerico)
Molto comodo che utilizzo percentuali alle quali devo togliere pixel per via di padding o margin applicati a oggetti interni, oppure per determinate la dimensione in rapporto alla pagina con oggetti persistenti con dimensione fissa come barre per strumenti o simili.
attr(…)
La funzione attr() viene utilizzata per recuperare il valore di un attributo dell’elemento selezionato e utilizzarlo nel foglio di stile. Può essere utilizzato anche su pseudo-elementi.
Sintassi:
attr(<nome attributo> <tipo o unità>, <valore di fallback>);Il tipo di unità è relativo alla tipologia, stringa, numero, ecc.
Alcuni esempi:
<button data-color="red"></button>
<button data-color="green"></button>
<button data-color="blue"></button>
button {
color:attr(data-color);
}Utile se vogliamo rendere dinamici gli elementi e utilizzare gli attributi per gestire le proprietà di classi condivise.
var(…)
CSS ha introdotto di recente il supporto delle variabili, o più precisamente, proprietà personalizzate, queste possono essere riassegnate a cascata per una maggiore flessibilità. Al pari dei preprocessori tipo SASS e LESS, consente di gestire in modo strutturato i valori dei nostri stili. Invece di ripetere lo stesso valore in più classi, oggi possiamo, direttamente in CSS, dichiarare una proprietà personalizzata, assegnarle un valore e usare direttamente la proprietà.
Sintassi:
var(<nome della proprietà>, <valore di fallback>?);Possiamo utilizzare altre proprietà personalizzate come valori di fallback.
Esempio:
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
// Sovrascrivo il valore della variabile
body .content {
--main-bg-color: red;
background-color: var(--main-bg-color);
}Possiamo utilizzare le variabili come parametri per le funzioni come calc(…) oppure rgb(…), esempio:
:root {
--content-size: 100%;
--color-r: 80;
--color-g: 120;
--color-b: 60;
}
.content {
width: calc(var(--content-size) / 5);
background-color: rgb( var(--color-r) , var(--color-g) , var(--color-b) );
}@import
Probabilmente lo conoscete perché si vede spesso utilizzato per includere i font da Google o da altri servizi simili.
@Import nella realtà, nasce per includere altri fogli di stili in uno. Molti preprocessori lo utilizzano per combinare i CSS inclusi in fase di compilazione.
Sintassi:
@import <url|string> <lista media queries>;Esempio:
@import "colori.css" print;
@import "layout.css" screen and (max-width: 768px);In questo modo, possiamo gestire fogli di stili singoli a seconda delle necessità.
Possiamo creare un file principale main.css così strutturato:
@import "colors.css";
@import "master.css";
@import "layout.css";
@import "footer.css";
body {
/* utilizziamo la variabile presente in "colors.css" */
background-color: var(--main-bg-color);
}@supports
Questa è una di quelle che che preferisco. Oggi più che mai, utilizziamo fogli di stile che devono funzionare su diversi dispositivi, ma come spesso succede, non tutti questi hanno un supporto a tutti gli stili, alcuni ne possiedono di personalizzati utili per specifiche funzionalità o personalizzati da produttore, vedi Smart TV, Smart Watch, ecc.
Ma come facciamo a sapere se possiamo o meno utilizzare uno stile specifico su uno specifico dispositivo?
@supports ci viene in aiuto in questi casi. Lo possiamo utilizzare per applicare stili specifici se viene supportata una specifica proprietà.
Per semplificare, se è supportata la proprietà x, allora applica queste regole, possiamo anche determinare se una proprietà NON viene supportata allora applica altre regole.
Sintassi:
@supports (not) <condizioni supportata> {
<regole css da applicare>
}La condizione che vado a verificare può essere anche multipla utilizzando operatori booleani come OR e AND.
Esempio:
// Verifico se supporta il valore grid nella proprietà display
@supports (display: grid) {
.main {
display: grid;
}
}
@supports not (display: grid) {
.main {
display: relative;
}
}
@supports (display: table-cell) and (display:run-in) {}
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
Conclusioni
Se le conoscevate tutte e le usate, bravissimi/e, usate al meglio CSS.
Se ne usate solo alcune, non male, mi piacerebbe vedere i vostri fogli di stile.
Se invece non ne conoscevate nessuna, non vi preoccupate, adesso le conoscete e potete usarle.
Puoi registrarti sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
Ci rivediamo settimana prossima, buon divertimento.
Se vuoi conoscermi e scambiare idee, la mia mappa è sempre pronta per essere estesa anche alle idee degli altri.
- La lampada magica di OpenAI - Gennaio 19, 2023
- BOB, il primo programmatore - Gennaio 17, 2023
- Software e Accessibilità - Febbraio 18, 2022
