CSS – 5 funzioni che, forse, non conosci

Read Time:4 Minute, 11 Second

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.

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Roberto Beccari
Latest posts by Roberto Beccari (see all)

Roberto Beccari

Mi chiamo Roberto, da più di 20 anni mi occupo di programmazione e usabilità, inoltre sono un fanatico della tecnologia. In questo blog parlo di quello che faccio, di come lo faccio e descrivo il mio modo di vedere il mondo attorno a me. Se vuoi conoscermi e scambiare idee, la mia mappa è sempre pronta per essere estesa anche alle idee degli altri.

Potrebbero interessarti anche...

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%