Valori e unità in CSS

Come accennato già nella lezione precedente ciò che compone una regola CSS sono il selettore e le varie dichiarazioni, le quali sono racchiuse in una coppia di parentesi graffe.

Ogni dichiarazione è composta da una proprietà e un valore. Ogni proprietà ha un tipo di valore consentito detto anche data type. Ciò significa che non possiamo usare un qualsiasi valore per ogni proprietà disponibile. Per essere più espliciti:

• color: 13px non è un valore consentito, che colore è 13px?
• color: red _oppure _color: rgb(255 0 0) questi sono valori validi

Nella specifica, nella documentazione e anche in Visual Studio Code potremmo trovare come indicazione qualcosa del tipo <color>, <length>, <shadow>, <position>, ecc.

Queste diciture tra parentesi angolari non sono tag, ma indicano il data type da usare e che puoi cercare liberamente in documentazione per capire quali valori sono accettati.

Numeri, lunghezze e percentuali

Per quanto riguarda i numeri, le lunghezze e le percentuali i principali data type che abbiamo a disposizione sono:

• <integer>: un numero intero sia positivo che negativo
• <number>: un numero decimale
• <dimension>: categoria che raccoglie:
  • <length>: rappresenta una distanza o una lunghezza
  • <angle>: rappresenta un valore angolare espresso in gradi, gradianti, radiali o giri
  • <time>: rappresenta del tempo espresso in secondi o millisecondi
  • <resolution>: usato per descrivere la risoluzione intesa come densità dei pixel di un dispositivo
• <percentage>: un numero che come unità ha il simbolo della percentuale.

Le unità di misura

Per <percentage> ho parlato di unità, pensa che CSS ha 29 unità di misura, le quali vengono suddivise in due gruppi: assolute e relative.

Unità di misura assolute

Le unità assolute sono quelle che indicano esattamente il valore espresso. 100px sono uguali esattamente a 100px sullo schermo.

Tra le varie unità abbiamo:

• cm = centimetro
• mm = millimetro
• Q = quarto di millimetro
• in = pollici
• pc = pica
• pt = punti
• px = pixel

La maggior parte di queste unità sono più utili quando si stampa. Nella stragrande maggioranza dei casi il valore usato è pixel (px).

Le unità di misura relative

Mentre le unità relative sono relative a qualcos’altro, solitamente al genitore o ad un elemento in particolare). Tra queste le più note sono:

• em: relativa al font size dell'elemento genitore per i testi e width nel caso di altre proprietà
• rem: relativa al font size dell'elemento root (html)
• vw: relativa alla larghezza del viewport (la parte visibile della pagina web) 1vw = 1% della larghezza del viewport
• vh: relativa all'altezza del viewport
• %

Ce ne sono molte altre come: ex, ch, ic, lh, rlh, vmin, vmax, vb, vi, svw, svh, lvw, lvh, dvw, dvh, cqw, cqh, cqi, cqb, cqmin, cqmax.

Alcune di queste le vedremo più avanti nel corso, come ad esempio cqw, cqh, cqi, cqb, cqmin, cqmax quando parleremo di container query. Nel paragrafo successivo chiarirò al volo svw, svh, lvw, lvh, dvw, dvh, mentre per le altre vi consiglio di darti una letta alla documentazione sul data type <length> o se preferisci qualcosa di più pocket c’è sempre il mio post sulla community di YouTube sulle varie unità di misura.

Una precisazione su vh e vw

Il problema di vh e vw è che se le impostassimo a 100, penseremmo che siano esattamente il 100% del viewport, ma non è così. Queste unità non tengono conto dell’interfaccia del browser, soprattutto da mobile, dove questa può avere dimensioni diverse in base allo scroll.

Crediti immagine: web.dev

Grazie ad uno sforzo collettivo di Apple, Bocoup, Google, Igalia, Microsoft e Mozilla sono state introdotte recentemente delle nuove unità di misura svw, svh, lvw, lvh, dvw, dvh le quali sono relative al viewport piccolo (small), viewport grande (large) e viewport dinamico (dynamic).

In particolare:

• svh e svw rappresentano la dimensione più piccole che il viewport può avere
• lvh e lvw rappresentano la dimensione più grande che il viewport può avere
• dvh e dvw è un valore dinamico che cambia in base agli altri elementi come la barra degli indirizzi.

Crediti immagine: web.dev

I colori

Per quanto riguarda il data type <color> abbiamo diversi valori disponibili, come:

• nominativo (n.b. questi valori vengono scritti senza virgolette e vengono chiamati identificativi, questa informazione ci servirà dopo): parola chiave che identifica un colore come red, green o blue.
• esadecimale: tre coppie in formato esadecimale (0123456789abcdef) precedute da un cancelletto come #bada55, #ff0000. Il valore massimo della coppia è ff e il minimo 00, equivalenti a 255 e 0 per rgb.
• rgb() o rgba(): funzione che accetta tre valori da 0 a 255 sui tre canali rosso, verde e blu. Opzionalmente può essere definito un quarto parametro che è riferimento al canale alpha o trasparenza, il valore da 0 a 1, dove 0 è completamente trasparente e 1 è completamente visibile.
• hsl() o hsla(): funzione che accetta tra valori, il primo in gradi e fa riferimento alla tonalità, il secondo e il terzo in percentuale e fanno riferimento alla saturazione alla luminosità. Anche qui opzionalmente si può usare il quarto parametro per la trasparenza.
• currentColor: fa riferimento al valore computato della proprietà color dell’elemento, oppure, se questa non dovesse esistere viene trattato come inherit (eredita dal genitore)

I meno noti e utilizzati sono:

• hwb()
• lab()
• lch()
• oklab()
• oklch()

Gli spazi colore

Se ti stai chiedendo se ci sia una particolare differenza tra le varie funzioni, la risposta è sì. Se non ti stavi chiedendo niente, continua a leggere che male non fa.

hsl(), hwb() e rgb() si basano sullo spazio colori RGB standard creato da HP e Microsoft nel 1996, mentre lab() e lch() si basano sullo spazio colore CIELAB creato dall’International Commission on Illumination nel 1976, infine oklab() e oklch() sono basati sullo spazio colore Oklab. Tutti gli altri sono basati su sRGB.

Mischiare i colori con color-mix()

La funzione color-mix() permette di mescolare due colori specificando inoltre il metodo di interpolazione, il quale può essere:

• srgb
• srgb-linear
• lab
• oklab
• xyz
• xyz-d50
• zyx-d65

1.box-1 {
2   background: color-mix(in srgb, #bada55 50%, white);
3}

Immagini

Le immagini possono essere inserite in CSS attraverso la funzione url(). Nello stesso data type <image> nella quale è specificato url() è disponibile anche il data tipo <gradient> con le sue varie tipologie:

• linear-gradient
• repeating-linear-gradient
• radial-gradient
• repeating-radial-gradient
• conic-gradient
• repeating-conic-gradient

1background: linear-gradient(rgb(246, 157, 60), rgb(63, 135, 166));
2background: radial-gradient(rgb(246, 157, 60), rgb(63, 135, 166));
3background: repeating-linear-gradient(rgb(246, 157, 60), rgb(63, 135, 166) 50px);
4background: conic-gradient(#f69d3c, #3f87a6);

Posizioni

Sempre legate alle immagini, ma di un data type differente ci sono anche le <position> un valore che rappresenta delle coordinate 2D usate per posizionare un elemento (es. un’immagine di sfondo).

1.box {
2  height: 300px;
3  width: 400px;
4  background-image: url(bolt.png);
5  background-repeat: no-repeat;
6  background-position: right 30px;
7}

Stringhe

A differenza degli identificatori (es. black, red, peru, tomato, ecc.) in CSS esistono anche le stringhe, le quali come in altri linguaggi sono delimitate da delle virgolette.

1.box::after {
2  content: "Questa è una stringa in CSS"
3}

Funzioni

Già menzionate in precedenza con rgb(), hsl(), ecc. CSS ha numerose funzioni, come ad esempio translate(), rotate(), scale(), skew(), ecc. Ci sono anche funzioni matematiche come calc(), min(), max() o clamp() o funzioni trigonometriche come sin(), cos() o tan().

1.wrapper {
2  width: 1080px;
3}
4.box {
5  width: calc(50% + 150px);
6}

Ricapitolando

CSS ha una quantità di proprietà, valori e unità di misura pazzesca. Bisogna sapere tutto a memoria? Assolutamente no. La documentazione è sempre lì pronta ad aiutarci.